꿀벌개발일지

발생일: 2011.04.23 문제: 얼마 전 QA에서 아래와 같은 버그를 등록했다. 특정 버튼에서 오른쪽 마우스 버튼을 눌러 새탭으로 열었을 때, 기대하는 페이지가 아닌 동일한 페이지가 열린다는 것이다. 해당 버튼은 click 이벤트에 의해 스크립트로만 동작하는 것이었으며, 대충 아래와 같은 형태이다. (실제로 이벤트는 스크립트에서 바인딩한다.) This is button. 스크립트로만 동작하고 기본 동작을 막아뒀기 때문에 클릭했을 때에는 아무런 문제가 없다. 하지만 앵커 태그이기 때문에 새탭으로 열었을 경우엔, 현재 페이지에 #이 덧붙여져 열리게 되는 것이다. 이건 버그라고 할 수 있을까? 해결책: 실제로 여러 포털에 이런 문제가 있는 버튼들이 굉장히 많다. 앵커 태그로 버튼을 구현해 스크립트로 추가 ..

발생일: 2011.03.24 문제: 작성한 코드를 JSLint 에서 돌렸더니, 아래와 같은 워닝 문구가 발생했다. Do not use Number as a constructor. 대상이 된 코드는 아래와 같은 함수이다. 전달된 문자를 숫자로 변환하고, NaN이거나 0일 경우 기본값을 1로 설정하는 구문이다. var n = new Number(s).valueOf() || 1; 문제가 될 것 같지 않은데... 왜 그런 걸까. 해결책: 위에서 작성한 구문에서는 문제될 것이 없지만, Number를 원시 타입이 아닌 객체로 생성하고 비교할 경우 값이 아닌 참조에 대한 비교가 되어 원하는 결과를 얻지 못할 수 있기 때문에 JSLint에서 잡아주는 것 같다. var n1 = new Number(1); var n2 =..

발생일: 2011.02.10 문제: 과 같은 태그에서 abc 값을 가져오기 위해, el.attr("href").substring(1) 과 같은 코드를 사용했다. (attr은 현재 사용하고 있는 라이브러리의 속성을 가져오는 메서드) 헌데, IE7 이하에서는 el.attr("href") 값으로 #abc가 아닌 전체 경로가 리턴된다. 어떤 때는 전체 경로가 리턴되고 어떤 때는 직접 기술한 값이 리턴되는데, 정확한 이유는 뭘까? 해결책: URL을 표현하는 속성을 가져올 때에는 몇 가지 주의할 점이 있다. - URL을 표현하는 속성(href, src, action 등)을 DOM Attribute에서 직접 가져오면 속성 값이 전체 경로에 더해져 리턴된다. - DOM Level1의 getAttribute() 메서드를..

발생일: 2011.02.09 문제: IE6 에서 백그라운드 변경 방식으로 처리된 엘리먼트에 마우스 오버 효과를 줄 때 이미지 깜빡임이 발생한다. 이 버그, 얘기는 많이 들었는데 가장 간단한 해결 방법이 뭘까? 해결책: 이는 IE6 버그로 백그라운드 이미지 상태가 변할 때마다 이미지를 새로 읽어오기 때문. 가장 간단한 해결 방법으로, 아래와 같은 스크립트를 추가하면 된다. try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} 자세한 내용은 아래 포스트를 참고하자. 배경 이미지 깜박거림(Background Image Flicker) 및 배경이미지의 반복적인 다운로드 문제에 대하여 : IE6 전반적인 사항에 대한 분석과 설..

발생일: 2011.01.31 문제: 크로스 브라우저 처리를 위해 navigator.userAgent 프로퍼티를 보고 있다. 아래 문자열은 지금 사용하고 있는 Firefox의 userAgent 값이다. "Mozilla/5.0 (Windows; U; Windows NT 6.1; ko; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 IPMS/A640400A-14D460801A1-000000426571" 참고 삼아 다른 사이트와 라이브러리 소스를 보다 보니, 어떤 사이트에서는 "Gecko" 문자열을 찾아 브라우저별 구현을 나눴고, 다른 라이브러리에서는 "Firefox" 문자열을 찾아 구현해놨다. 음... 크롬이나 사파리에서 userAgent를 찍어보면, "like Gecko"라고 되어..

