발생일: 2011.06.14 문제: 얼마 전 수정 작업 이후, 스크립트에서 구현한 모듈의 네임스페이스를 찾지 못하는 오류가 발생했다. IE7 이하에서 아래와 같은 오류가 발생했다. 식별자나 문자열 또는 숫자가 필요합니다. 'abc.namespace'은(는) null 이거나 개체가 아닙니다. 코드가 압축되어 있는 데다 IE 하위 버전에서만 발생하다보니 디버깅이 녹녹치 않더라. 알고 보니, JSON 리터럴에서 마지막 컴마를 삭제하지 않은 것이 문제였다. 아아... 원인에 대해서는 이미 알고 있었지만, 이렇게 나타나니 좀 당황스러웠다. 해결책: 최근 브라우저에서는 JSON 형태의 객체 리터럴에서 마지막 컴마를 올바르게 종료하지 않아도 오류 없이 정상적으로 표시된다. 하지만 IE7 이하에서는 아래와 같은 오류를..
발생일: 2011.06.02 문제: 얼마 전 캐릭터셋이 다른 서비스로 폼 서브밋을 보낼 때 한글이 깨지는 문제가 발생한 적이 있었다. 현재 서비스의 캐릭터셋은 utf-8 이었고, 서브밋을 보낼 대상 서비스의 캐릭터셋은 euc-kr 이었다. 서브밋을 보내기 전에 문서의 캐릭터셋을 바꿔주는 방식으로 해결했었는데, 몇 가지 주의할 점이 있어 메모해둔다. 해결책: 결론 먼저: 1. 폼 엘리먼트에 accept-charset 속성을 추가하고 대상 서비스의 캐릭터셋 값을 준다. 예) accept-charset="euc-kr" 2. 스크립트에서 폼 서브밋을 보내기 전, document.charset = "euc-kr"; 구문을 추가한다. 3. 폼 서브밋 후에 document.charset의 값을 원래 값으로 되돌린다...
발생일: 2011.05.17 문제: 현재 진행하고 있는 프로젝트에서 자바스크립트 작업 시 객체를 나누는 기준은 작은 UI 기능 단위이다. UI 기능 단위로 구분되어 있어 객체의 역할을 쉽게 파악할 수 있고, 기능 단위로 쪼개져 코드가 간결하고 쉽게 이해할 수 있는 장점이 있다. 하지만 로직과 UI와 관련된 코드가 함께 있어 테스트하기 번거로울 수 있으며, 기능 단위가 많아질 경우 모듈 간의 관계를 설정해주는 작업이 복잡해지는 등의 단점도 있다. 여튼, 프로젝트 기간 동안 기능 단위로 객체를 나누어 구현해보면서 기본적으로 객체 생성 시 고려해야 할 사항이 있어 메모해둔다. 해결책: UI 객체의 상황에 따라 적절하게 아래 체크리스트를 확인해보면 도움이 될 수 있다. 1. 초기화 1.1. 초기화 시 관련 DO..
발생일: 2011.05.13 문제: 1) 팝업에서 오프너(opener)의 객체로 배열 데이터를 전달해주고, 2) 팝업을 닫은 후에 3) 오프너에서 전달된 배열 데이터에 접근했을 때 IE에서 아래와 같은 오류가 발생한다. 호출자(서버 응용 프로그램이 아닌 서버)가 사용될 수 없어서 사라졌습니다. 모든 연결이 올바르지 않습니다. 호출이 실행되지 않았습니다. 아무래도 팝업이 닫기면서 참조를 잃은 것 같다. 정확한 원인이 뭘까? 해결책: IE의 경우 오프너와 팝업 간 데이터을 전달할 때, 원시 타입을 제외하고는 '참조'로 전달한다. (다른 브라우저의 경우 '값'으로 전달한다.) 따라서 팝업이 닫길 경우, 참조 데이터는 사라지게 된다. 이를 우회하기 위해 데이터를 원시 타입으로 변경해 전달하면 된다. * 같은 내..
발생일: 2011.04.22 문제: 잘 작동하던 스크립트가 작은 수정 이후에 제대로 작동을 안한다. IE에서만, '알 수 없는 오류'란다. 템플릿으로 태그를 만들어 P 엘리먼트에 innerHTML로 설정하는 부분이었는데, 확인해보니 innerHTML로 추가하려는 태그 문자열 부분에 태그가 포함되어 있던 게 원인이었다. pElement.innerHTML = "insert paragraph tag"; 유독 IE에서만 태그에 innerHTML로 태그를 넣으면 IE에서 '알 수 없는 오류'가 발생한다. 왜 그런걸까? 해결책: W3C 스펙에 의하면 패러그래프(P) 엘리먼트에는 Block Element를 추가할 수 없다. http://www.w3.org/TR/html401/struct/text.html#h-9.3...
발생일: 2011.04.25 문제: 얼마 전에 친구가 운영하는 쇼핑몰에 작은 돋보기 모듈을 만들어줬다. 구글 애드센스나 페이스북의 '좋아요' 버튼 같이 스크립트로 엘리먼트를 만들고 작동시키는 방식이었는데, 작업해주고 난 후 몇 가지 배운 점이 있어 메모해둔다. 해결책: 1. 배포되는 사이트마다 인코딩이 다를 수 있기 때문에 문자열은 유니코드로 작성한다. 스크립트 내에 한글 메세지를 출력하는 부분이 있었는데 쇼핑몰에서 돌려보니 제대로 출력되지 않았다. 작업 환경의 캐릭터셋은 utf-8 이었지만, 친구네 쇼핑몰은 euc-kr 이었기 때문. 태그의 charset 을 utf-8 로 설정해주는 방법도 있었지만, 여기서는 문자열을 유니코드로 작성하는 방법을 택했다. (친구가 붙여넣기 더 간단했기 때문이다.) 2. ..
발생일: 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 =..
URL과 연관된 속성 가져오기
발생일: 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"라고 되어..