발생일: 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 사이트에 로그인한다.-..
발생일: 2014.12.28 키워드: Content Security Policy, CSP, Chrome Extension, 크롬 확장, 크롬 익스텐션, angular, google analytics, 구글 애널리틱스 문제: 크롬 익스텐션에서 앵귤러를 사용하려고 추가했는데, 아래와 같은 오류가 나면서 실행되지 않는다. Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https://ssl.google-analytics.com". 오류 구문을 보니 앵귤러의..
발생일: 2014.12.17 키워드: nginx rewrite flags, last, break 문제: nginx 의 rewrite 디렉티브에는 4가지 플래그(last, break, redirect, permanent)가 있는데, 그 중 last 와 break 는 자꾸 봐도 헷갈린다. 나중에 봐도 헷갈리지 않게 자세히 정리했다. 해결책: API 문서에 있는 정의는 다음과 같다. (http://wiki.nginx.org/HttpRewriteModule) Flags can be any of the following: last - completes processing of current rewrite directives and restarts the process (including rewriting) wit..
발생일: 2014.12.09 키워드: Date.parse(), new Date(), Date, ISO-8601, RFC2822, ISO8601, 날짜, IE9 문제: 얼마 전에 서버 시간과 클라이언트 시간의 오차를 줄이려고, 서버 응답의 헤더를 가져와서 타임스탬프로 변경해 비교하는 코드를 작성했었다. 서버의 Date 문자열을 바로 타임스탬프로 변환하기 위해서 아래처럼 `Date.parse()`를 사용했다. var dateResponseHeader = 'Thu, 11 Dec 2014 13:08:28 GMT’; var serverTime = Date.parse(dateResponseHeader); 위 코드는 잘 동작했다. 그리고 며칠이 지난 후에, 옆 자리 D와 서버 응답에 포함된 시간 데이터를 가공하는 것..
발생일: 2014.12.05 키워드: jQuery, form, $(‘form’), IE8 문제: 버튼을 클릭하면 엘리먼트를 생성해 특정 주소로 서브밋하는 코드를 아래처럼 만들었다. 태그는 숨겨둔 채 전송하려고 `style` 속성도 정의했다. function onClickButton() { $(‘’).attr({ target: ’targetFrame’, method: ‘POST’, action: ‘/some/path' }).submit(); } 문제 없이 잘 동작한다. 어랏. IE8에서는 폼이 전송되지 않는다… 왜일까? 해결책: `jQuery()` API 문서에 의하면, `jQuery()`의 파라미터로 문자열이 들어왔을 경우에 아래와 같이 동작한다. - 문자열이 싱글 태그인 경우, `document.cre..