TOAST UI

프론트엔드 개발에서 필요한 자바스크립트 프레임워크 및 라이브러리는 패키지 매니저를 통해 설치하고 사용할 수 있다. 패키지 매니저의 종류로는 bower, npm, yarn 등이 있고, nodejs로 개발하는 환경에서 모듈을 사용하기 위해서는 사용하고자 하는 모듈이 npm에 등록되어 있어야 한다. 더 자세히 말하면 내가 만든 모듈을 다른 모듈에서 사용할 수 있도록 npm 중앙 저장소에 배포(publish)하는 작업에 해당된다.

저번 글을 통해 함수가 어떻게 생성되는지 대략적으로 살펴보았다. 함수는 일반 객체의 확장이다.함수 생성 시점에 그 함수의 역할이 어느정도 결정될 수 있다.(callable과 constructor) 함수 생성 시점에 저장하는 데이터들을 통해 스코프나 this 참조 방식을 결정한다.

최근 나는 팀에서 관리하는 자바스크립트 캘린더 라이브러리에 타임존 기능을 추가하는 작업을 한 적이 있다. 자바스크립트의 타임존 지원이 다른 언어에 비해 부실하다는 얘기는 이미 들어 알고 있었지만, 기존 Date 객체를 잘 추상화하면 어렵지 않게 구현할 수 있을거라 생각했다.

자바스크립트 세계에서는 JIT(Just-In-Time) 컴파일러가 등장하면서 성능의 비약적인 발전을 이루었고 웹 어플리케이션의 규모가 점점 더 커질 수 있는 초석이 되었다. 그럼에도 불구하고 여전히 성능에 대한 목마름은 해소가 되지 않았고 WebAssembly라는 것이 등장하였다. WebAssembly는 Weekly Pick에서도 여러 번 다루어 왔던 주제이다.

이 글은 웹 컴포넌트 소개 연재로 그중 세 번째인 쉐도우 돔에 대한 글이다. 아마도 이전 글의 커스텀 엘리먼트 글을 읽고 온 분은 여러 스펙, API, 기억해 두어야 할 것들로 질렸을지도 모르겠다.(두 번으로 잘라서 글을 썼으면 좋았을 것 같다.) 그러나 이번 시간 쉐도우 돔을 사용하는데 배워야 하는 API는 element.attachShadow()함수 하나뿐이니 가벼운 마음으로 시작해도 된다.

자바스크립트로 유명한 개발자 Douglas Crockford의 말을 빌리면, 자바스크립트는 지구에서 가장 오해하고 있는 프로그래밍 언어다. 물론 지금 글을 작성하는 2017년에는 그 오해가 많이 풀리긴 했지만, 여전히 자바스크립트는 계속 진화하고 있고, 그 변화를 자세히 알고 있는 사람은 드물다.

오늘은 이전에 썼던 글 WebComponents- Keep calm and UseThePlatform)에 이어지는 것으로, Web Components의 주요 표준 중 하나인 Custom Elements에 대한 글이다. 사용법은 아래의 코드를 보는 것이 빠르겠다. 아래의 코드를 크롬이나 사파리에 올려보자. 이외의 브라우저에서는 아래의 브라우저 지원과 Polyfill 섹션을 참조하자.

React(이하 리액트), Redux(이하 리덕스) 생태계에서 소켓과 같은 외부 이벤트 처리는 개발에 많은 고민을 안겨준다. 똑같은 외부 이벤트가 발생하더라도 앱의 상태에 따라 다르게 처리하고 싶을 수도 있고, 무시하고 싶을 수도 있으며, 앱의 상태와 관계없이 항상 처리하고 싶을 수도 있다. 특히 외부 이벤트가 리덕스의 액션과 연결되는 경우 리덕스의 미들웨어를 통해 액션이 Dispatch 됐다는 것을 알아야 한다. 때문에 단순한 리덕스 스토어의 API만으로는 모든 서비스 로직을 처리하기가 상당히 까다롭다.

이 포스터(Keep Calm and Carry On)은 영국 정부가 제2차 세계 대전이 발발하기 전 대규모 공중 폭격이 예고된 가운데 영국 시민들에게 “평상심을 유지하고 하던 일을 계속해라”라는 뜻으로 배포했다. 그런데 현재 webcomponents.org는 무슨 이유인지 상단에 전쟁 시 사용되었던 포스터의 패러디로 “Keep calm and UseThePlatform”이라는 모토를 달아놓았다. 구글은 지금 자바스크립트 세상을 전쟁 상황이라고 표현하는 것일까.

웹어셈블리는 미래에 매우 유용하게 사용될 새롭고도 새로운 표준이다. 이 기술은 W3C 커뮤니티 그룹에서 애플, 구글 , 마이크로소프트 그리고 모질라와 함께 개발되고 있다. 이 프로젝트의 초기 시점인 지금은 고 수준의 언어가 아닌 C/C++로 초점이 맞춰져 있고 웹어셈블리의 약어는 wasm 이며 자바스크립트와 브라우저의 개선 사항 중 하나이다. 웹어셈블리는 자바스크립트를 대체하려는 목적이 아니며 사실 보완하려고 나왔다.