발생일: 2014.12.11 키워드: HTML5DevConf 문제: 지난 10월에 HTML5DevConf(http://html5devconf.com/) 에 다녀왔는데, 오늘 컨퍼런스 동영상이 업데이트 되었다고 메일이 왔다~ 설명과 링크를 정리해서 옮겨둔다. 해결책: A wonderful talk from Jafar Husain, member of the TC39 Standards Committee on what's coming next for JavaScript, including a bonus alternater version (thanks Jafar!): - Jafar Husain of Netflix "The Evolution of JavaScript - https://www.youtube.com/w..
발생일: 2014.12.09 키워드: nginx, proxy_set_header, proxy_pass, remote_addr, Remote IP, 프록시 문제: 아래와 같은 nginx 리버스 프록시 설정이 있었다. location /some/path { proxy_pass http://localhost:8000; } 프록시 서버에 특정 헤더를 전달하기 위해서 아래와 같이 `proxy_set_header` 디렉티브로 설정을 추가했다. location /some/path { proxy_set_header foo foo; proxy_pass http://localhost:8000; } 그런데, 서버 로그를 확인해보니 잘 넘어오던 Remote IP가 127.0.0.1로 설정되어 나온다.. 왜 그런 걸까…? 해결..
발생일: 2014.12.05 키워드: nginx, host, 호스트, server_names_hash_bucket_size 문제: nginx 로 여러 호스트를 처리하고 있는 서버를 한 대 운영하고 있다. 오늘은 호스트를 하나 더 추가했는데, 아래와 같은 오류가 나면서 리스타트가 되지 않는다. could not build the server_names_hash, you should increase server_names_hash_bucket_size: 32 뭐가 문제일까? 해결책: nginx 에서 처리할 수 있는 호스트의 최대 개수를 설정하는 옵션이 있었다. `server_names_hash_bucket_size` 속성인데, 필요한 만큼 이 속성의 값을 설정하면 된다. `http` 블럭 안에 아래와 같이 ..
발생일: 2014.12.01 키워드: chrome extension, 크롬 익스텐션, 크롬 확장, background pages, event pages, 백그라운드 페이지, 이벤트 페이지 문제: 사전 익스텐션을 대폭 개편하려고 `manifest.json` 포맷을 다시 살펴보다 보니, 백그라운드 페이지가 deprecated 되고 이벤트 페이지라는 것이 생겼더라. 이벤트 페이지는 뭐가 다른 거지? 해결책: 백그라운드 페이지와 이벤트 페이지 크롬 익스텐션에서 브라우저가 열려있는 동안 계속 떠있어야 할 페이지나 스크립트가 있다면, 백그라운드 페이지나 스크립트로 등록해두고 사용하면 됐었다. { "name": "My extension”, ... "background": { "scripts": ["background..
발생일: 2014.12.01 키워드: coffeescript, 커피스크립트, 네임스페이스, namespace, 전역 변수 문제: 커피스크립트는 컴파일 하면 각 파일이 즉시 실행 함수로 감싸져 있기 때문에, 다른 파일에서 이전 파일의 변수에 접근할 수 없다. 예를 들면, 아래와 같이 두 개의 파일이 있고, 각 파일은 아래와 같이 되어 있다고 가정해보자. [Animal.coffee] class Animal # … [main.coffee] new Animal # 접근할 수 없다. `Animal.coffee`는 아래와 같이 컴파일 되기 때문에, `main.js`에서는 이 파일의 변수에 접근할 수 없다. [Animal.js] (function () { var Animal = ... }()); 앱의 네임스페이스를 ..
발생일: 2014.11.30 키워드: 크롬 익스텐션, chrome extension, 크롬 확장, 메시지, message, onMessage, chrome.runtime, chrome.tabs 문제: 크롬 익스텐션과 컨텐트 스크립트 간 1회성으로 메시지를 주고 받는 법에 대한 메모이다. 해결책: https://developer.chrome.com/extensions/messaging#simple 컨텐트 스크립트에서 익스텐션으로 보내기 chrome.runtime.sendMessage({greeting: "hello"}, function(response) { console.log(response.farewell); }); `chrome.runtime.sendMessage()`로 전달한다. 익스텐션의 메시지 ..
발생일: 2014.11.30 키워드: postMessage, message 문제: window.postMessage()에 대한 메모이다. 해결책: 일반적으로 스크립트는 동일 근원 정책에 의해, 프로토콜, 도메인, 포트 중 어느 하나라도 다른 경우엔 다른 윈도우와 통신할 수 없다. 하지만, `window.postMessage()`를 사용하면 안전하게 오리진이 다른 윈도우와 통신할 수 있다. 아래 코드와 같이 다른 윈도우로 메시지를 보낼 수 있다. otherWindow.postMessage(message, targetOrigin); - otherWindow: - `window.open()` 의 응답으로 얻은 윈도우 객체 - `iframe`의 `contentWindow` 프로퍼티로 가져온 윈도우 객체 - `w..
window, document, frame, iframe 이해하기
발생일: 2014.11.30 키워드: window, document, frames, iframe, 윈도우, 도큐먼트, 프레임, 아이프레임 문제: 자바스크립트를 처음 접하는 사람들은 대부분 window 와 document 에 대한 개념을 헷갈려한다. 더불어, 윈도우와 프레임의 관계, frame 과 iframe, iframe 과 window 등등… 웹서핑을 하다가 이 개념들을 잘 설명하고 있는 포스트를 하나 발견해서, 이참에 나도 초보자를 대상으로 이해하기 쉽게 설명해두려고 한다. 해결책: window `window`는 브라우저를 시작할 때 가장 처음 생성되는 객체이다. 이 ‘창’을 생성하고 난 후에, 이 안에 다른 ‘창’(window)나 ‘문서’(document)를 추가할 수 있다. `window` 객체는..
에버노트 웹 클리퍼 익스텐션의 동작 방식 분석
발생일: 2014.11.30 키워드: Evernote Web Clipper, 에버노트 웹 클리퍼, 크롬 익스텐션, 크롬 확장 문제: 어느덧 네이버 영어사전 크롬 익스텐션 사용자가 45,000명이 되었다. 사용자가 많아진 만큼 개선 요청이나 문의가 많이 들어오는데, 몇몇 분들이 특정 사이트에서 사전이 보이지 않는다고 문의를 하셨다. 문제가 발생하는 페이지들은 frameset 으로 구성되어있는 경우였다. 사전은 페이지에 엘리먼트를 직접 삽입하는 방법으로 구현했는데, 이 페이지엔 엘리먼트를 삽입할 수 없기 때문이다. 근데, 에버노트 웹 클리퍼 익스텐션은 요 문제를 해결하고 있더라. (난 이 익스텐션이 너무너무 좋다 +_+b) 노드 바로 아래로 을 삽입하는 방법인데, 이렇게 하면 스타일이 중복되는 것도 막을 수..
발생일: 2014.11.28 키워드: chrome, 크롬, 탭 비활성화, outerWidth, outerHeight 문제: 간헐적으로 페이지가 로드됐을 때, window 의 outerWidth 와 outerHeight 속성이 0으로 나오는 경우가 있다. 왜일까? 해결책: 크롬은 탭이 비활성화되어 있을 때, window.outerWidth 와 window.outerHeight 의 값이 0으로 나온다. 아래 링크로 테스트해볼 수 있다. http://jsbin.com/hutoya 1. 링크를 클릭해서 바로 여는 경우, outerWidth 는 정상적으로 출력된다. 2. 오른쪽 버튼 > 새 탭으로 열기를 하거나, Ctrl 또는 Cmd 를 클릭한 채 열면 탭이 포커스되지 않은 채로 열린다. 탭을 열어보면 outer..