이 세상에 하나는 남기고 가자

ES6(ECMAScript 표준의 6번째 에디션, ECMAScript2015)에 대한 이야기를 하기 전에 자바스크립트와 ECMAScript에 대한 것부터 간략히 소개한다. 넷스케이프(Netscape)에서 1995년 개발한 자바스크립트(javascript)는 웹 브라우저에서 동적인 기능을 제공하기 위한 언어다. 현재는 대부분의 브라우저에서 이 언어를 제공하고 있다. 그런데 표준 규격없이 여러 브라우저에서 독자적인 특성이 추가되면서 호환성 문제가 발생하기 시작했다. 이에 ECMA 국제 기구에서 “ECMAScript Standard”라는

웹 브라우저는 html을 랜더링하는 과정에서 css(<link type='text/css'>) 또는 js(<script>) 를 만나면 동기적으로 처리한다. 다시 말해 해당 내용이 해석되고 실행되기 전에는 뒤에 나오는 내용을 처리하지 않는다는 것이다. 이 부분은 화면의 랜더링 속도에 큰 영향을 줄 수 있다(사용자 경험 측면에서 큰 영향을 주며 SEO와도 관련된다). 이와 관련된 자세한 내용은 HTML Critical rendering path의 이해라는 글에 있으니 필요하면 참고 바란다. css의 경우는 화면을 랜더링하는데 필요한 정

