안녕하세요. 연말 연휴로 밀렸던 HTML5Rocks 한글화 업데이트가 오늘 전부 라이브되었습니다. 평상 시에는 개별적인 튜토리얼 단위로만 포스팅을 했지만 조금 밀려있는 관계로 금번 업데이트 소식을 모은 포스팅을 추가하여 전달해드립니다. 각 제목을 클릭하시면 개별 튜토리얼에 대한 포스트로 이동합니다. :)
자바스크립트의 비동기 동작으로 인해 콜백이 콜백을 부르고 다시 콜백이 콜백을 부른 과정이 중첩되다보면 내가 콜백인지 콜백이 나인지 헷갈릴 정도의 Callback Hell에 빠지게 됩니다. Promise는 이러한 비동기 동작을 손쉽게 처리할 수 있도록 고안된 비동기 프로그래밍 모델입니다.
이번 튜토리얼은 거의 작정하고 만든 듯이 완벽 해설서에 가깝습니다. Polyfill을 이용해서 당장 적용해보실 수도 있으니 비동기 콜백에 지치거나 그 지옥 한가운데에 있으시다면 잠시 코딩을 멈추시고 일단 읽어보시길 바랍니다.
"콜백 지옥(Callback Hell)은 멀리 있지 않습니다. 몇가지의 이벤트를 순차적으로 사용하기 위한 시나리오만 있으면 됩니다. 그러나 겹겹이 이어지는 콜백 함수가 포함된 코드는 주말이 지나고 새로운 모습으로 여러분에게 다가올 것입니다."
아시다시피 자바스크립트에서는 자바와 마찬가지로 개발자가 직접 메모리를 관리할 필요가 없습니다. 이 둘은 전혀 다른 언어 스펙을 가지고 있지만 메모리 관리에 대해서는 가비지 콜렉션(Garbage Collection, 이하 GC)을 사용하기 때문입니다. 이번 튜토리얼은 이러한 GC의 동작을 회피하기 위해 정적으로 메모리 공간을 할당하고 이를 지속적으로 재사용하는 모델을 자바스크립트를 기반으로 설명합니다.
번역은
김훈민님께서 수고해주셨습니다. :)
"GC는 개발자가 메모리를 직접 관리하는 대신 경험적으로 효율적이라 판단되는 형태로 메모리를 자동으로 수거하고 관리합니다. 그러나 메모리의 할당/해제는 아주 오래된 성능 병목지점의 하나이기 때문에 직접적으로 관리하지 못하는 모델에서는 순간적인 지연으로 인한 멈칫거리는 현상이 발생하고는 합니다. 정적 메모리 모델이 모든 것에 대한 해답은 되지 못하지만 GC에서 매뉴얼적인 메모리 관리 모델이 제공되지 않는 경우 유일한 해결 방법이기도 합니다."
이전에 포스팅한 렌더링 관련 튜토리얼들은 웹킷 혹은 크롬의 렌더링 모델이 취하는 구조나 그로 인한 렌더링 성능의 형태 및 최적화에 대해 논의한 글이었습니다. 그리고 이 튜토리얼은 조금 다른 관점에서의 렌더링 성능과 관련하여 가중치와 그 측정 방법에 대해 논의하고 있습니다. 특히, CSS의 속성들의 조합이 그 각각의 페인트 시간의 합보다 더 많은-심지어 훨씬 더 많은- 시간을 소모할 수 있다는 것은 특별히 더 염두에 두어야 할 내용 중의 하나입니다. :)
"GPU 기반으로 가속되는 그래픽스의 성능 향상은 웹에서도 많은 효과를 가능하도록 만들었습니다. 그러나 그래픽스 시스템이 가지는 특성으로 인해 이러한 효과들이 조합되는 경우 중 어떠한 것들은 우리가 기대하는 바와는 달리 더 많은 렌더링 시간을 차지하여 예상치 못한 성능 상의 영향을 주기도 합니다."
다른 그래픽스와 마찬가지로 안티앨리어싱은 다양한 방식으로 처리될 수 있습니다. 또한 폰트의 안티앨리어싱 처리는 기본사항이라고 생각해도 무방합니다. 이 튜토리얼에서는 현재 크롬에서 사용하고 있는 '
그레이스케일 안티앨리어싱(Grayscale Antialiasing)과 서브픽셀 안티앨리어싱(Antialiasing)'에 대해 차이점을 설명하고 어떠한 기준으로 각 방식이 사용되는지에 대해 설명합니다.
"안티앨리어싱은 그래픽스에서 2가지 이상의 색상들이 충돌하는 픽셀과 그 주변들에 대해 어떠한 색상으로 채울 것인지를 결정하는 처리 과정을 말합니다. 특히 폰트의 렌더링에서 윤곽선의 처리는 미려한 출력을 위해 아주 오랜동안 사용된 기법이기도 합니다."
웹 컴포넌트 관련 튜토리얼마다 말씀드리는 내용입니다만 DOM에 대한 캡슐화(Encapsulation)와 같은 매우 강력한 기능을 제공하는 Shadow DOM 역시 이전의
Custom Element나
HTML Imports처럼 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다. 이 튜토리얼은 여러개의 Shadow root 사용하는 방법과 호스트의 Shadow tree를 얻고, 자바스크립트을 통한 Shadow DOM의 구축 및 삽입지점을 통한 동작에 대해 논의합니다. 그리고 Shadow DOM을 쉽게 이해할 수 있도록 만들어진 도구인 Shadow DOM Visualizer와 이벤트 모델의 동작 방식을 소개합니다.
"Shadow DOM이 컴포넌트를 구성하는 DOM을 감추는 역할(encapsulation)을 하고 HTML Template가 DOM의 복제 및 재 사용성을 제공하며 Custom Element는 웹 문서에서 사용할 엘리먼트를 모듈에서 직접 등록할 수 있도록 하는 기능을 제공하여 컴포넌트의 명시적인 alias를 선언하는 역할을 한다면 HTML Imports는 웹 문서 내에 외부 리소스를 포함(Import)하기 위한 기능을 제공합니다."
