발생일: 2009.09.25 문제: 프렌드 홍이 묻는다. "firebug으로 자바스크립트 브레이크포인트 잡아서 디버깅하는 법 아냐?" 음... 접때 어디서 본 것 같긴 한데, 잘 모르겠다. firebug은 거의 요소검사에만 사용하고 있거든... "잘 모르겠는디.... 검색해봐바바." 해결책: 홍이 검색해보더니 매우 잘 가이드해놓은 포스트를 알려준다. Firebug 중단점(Breakpoints) 강좌 동영상 포스트 참고 위 사이트는 소개 사이트이고, 실제로 강좌 동영상이 있는 사이트는 아래 사이트다. Screencast: Firebug Breakpoints 강좌가 24메가 정도라 좀 걸리지만, 인내를 갖고 다운로드 받아보도록 한다. 매우 유용하다... 오우... 이것 봐라! 아름답게 디버깅된다... 오우...
발생일: 2009.08.27 문제: gmail 을 사용하다 보면, 전부 AJAX 로 동작하고 있음에도 불구하고 back, next 등 히스토리 버튼이 정상적으로 동작한다. 어뜨케 한 걸까.....-_-a? 해결책: 검색해보니 이 내용에 대해 잘 정리해둔 블로그가 있다. (Ajax의 브라우저 Back 버튼 대응 방법) 위 블로그에도 있는 링크이며, Really Simple History framework(RSH) 라는 히스토리 관리 객체를 만들어서 사용하는 예도 있다. 오라클 테크널러지 사이트에서도 관련 튜토리얼에 대한 기사가 있으니 참고할 만한다. My Fried Tech 사이트에서는 Ajax History 에 관해 매우 친절한 튜토리얼을 작성해뒀다.^^ (추천) 가만 생각해보다가, 이런 거면 AJAX ..
발생일: 2009.08.27 문제: 픽셀드로우 개편 작업 중이다. 페이지에 필요한 스크립트를 원하는 것만 쉽게 넣어 관리할 수 있는 방법을 생각하고 있다. 예를 들어, pixeldraw.js, pixeldraw.canvas.js, pixeldraw.colorspecturm.js, pixeldraw.list.js 와 같이 여러 개의 js 파일이 그룹별로 나뉘어져 있다고 가정해보자. 매 페이지마다 스크립트 태그를 넣어주자니 코드가 지저분해지고, jsp 의 include 등을 써서 처리하자니 페이지별로 구분하기가 쉽지 않다. 그리고 무엇보다, 깔끔하게 가볍게 한 줄로 표시하고 싶단 말이지... 어떤 좋은 방법이 있을까? 해결책: 기존에 js import 에 대해서 많은 이슈가 있었나보다. 검색해보니 유용한 정..
발생일: 2009.08.25 문제: 픽셀드로우의 캔버스 작업 중에 툴을 간편하게 바꾸게 하기 위해 단축키 이벤트 핸들러를 만들었다. 예상했던 대로 툴이 잘 변경되는데, 제목과 내용 칸에 글자를 입력할 때에도 이벤트 핸들러가 적용돼 툴이 바뀌어 버린다. 해결책: 처음엔 마우스 포지션의 위치를 파악해서 캔버스 위에 있을 때에만 단축키 이벤트가 적용되도록 할까 했었는데, 왠지 비효율적일 것 같다는 생각이 들었다. 또한 각각의 브라우저에서 어떤 element에도 포커스가 가지 않았을 때의, 이벤트 타겟을 찾아보니 역시나 모두 달랐다. IE 는 마지막으로 클릭한 element. 만약 element가 선택되지 않았다면 BODY, BODY의 밖을 클릭했었다면 HTML. FF 는 HTML 이 표시되고, 크롬은 BODY..
발생일: 2009.08.06 문제: jquery 를 이용하여 작업하고 있는데, 좀 쉽게 drag & drop 을 구현하고자 한다. jquery 는 플러그인이 무지 많던데 말이야... 해결책: http://blog.threedubmedia.com/ jquery 를 바탕으로 drag & drop 을 잘 구현해놓은 플러그인이 있다. 사용도 간단하고 매우 잘 작동한다. 간단하게 아래와 같이 사용하면 되겠다. $(obj).bind('drag'), function(e) { // 핸들러 }); 이 외에도 좋은 플러그인을 구현해 놓았으니 참고해보자.
발생일: 2009.07.21 문제: 부모창에서 자식창의 내용이 모두 로드된 후에 함수를 호출하려고 한다. 팝업의 내용이 모두 완료된 후에 부모창에서 자식창의 제어를 하고 싶다. 예) 공지사항 팝업 컨트롤러에서 팝업이 모두 뜨고 난 후에 팝업창의 사이즈를 조절하고 싶은 경우. 또는 팝업이 모두 완료된 이후에 특정 문구나 스타일을 추가하고 싶을 경우. 해결책: 일반적으로는 팝업이 표시되는 페이지에서 onload 이벤트를 구현해주면 되겠지만, 여기서는 부모창에서 자식창의 status를 확인한다. 아래와 같이 부모창에서 팝업을 띄울 때 팝업창 객체를 변수에 담아두고, 그 객체의 onload 이벤트 핸들러를 정의해주면 된다. var pop = window.open('팝업창의 주소'); setEventHandler..
발생일: 2009.06.24 문제: option에 포함된 text 길이에 따라 동적으로 가로 사이즈가 늘어나는 select box가 있다. 사이즈는 대략 맞으면 되었기 때문에 내부적으로는 font size(대충 11 정도)에 text 길이를 곱한 값으로 select box의 스타일을 설정하는 로직이 있었다. 이제까지는 text에 영어만 있었기 때문에 별 탈 없이 운영되고 있었는데, 이번에 한글이 포함되면서 select box의 가로 사이즈가 정상적으로 늘어나지 않는다. 한글이 2byte 임에도 length를 구하면 1byte로 표시되기 때문이다. 한글을 포함한 문자열의 길이를 구할 수 있을까? 해결책: 검색해보니 한글 포함 문자열의 길이를 구하는 로직에 대해 정리해둔 블로그가 있다. 텍스트 내 캐릭터를 ..
발생일: 2009.05.15 문제: prototypejs를 사용해 IE 에서 document.viewport.getDimensions 를 호출했을 때, 정상적으로 값이 표시되지 않고 0 으로 나온다. prototypejs의 버전은 1.6.0.2 이다. 해결책: prototypejs 1.6.0.2 버전의 버그이다. (rubyonrails의 버그에 대한 리포트를 참고하자) 이 경우, IE에서는 document.viewport.getDimensions() 대신 document.body.clientWidth 와 document.body.clientHeight 을 쓸 것을 권장한다.
발생일: 2009.04.23 문제: prototypejs 에서 radio value 를 아주 그냥 깔꼼하게 얻어오는 방법은 없을까? 해결책: 1라인으로 해결한 방법이 있다. (여기서 얻어옴) var typeValue = Form.getInputs('myform','radio','type').find(function(radio) { return radio.checked; }).value; prototypejs 의 Form.getInputs API 를 참고하면 이해가 된다.