발생일: 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.20 키워드: git, rebase 문제: 작업하던 내용을 작은 단위로 쪼개 커밋했다가, 의미있는 단위로 모아서 서버에 푸시하려고 한다. git rebase 로 커밋을 정리할 수 있는 걸로 알고 있고, 여러 번 해보긴 했는데 이건 늘 할 때마다 헷갈린다. 해결책: `git rebase`에 대한 자세한 설명은 아래 참고 문서에서 확인할 수 있다. 여기선 'rebase 인터랙션 도구로 여러 커밋을 한 개의 커밋으로 정리’하는 과정을 기술하는 것으로 설명하려 한다. 1. 먼저, 지금까지의 커밋 로그를 확인한다. $ git log 8fde911 - Sixth commit 9f3e2b8 - Fifth commit 1d02857 - Fourth commit 7ee8f67 - Third com..
발생일: 2014.11.21 키워드: IE, explorer, css, limit, 문제: 이번 스프린트의 언제부턴가 IE8에서 렌더링이 깨져보였다. 스크립트 오류도 없고 동작도 잘 된다. 다른 작업도 있고 이 테스트 장비에서만 그런가… 싶어서 미뤄두고 있었는데, J가 원인을 찾아냈다! 해결책: 이번 스프린트에 새 작업이 추가되면서 CSS 파일의 사이즈가 커졌는데, IE8에서는 CSS 파일 하나 당 룰 수가 제한되어 있어서 발생한 거였다. IE9 이하에서는 CSS 파일 하나 당: - 룰은 4095개까지만 적용된다. (이후의 룰은 무시한다) - @import 구문은 31개까지만 적용된다. - @import 구문은 4단계까지만 중첩된다. 다행히 룰이 적용되지 않은 부분이 눈에 띄는 메뉴라 잘 찾을 수 있었는..
발생일: 2014.11.20 키워드: bat, 윈도우 배치 파일, wget, curl, windows, host, 호스트 문제: 우리 팀은 윈도우 OS에 대한 브라우저 테스트를 할 때 VDI를 사용한다. 여러 가지 이유로, VDI는 개발자가 인스턴스를 생성할 때마다 초기화되는데, 늘 아래 작업을 반복한다. 1. 내 개발 PC의 IP를 찾는다. 2. VDI에서 hosts 파일을 찾아 연다. 3. 개발 대상 서비스 주소와 IP를 호스트 파일에 추가한다. (예: my-service.com 192.168.123.123) 4. IE를 열어서 my-service.com 을 입력한다. 아… 귀찮다… 자동화할 수 있는 방법이 있을까? 해결책: 리눅스였으면, 어딘가 쉘 파일을 올려두고 wget 이나 curl로 다운로드 ..
발생일: 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.10.07 키워드: shell, bash, 쉘 문제: 서버 셋팅 스크립트를 작성하고 있는데, `imagemagick`이 인스톨되어 있지 않는 경우에만 인스톨하도록 하려고 한다. 특정 커맨드가 실행 가능한지 확인하는 방법으로 체크하려고 하는데, 쉘에서 프로그램이 존재하는지를 어떻게 확인하면 될까? 해결책: which, command, type, hash 등 여러 방법으로 확인할 수 있는데, OS나 쉘 종류에 따라 그 결과가 다른 모양이다. 그나마 가장 적합해보이는 건, `command` 명령어를 사용하는 것이다. $ command -v [command] 2>/dev/null 유효한 명령일 경우, 해당 커맨드의 절대 경로가 출력된다. 나는 `imagemagick`에서 사용하는 `conver..