아래의 글은 "Understanding the Critical Rendering Path"의 내용을 번역한 글이다. 브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 한다. 브라우저가 페이지의 초기 출력을 위해 실행해야하는 이 순서를 "Critical Rendering Path"(이하 CRP)라고 한다. 사이트의 성능을 향상시키는 방법을 이해하는데 CRP에 대한 지식은 매우 유용하다. CRP는 아래와 같이 6단계로 구성된다. DOM 트리 구축(Constructing the DOM Tr

웹사이트를 서핑하다가 필요한 내용이 있어 복사하려고 하면 우클릭이나 드래그를 막아놔서 복사를 할 수 없도록 하는 사이트들이 있다. 이런 경우라면 javascript를 끄고 해당 사이트를 방문하면 대부분 복사가 가능하다. 하지만 매번 이렇게 하기에는 귀찮다. 그래서 찾아보니 기존에 돌아다니는 우클릭 해제에 관련된 스크립트들은 대부분이 지금은 동작하지 않았다. 그래서 그런대로 잘 동작하는 스크립트를 가져다가 조금 개선해서 gist에 올려 놨다. 코드를 소개하기에 앞서 무단 복제는 지양하기를 바란다. 나도 나름의 콘텐츠를 생산하는 입장에

javascript는 insertBefore()만 제공하고 insertAfter() 함수는 제공하지 않는다. 웹 UI 개발시 대부분 jQuery 같은 라이브러리를 사용하니 insertAfter() 함수를 쉽게 사용할 수 있다. 그런데 추가 라이브러리를 사용할 수 없거나 간단히 이 기능만 필요한 경우가 있다. 아래는 구글 등에서 검색시 주로 발견되는 예시 소스다. Object.prototype.insertAfter = function (newNode) { this.parentNode.insertBefore(newNode, this.n

이번에 MediumEditor를 사용하면서 추가 기능을 개발하던 중 편집 개체에 내용을 추가하는 처리가 필요했다. 커서가 편집 개체 내부에 있다면 pasteHTML() 함수를 간단하게 처리가 된다. 그런데 커서가 편집 개체 밖에 있을 경우엔 넣을 수 없다. 그래서 프로그램에서 커서를 넣어줘야 하는데 fucus를 이용하면 맨 앞으로 들어가서 원하는 결과를 얻을 수 없었다. 그레서 방법을 찾던 중 contenteditable, set caret at the end of the text (cross-browser)라는 글에서 방법을 찾았

브라우저에서 http 요청을 하는 경우 대부분 referrer 정보가 넘어간다.(HTTP 리퍼러를 정의한 RFC에서 'referrer'를 'referer'라고 잘못 친 것에서 기인하여 HTTP 리퍼러는 'HTTP referer'라고 불린다 : 위키백과) 그런데 간혹 이 referrer를 숨기고 싶을 때가 있다. 현 페이지에서 resouces(js, css, image, ajax 등)를 요청할 때나 페이지를 이동할 때 referrer가 전송되는데 여기서는 resouces를 호출할 때 referrer를 숨기는 방법에 대해 설명하려고 한

얼마 전부터 프로젝트에서 Lumen을 사용하고 있다. Laravel을 사용하려고 하다가 경량 프레임워크에 더 끌려서 Lumen을 사용중이다. 사실 이 부분에 관련해서 약간의 후회(고민)를 하고 있다. lumen은 아무래도 자료도 부족한 면이 있고 Laravel 모듈과의 연동이 원활하지 않은 부분이 있어서 불편한 면이 있다. Lumen에는 Laravel에서 기본적으로 제공하는 기능 중 많은 부분이 제외되어 있는데 그 중 하나가 Elixir이다. 하지만 Elixir를 Lumen에 연결하는 것은 크게 어렵지 않다. Elixir는 Gulp

어제 작성했던 PhantomJS 2.1.1: render PDF / pageSize format 버그 해결에서 언급했던 PhantomJS에서 웹페이지를 PDF로 저장할 때 zoomFactor가 정상 동작하지 않는 문제를 개선한 코드를 새로 올린다. PhantomJS 2: PDF rendering too large, page.zoomFactor doesn't work에서 해결의 힌트가 있었음에도 불구하고 자세히 보지않아 해결하지 못했었는데 해당 부분을 조금 변형해서 조금 더 나은 방법을 적용했다(개인적인 생각). 일단 코드부터. "u

이번에 작업을 하면서 PhantomJS로 웹페이지를 PDF로 저장(캡춰)하는 부분을 처리하게 되었다. 기본적으로 PhantomJS는 보여지는 페이지를 render 함수를 사용해서 파일로 저장하는 기능을 기본적으로 제공한다. render에서 제공하는 포멧은 PDF, PNG, JPEG, BMP, PPM , GIF 이다. 따라서 원하는 기능을 아주 간단하게 구현할 수 있다. node.js의 설치나 PhantomJS의 설치에 관해서는 여기서 다루지 않는다. 복잡하지도 않고 검색해보면 상세히 설명되어 있는 자료도 많다. 그런데 내 Vagra

jQuery의 $.ajax 함수를 사용해서 JSON 응답을 받고자 할 때 응답값을 배열(객체)로 받는 방법으로 서버 응답시 header 정보에 Content-Type:application/json; charset=utf-8을 포함하는 방법을 주로 사용한다. 다른 방법도 있지만 응답 데이터의 유형을 명시적으로 지정해서 반환하는 것이 더 나은 방법이라는 생각이다. 실제로 이 방법으로 이제까지 잘 사용해 왔다. 그런데 얼마전 간단한 작업을 하던 중 이상한 상황에 부딪혔다. IE8/9에서 Content-Type:application/jso

어제 고객으로부터 사용중인 페이지에서 카카오톡 링크가 동작하지 않는다는 보고를 받았다. 확인해 보니 안드로이드 크롬 브라우저에서 탐색이 차단됨: intent:kakaolink://send?appkey=TGIF&appver=1.0&apiver=3.0&linkver=3.5&extras=%7B%2…b.io%22%7D&objs=%5B%5D&forwardable=false#Intent;package=com.kakao.talk;end;라는 오류를 발생시키면서 기능이 정상적으로 동작하지 않았다. 웃긴건 해당 링크를 빠르게 여러번 클릭하면 한번씩

국제화(internationalization : i18n)의 의미 국제화는 텀즈의 정의에 따르면 아래와 같다. 국제화는 때로 줄여서 그저 "I18N"이라고도 표기하는데, 그 의미는 이 용어의 영어 표기에서 첫 글자인 "I"자와 마지막 글자인 "N"의 사이에 18글자가 들어가 있다는 의미이다. 국제화는 제품이나 서비스를 특정지역의 언어나 문화에 맞추는, 즉 현지화라고 불리는 과정을 쉽게 할 수 있도록 계획하거나 이행하는 과정을 말한다. 국제화는 때로 번역 및 현지화 능력부여 작업이라고도 불리는데, 여기에는 다음과 같은 것들이 포함된다

WGS84 좌표계는 위키피디아에 따르면 다음과 같다. World Geodetic System (WGS) 1984년에 제정된 범 지구적 측위 시스템으로 지도학, 측지학, 항법에 많이 사용된다. 통칭 및 약칭은 WGS 84 (aka WGS 1984, EPSG:4326, WGS84)라고 부르며, 2004년에 마지막으로 개정되었다. 이전에 쓰던 초안으로 WGS 72, WGS 66, 그리고 WGS 60이 있다. 기존에는 네이버 지도 등에서 KTM 좌표를 사용하기도 했지만 요즘엔 WGS84 좌표를 주로 사용한다. 이번에 작업을 하면서 WGS8

store.js HTML5에 포함된 Web Storage 중 localStorage를 다양한 브라우저에서 사용할 수 있게 지원하는 자바스크립트 라이브러리다. 사실 이러한 기능을 제공하는 라이브러리는 이미 다양하게 개발되어 있다. 특히 이름이 store.js로 동일한 라이브러리도 있다. 그럼 기존의 쿠키 등의 방법을 두고 왜 클라이언트에 보관하는 web storage를 사용하는가? 당연히 서버에서 제어가 필요없는 정보를 저장하거나 큰 용량을 저장하고 싶을 떄 사용할 수 있다. 사실 쿠키는 저장 공간/개수의 한계도 있을 뿐아니라 모든