TOAST UI

이 글은 웹 컴포넌트 소개 연재로 그중 세 번째인 쉐도우 돔에 대한 글이다. 아마도 이전 글의 커스텀 엘리먼트 글을 읽고 온 분은 여러 스펙, 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 이며 자바스크립트와 브라우저의 개선 사항 중 하나이다. 웹어셈블리는 자바스크립트를 대체하려는 목적이 아니며 사실 보완하려고 나왔다.

Redux는 Event Sourcing패턴과 Functional programming을 결합하여 라이브러리 형태로 구현한 컨테이너다. 이 컨테이너는 애플리케이션의 상태를 저장하고, 쉽게 예측할 수 있도록 하여 일관된 구현을 유지할 수 있도록 하고, 테스트, 유지보수, 디버깅 등을 손쉽게 처리할 수 있도록 한다.

React는 간단하면서도 충분히 빠르다. 하지만 착각하지 말자. 대충 만들어도 빠르다는 것은 아니다. React 애플리케이션은 잘 만들어야 빠르다. React의 동작 원리를 이해하고 애플리케이션이 느려질 수 있는 상황들을 찾아 해결하는 것이 중요하다. 다행히 React는 간단하고 이해하기 쉬운 라이브러리다.

자바스크립트 개발 이야기에서 AOP는 생소한 주제이다. 보통 AOP 개념을 설명할 때 대표적으로 Cross-cutting Concern 이라는 말을 한다. 직역하자면 횡단 관심사 라고할 수 있겠으나, 조금 더 쉽게 얘기하자면 "로그를 남겨야 할 곳은 여기, 저기, 그리고 또 저기가 되겠군", "사용자 입력을 받는 이~러한 부분들에서는 유효성을 검증해야 해" 라고 표현할 수 있는 공통된 관심사 정도로 표현할 수 있겠다.

오늘 우리는 ES6의 기능 중 하나 인 Proxy의 사용 사례를 살펴볼 예정이다. 여러분은 지금까지 ES6 Proxy에 대해 들어 봤거나 사용해 보았을 것이다. Proxy가 무엇인지, 어떻게 사용하는지에 대한 많은 정보가 있지만, 필자가 실제(와 같은) 사용 사례를 찾으려고 노력했고, Proxy가 어떤 곳에 쓰이는지 작은 정보를 가지고 왔다.