꿀벌개발일지

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

발생일: 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 ..

발생일: 2014.12.31 키워드: chrome.storage, chrome extension, 크롬 익스텐션, 크롬 확장 문제: 크롬 익스텐션에서 로컬 스토리지를 활용하려고 한다. 크롬에 로그인 한 경우, 스토리지를 동기화해서 사용할 수 있다고 알고 있다. 이 참에 스토리지 API도 한 번 정리해두려고 한다. 해결책: 크롬의 스토리지는 localStorage API와 동일하지만, 다음과 같은 특징이 있다. - `storage.sync`를 사용하면, 자동으로 크롬 간 동기화할 수 있다. - 컨텐트 스크립트에서 바로 접근해서 사용할 수 있다. - 시크릿 모드(incognito)에서도 사용자 데이터를 동일하게 사용할 수 있다. - 읽기/쓰기는 비동기로 동작한다. (동기로 동작해서 다른 스크립트의 실행을 블..

발생일: 2014.12.31 키워드: Selection, Range, 레인지, 셀렉션, window.getSelection() 문제: 요새 우리 서비스는 글쓰기 에디터에 몇 가지 골치 아픈 버그가 있어 어려움을 겪고 있다. 이 작업은 주로 뒷자리 A가 하고 있는데, 도움을 주고 싶어도 에디터 쪽은 기반 지식이 좀 있어야 해서 어렵더라. 에디터에서는 셀렉션과 레인지에 대한 이해가 꼭 필요하다고 한다. 몇 달 전에 summernote 에디터를 작성한 에디터 전문가 H에게 일장 강의를 들은 적도 있는데... 다 까먹었다… -_-;; 함수의 동작보다는, 앵커니 포커스니 하는 개념을 잘 몰라 이해하기 어렵더라. 이 참에 MDN 페이지를 보고 정리해두려고 한다. 해결책: Selection Selection 은 wi..

발생일: 2014.12.30 키워드: chrome extension, 크롬 익스텐션, 크롬 확장, popup size, setPopup, 팝업 사이즈, 팝업 크기 문제: 크롬 익스텐션의 팝업 사이즈를 동적으로 조절하려고 한다. 팝업을 설정하는 `setPopup()` 메서드가 있긴 한데, 이 API에 높이를 조절하는 것에 대한 건 없다. 어떻게 하면 될까? 해결책: 팝업에 들어가는 페이지의 ``엘리먼트의 `height` 속성을 변경하면 된다. jquery를 사용하고 있다면, 아래처럼 처리하면 되겠다. $(document.documentElement).css(‘height’, ‘400px’); 참고: http://stackoverflow.com/questions/7128607/chrome-extension-..

발생일: 2014.12.20 키워드: angular, AngularJS, ng-if, ng-show, ng-hide, ngIf, ngShow, ngHide 문제: 앵귤러에서 `ng-if` 와 `ng-show` 의 동작 방식의 차이점이 뭘까? 해결책: 렌더링을 할 건지, `display`만 변경할 건지의 차이다. ng-if : 렌더링을 하지 않는다. ng-show / ng-hide: display 를 변경한다. 참고: http://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide

발생일: 2014.12.15 키워드: jQuery, getScript 문제: 코드 리뷰 중에 외부 라이브러리의 코드를 `$.getScript()`로 불러오는 코드를 보고, 캐시가 어떻게 동작하는지 궁금해 API를 확인해봤다. `$.getScript()`는 jQuery 의 기본 ajax 속성을 받고 있어서, 요청 값을 캐시하지 않는다. 즉, 캐시되지 않게 매번 새로운 요청을 보낸다. 지금의 경우엔 해당 리소스가 캐시되는 게 더 효율적일 것 같은데, 어떻게 하면 `$.getScript()`의 캐시를 설정할 수 있을까? 해결책: $.getScript() 캐시 설정 캐시를 설정할 순 있는데, 아래처럼 글로벌로만 설정해야 한다. 썩 좋지 않다. $.ajaxSetup({ cache: true }); 대신, 캐시가 ..

발생일: 2014.12.12 키워드: XSS, XSRF, CSRF 문제:JSON WebToken 에 관련된 아티클을 읽다가 토큰이 쿠키보다 나은 이유에 다음과 같은 항목이 있었다. "It's easier to deal with XSS than XSRF" 가만...XSS는 크로스 사이트 스크립팅인데, XSRF는 뭐였더라.크로스 사이트 리… 포… 뭐였는데... 이 두 개는 봐도봐도 헷갈린다.이 참에 까먹지 않게 잘 정리해두자. 해결책: XSRF: Cross-Site Request Forgery XSRF 라고도 하고, CSRF 라고도 한다. 쿠키만으로 인증하는 서비스의 취약점을 이용해, 사용자가 모르게 해당 서비스에 특정 명령을 요청하는 공격 예:- 사용자가 쿠키만으로 인증하고 있는 A 사이트에 로그인한다.-..