발생일: 2014.11.27 키워드: IE8, window, property, 프로퍼티 문제: 아래처럼 window 객체에 직접 할당되어 있는 프로퍼티를 출력하려고 한다. for (var key in window) { console.log(key); } 예를 들어, 아래처럼 전역변수를 설정해뒀다면 위 결과에 포함되어 나올 것이다. var globalVar = ‘foo’; 헌데, IE8에서 window 속성을 나열해보면, 위 결과가 포함되어 있지 않다. 왜일까? 해결책: IE8에서는 window의 속성으로 직접 정의하지 않은 경우, 나열하는 결과에 포함되지 않는다. (아마도 enumarable이 false로 설정되는 모양이다) http://stackoverflow.com/questions/13566001/..
발생일: 2014.11.27 키워드: eval, indirect eval, IE8 문제: `eval`을 변수에 담아 간접 호출(indirect eval call)하는 경우엔, eval 안의 문자열이 전역 컨텍스트로 실행된다. 아래 코드를 보면 동작 방식을 이해할 수 있다. var foo = { bar: function () { var indirectEval = eval; console.log( eval(‘this’) ); //—> foo 객체 console.log( indirectEval(‘this’) ); //—> window } }; `eval()`의 동작 방식에 대해서는 예전에도 한 번 포스팅한 적이 있다. ('eval의 모든 것’) 헌데, IE8에서는 의도한 대로 동작하지 않는다. 어랏. 이상한데..
발생일: 2014.11.21 키워드: propertychange event, input event, IE8 문제: 얼마 전엔, 자동완성처럼 textarea 영역이 변경되는 걸 감지하고 있다가, 해당 영역의 스타일을 업데이트해주는 코드를 작성했었는데, 역시 IE 때문에 꽤 고생을 했다. 자동완성을 위해 input 이나 textarea 의 변경을 감지하는 것에는 여러 방식이 있다. 구현할 때 주로 문제가 되는 건, 한글을 입력 중이라 자소가 완성되지 않은 상태를 처리하는 것이다. 예를 들어, ‘아이폰’을 입력할 때, ‘아ㅇ’, ‘앙’, ‘아잎’, ‘아이ㅍ’처럼 자소를 입력 중인 상태에서도 결과가 올바르게 나오도록 해야한다. 최근 브라우저에서는 `input` 이벤트를 사용하면 거의 문제가 없다. $(’inpu..
발생일: 2014.11.21 키워드: IE8, IE9, IE10, input, 인풋, 엔터, enter 문제: IE10 이하에서 input 이벤트에 아무 이벤트를 달아두지 않았는데 엔터를 입력하면 뭔가가 실행된다. 기본적으로 input 이벤트에서 엔터를 입력했을 때의 기본 액션이 form submit 이란 걸 알고는 있었다. 예를 들어, 아래처럼 태그 안에 이 있을 경우, input 에서 엔터를 입력하면 상위 form의 서브밋이 수행된다. 근데, 이번 input 은 주변에 form 엘리먼트도 없다. 얼라… 왜일까…? 해결책: IE10 이하에서는 input 엘리먼트에 엔터가 입력되면 가장 가까운 버튼이나 앵커에 click 이벤트가 적용된다. 신기한 건, 버튼이 상위에 존재하는 게 아닌 경우에도 그렇다는 거..
발생일: 2014.11.21 키워드: IE, explorer, css, limit, 문제: 이번 스프린트의 언제부턴가 IE8에서 렌더링이 깨져보였다. 스크립트 오류도 없고 동작도 잘 된다. 다른 작업도 있고 이 테스트 장비에서만 그런가… 싶어서 미뤄두고 있었는데, J가 원인을 찾아냈다! 해결책: 이번 스프린트에 새 작업이 추가되면서 CSS 파일의 사이즈가 커졌는데, IE8에서는 CSS 파일 하나 당 룰 수가 제한되어 있어서 발생한 거였다. IE9 이하에서는 CSS 파일 하나 당: - 룰은 4095개까지만 적용된다. (이후의 룰은 무시한다) - @import 구문은 31개까지만 적용된다. - @import 구문은 4단계까지만 중첩된다. 다행히 룰이 적용되지 않은 부분이 눈에 띄는 메뉴라 잘 찾을 수 있었는..
발생일: 2014.11.20 키워드: node, express, ip 문제: node 로 작성한 http 서버에서 사용자의 IP를 가져오고 싶다. 어떻게 가져오면 될까~ 해결책: 요청이 프록시를 타고 오는 경우도 가정해, 아래 코드를 사용하면 된다~ var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress || req.socket.remoteAddress || req.connection.socket.remoteAddress; http://stackoverflow.com/questions/8107856/how-can-i-get-the-users-ip-address-using-node-js
발생일: 2014.10.21 키워드: let, var 문제: 얼마 전 HTML5DevConf 컨퍼런스를 다녀왔는데, 세션의 프리젠테이션 내용 중에 `let`키워드로 변수를 선언한 예제가 많더라. 해결책: 기본적으로 자바스크립트 변수는 함수 단위의 scope을 갖는다. 반면, let은 블럭 단위로 변수를 선언한다. 아래 코드를 보면 자세히 이해하기 쉽다. function () { for (var i = 0; i 10 } function () { var i; for (i = 0; i 10 } function () { for (let i = 0; i < 10; i++) { } c..
발생일: 2014.03.17 키워드: 포커스, focus, div 문제: 시각 장애인이 키보드로 레이어 팝업을 띄웠을 때, 리더 디바이스에서 레이어 본문의 내용을 바로 읽을 수 있도록 처리하려고 한다. 해당 레이어에 포커스를 주면 된다고 하는데, 그럼 자바스크립트로 div 엘리먼트에 어떻게 포커스를 줄 수 있을까? 해결책: http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex 포커스를 주고자 하는 엘리먼트에 tabindex=“1” 속성을 주고, el.focus()를 호출한다.
발생일: 2014.08.14 키워드: jquery, nodeName 문제: 코드 리뷰 중에 이벤트가 발생한 엘리먼트의 태그를 비교하는 구문에 대한 의견이 나왔다. el.nodeName === ‘DIV’ 과 같은 코드였는데, 브라우저에 따라 대소문자가 다른 경우가 있어 아래처럼 대소문자를 맞춰줘야 한다는 의견이었다. el.nodeName.toLowerCase() === ‘div’ 이 코드는 불필요하게 장황한데다 더 간단한 방법이 있어 메모해둔다. 해결책: 간단하게 jquery의 `$.nodeName()`을 사용할 수 있다. $.nodeName(el, name) 꼭 성능이 중요한 부분이 아니라면, $(el).is(‘name’) 과 같이 셀렉터로 비교하면 더 읽기 편한다. http://jsperf.com/jq..
발생일: 2014.08.12 키워드: iOS, webkit, safari, touch highlight, 터치 하이라이트, 웹킷, 아이폰, hover 문제: 전체 화면을 터치했을 때 특정 액션이 일어나도 처리하려고 한다. 헌데, iOS 웹킷에서는 터치할 때마다 hover 효과처럼 터치 하이라이트가 보인다. 그냥 하이라이트 없이 이벤트만 할당하고 싶은데, 어떻게 하면 될까? 해결책: 웹킷에는 탭 하이라이트 컬러를 설정할 수 있는 `-webkit-tap-highlight-color`라는 CSS 속성이 있다. 이 속성의 opacity를 100%로 설정하면, 터치 하이라이트를 제거할 수 있다. -webkit-tap-highlight-color: rgba(0, 0, 0, 0); http://davidwalsh.n..