꿀벌개발일지

발생일: 2014.01.05 키워드: Google Analytics, Chrome extension, 크롬 확장 프로그램, 구글 애널리틱스 문제: 이번에 네이버 영어사전 크롬 확장 프로그램에 구글 애널리틱스를 추가하려고 한다. 일전에도 한 번 넣었다가 제대로 동작하지 않아서 그냥 넣어뒀던 코드가 있어서 꺼내봤는데, 역시나 여전히 동작하지 않는다. ㅎㅎ 게다가, 이전 코드는 `ga.js` 를 사용하는 것이었는데, 애널리틱스에서 로드하는 스크립트가 바뀌었더라. 문서를 보니 예전 방식인 `ga.js`를 사용하는 것은 ‘클래식 애널리틱스’ 이고, 새로 변경된 것은 ‘anaytics.js’를 사용하는 ‘유니버셜 애널리틱스’라고 한다. https://developers.google.com/analytics/devg..

발생일: 2015.01.03 키워드: window, exports, node 문제: 어떤 오픈소스 코드를 보다가, 브라우저 환경과 node 환경을 모두 커버할 수 있는 코드 패턴을 발견해서 메모해둔다. 해결책: (function (exports) { var module = … (모듈 정의); exports.module = module; }(typeof exports === ‘undefined’ ? window : exports));

발생일: 2015.01.02 키워드: nginx, root, alias 문제: `root` 디렉티브와 `alias` 디렉티브는 쓸 때마다 헷갈린다. 이참에 정리! 해결책: root: location 으로 넘어온 부분을 root로 설정한 경로에 추가한다. alias: location 에 매칭된 부분을 제거하고, alias 로 설정한 경로에서 찾는다. location /static/ { root /var/www/app/static; autoindex off; } /var/www/app/static/static 경로에서 찾는다. location /static/ { alias /var/www/app/static/; autoindex off; } /var/www/app/static/ 에서 찾는다. 논의: 위와 같..

발생일: 2015.01.02 키워드: hexdump 문제: 파일 내용을 바이트 단위로 보고 싶다. 해결책: 아래 링크를 보면 여러 가지 방법이 있긴 한데, http://unix.stackexchange.com/questions/10826/shell-how-to-read-the-bytes-of-a-binary-file-and-print-as-hexadecimal 요게 포맷팅해서 보기 가장 좋은 것 같다. $ hexdump -C filename

발생일: 2015.01.02 키워드: CR, LF, CRLF 문제: 줄바꿈 문자열에 대해선 대충 아래 정도만 알고 있었다. 윈도우는 캐리지리턴(CRLF, \r\n), 유닉스/리눅스에선 리턴(LF, \n). git 에서 어떤 라이브러리를 체크아웃 받았더니 자꾸 라인피드가 충돌난다는 워닝이 뜨더라. 이거 원인을 찾아보다가 우연히 줄바꿈 문자열에 대한 히스토리를 찾아보게 됐다. 해결책: CR = Carriage Return LF = Line Feed CR 과 LF 는 줄바꿈을 의미하는 컨트롤 캐릭터이고, 각각 0x0D (13 decimal), 0x0A (10 decimal)를 가리킨다. 윈도우는 CR LF 를, 유닉스는 LF를, 맥의 초기 버전(9 버전 이하)은 CR을 사용한다. 이 두 키는 오래 전 타자기 ..

발생일: 2014.12.28 키워드: 크롬 개발자 도구, Chorme Developer Tools, 클로져, 클로저, Free Variable, 자유 변수 문제: 옆자리 D가 개발자 도구로 디버깅할 때 클로저의 변수를 확인할 수 없다며 이상하다고 물어봤다. 대략 아래와 같은 코드였다. function doSomething(a) { var b = function () { debugger; // (A) return 'bar'; }; return a + b(); } doSomething('foo'); (A) 시점에 디버거를 걸어뒀을 때, `doSomething(a)`로 전달받은 매개변수 `a`의 값을 확인할 수 없다는 얘기였다. 실제로 돌려보면 아래와 같이 나온다. 해결책: 위 코드에서 `b` 함수는 클로저(..

발생일: 2014.12.29 키워드: iframe 문제: 이번에 네이버 영어사전 크롬 확장 프로그램의 사전 로드 방식을 개편하려고 한다. 주요 업데이트 내용 중에 하나는 사전 레이어를 ``에서 ``으로 변경하는 것이다. 예전에는 페이지 내에 `` 레이어를 추가하는 방식이었다. 빠르다는 장점이 있긴 한데, 페이지가 여러 프레임으로 나뉘어져 있는 경우에 간혹 제대로 동작하지 않는 경우가 있었다. 프레임 별로 컨트롤해야 해서 코드 복잡도도 더 높았다. 대신 이번 업데이트에서는 최상위 프레임에 ``을 넣는 식으로 변경하려고 한다. 속도 차이가 좀 있긴 하지만 그보다는 사전을 모든 케이스에 보여주는 게 더 중요하다고 생각했기 때문이다. 여튼, 그래서, 사전용 `` 엘리먼트를 생성해두고, 사전을 열고 닫을 때마다 ..

발생일: 2014.12.11 키워드: Travis CI, 깃헙, Git Hook, 깃훅, 깃헙 웹훅, Github Web Hook, Github Pull Request Builder, 젠킨스, Jenkins 문제: 회사에서는 깃헙 엔터프라이즈 버전을 쓰고 있고, (당연한 이야기지만) 우리 프로젝트에서는 작업한 코드가 반영되려면 모든 테스트를 통과해야 한다. 테스트는 주요 브랜치에 커밋이 발생할 때, (예: 피처 브랜치를 디벨롭이나 마스터에 머지하는 경우) 깃헙 웹훅을 받아 빌드 서버에서 수행하고 있다. 초반에는 담당자가 개발 완료 후에 테스트를 돌려보고 확인한 후에 푸시하는 방식이었는데, 종종 테스트를 확인하지 않는 경우가 있어서 주요 브랜치에 머지가 된 후에야 테스트가 깨진 것을 확인할 때가 있었다. ..

발생일: 2015.01.01 키워드: angular, AngularJS, 앵귤러, CSP, ng-csp, ngCSP, unsafe-eval 문제: 얼마 전에 익스텐션의 CSP 설정 때문에 아래 오류가 나면서 AngularJS 가 동작하지 않는 문제가 있었다. Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fa..

발생일: 2015.01.01 키워드: angular, AngularJS, ng-clock, ngClock, 템플릿 문제: 앵귤러로 앱을 만들었는데, 페이지에 들어가면 렌더링 되지 않은 템플릿 때문에 깜빡거린다. 뭔가 해결 방법이 있을 것 같은데... 해결책: 앱이 로드되기 전에 템플릿이 포함된 화면이 깜빡거리는 경우, `ng-cloak` 디렉티브를 사용하면 된다. ``나 `ng-app` 속성을 정의한 태그에 `ng-clock` 속성을 할당하는 방식으로 처리할 수 있다. `ng-clock`은 디렉티브가 정의된 엘리먼트를 `display:none` 시켰다가, 앱이 준비되면 보여주는 방식으로 처리하는데, 크롬 익스텐션처럼 CSP(Content Security Policy)가 적용되어 있는 경우엔 아래 CSS ..