발생일: 2011.1.13 문제: 언제였더라? 프렌드 홍이 얘기해줬던가? 어떤 면접에서 면접관이 JVM 을 죽이는 한 줄짜리 코드를 작성해보라고 했다는 이야기가 생각났다. 그럼 브라우저를 죽이는 한 줄짜리 자바스크립트 코드는 어떤 게 있을까? 해결책: 며칠 전 정규식의 중첩 수량자(nested quantifier)와 역추적 폭주(runaway backtracking)에 관한 부분을 보고, 위에서 얘기했던 한 줄짜리 코드 이야기가 생각나서 재밌는 부제(?)를 달아봤다.^^; 아래 코드는 대상문자열인 "AAAAA..." 가 /(A+A+)+B/ 에 매치되는지 테스트하는 정규식 구문이다. /(A+A+)+B/.test("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"); 위 코드는 중첩 수량자에..

발생일: 2011.01.03 문제: 마크업의 클래스 값을 구분해 탭의 인덱스를 가져오는 스크립트를 작성했다. 탭의 클래스 이름은 각각 "tab", "tab2", "tab3" 와 같은 식으로 구성되어 있으며 아래와 같이 가져와서 사용했다. function getTabIndex(className) { var reg = /tab(\d)?/; var index = reg.exec(className)[1]; return index - 1 || 0; // 값이 없을 경우, index - 1 이 NaN 을 기대함. } 헌데, 클래스명이 "tab" 일 경우, FF 에서는 기대했던 대로 결과값이 0이 리턴되었지만, IE 에서는 -1 이 리턴된다. 해결책: 정규식에서 그룹에 대한 정규식 매칭 결과가 없을 때 브라우저 별 ..

얼마 전 구글 지도를 보다가 재밌는 버튼을 찾아냈습니다. 우측 하단의 지도 옵션 보기 버튼인데요~ 버튼을 누르면 아래와 같이 페이지를 말아올린 것 같은 모양으로 옵션이 노출됩니다. 이렇게 페이지를 말아올려 놓으니, 너무 허전해 보이지도, 좁아보이지도 않네요! 참 좋은 아이디어지요~? ^^ 반면, 아래와 같이 지도 영역을 차지하는 방식으로 옵션이 올라온다면 어땠을까요~? 좀 답답한 느낌이 들지 않나요~? 구글 지도의 옵션 표시 방식이 아주 맘에 드네요~

프레임워크도 제어의 역전 개념이 적용된 대표적인 기술이다. 프레임워크는 라이브러리의 다른 이름이 아니다. 프레임워크는 단지 미리 만들어 둔 반제품이나, 확장해서 사용할 수 있도록 준비된 추상 라이브러리의 집합이 아니다. 프레임워크가 어떤 것인지 이해하려면 라이브러리와 프레임워크가 어떻게 다른지 알아야 한다. 라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접 제어한다. 단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐이다. 반면에 프레임워크는 거꾸로 애플리케이션 코드가 프레임워크에 의해 사용된다. 보통 프레임워크 위에 개발한 클래스를 등록해두고, 프레임워크가 흐름을 주도하는 중에 개발자가 만든 애플리케이션 코드를 사용하도록 만드는 방식이다. 최근에는 툴킨, 엔진,..

발생일: 2010.12.03 문제: 외부 코드와 연동 작업을 하다가 아래와 같은 스크립트 오류가 발생했다. Permission denied Location.toString 오류가 발생하는 원인이 무엇이고, 해결할 수 있는 방법은 무엇일까? 해결책: Permission denied 나 Location.toString 문구가 포함된 오류는 1) 다른 도메인으로 Ajax 요청을 보내려고 시도하거나, 2) 도메인이 서로 다른 프레임에서 스크립트로 접근을 시도하는 경우 에 발생한다. 이는 브라우저의 동일 근원 정책(Same origin policy)를 위배했기 때문이다. 브라우저는 아래의 경우에만 접근을 허용한다. 1) 같은 프로토콜. 2) 같은 포트. 3) 같은 호스트(도메인 포함). 예를 들어, 아래의 경우는..