TOAST UI

오늘날 웹 애플리케이션들은 굉장히 크고, 대부분 자바스크립트로 만들어진 것이다. 2018년 중순, HTTP Archive가 보여준 모바일 장치에서 자바스크립트의 평균 전송 크기는 약 350 KB 이다.

본 시리즈의 이전 아티클에서는 웹팩4에 대해 다루면서 바로 쓸 수 있는 환경을 만들어봤다. 이번편에는 그 환경 그대로 이용해 ES6 개발 환경을 추가한다. ES6는 이제 충분히 써도 될만한 시기라고 생각한다. "나는 프런트 개발자가 아니기도 하고 브라우저가 모두 지원하지도 않기에 ES6는 아직 못쓴다" 라고 생각하고 있다면 이 글을 통해 생각을 바꿀 수 있길 바란다. 어차피 쓰는 거 ES6뿐 아니라 ES8까지 사용하는 것을 권장한다.

Proxy는 ES2015에 소개된 기능이다. IE11을 제외하고는 모던 브라우저에서 지원하고 있어서 사용할 수 있다. babel 트랜스파일로도 지원되고 있지 않지만, 구글에서 폴리필을 만들어 공개하고 있다.

최근에 새로운 프로젝트를 진행하게 되면서 기존에 간만 살짝 보고 있던 뷰(Vue, 이하 뷰)를 본격적으로 도입하게 되었다. 사실 팀에서는 리액트를 선호하고 있었으나 회사 내부에서 뷰의 사용이 빠른 속도로 증가하고 있었고 그에 따라 팀내에서도 뷰에 대한 전문성이 필요하게 되었다. 뷰와 리액트는 서로 영향을 주고받고 발전해나가는 도구들이라 비슷한 부분이 많아 큰 어려움 없이 적응할 수 있었다. 새로운 프로젝트에서는 뷰를 사용하는것 뿐 아니라 다른 개발 환경도 요즘 것들로 업그레이드 해봤다. 웹팩 4 사용하고 테스트 러너도 기존에 팀 내에서 표준처럼 사용하던 카르마(Karma)에서 요즘(이미) 잘나가는 제스트(Jest)로 새롭게 시도해봤다.

이번 글은 웹 컴포넌트 소개 연재 5번째로 웹 컴포넌트를 react처럼 코딩하기를 해보겠다. 사용하는 예제 전체 코드는 Todo Web Components에서 참조할 수 있다. 이 예제를 통해 지난 연재에서 알아보았던 커스텀 엘리먼트, 쉐도우 돔 그리고 lit-HTML]을 사용하여 웹 컴포넌트 애플리케이션을 어떻게 만들 수 있는지 확인해보자.

이번 글은 웹 컴포넌트 소개 연재 4번째로 Template Element과 HTML Imports에 대한 글이다. 서두에 밝히자면, 이 두 표준의 흐름은 웹 컴포넌트 개발에서 제외될 것으로 보인다. 따라서 두 표준을 자세히 알아보기보다는 이것들이 웹 컴포넌트로써 사용되게 된 배경과 한계점, 그리고 Polymer Summit 2017에서 나온 현재의 동향을 이야기로 풀어보았다. 직접 실습할 내용도 없으니 가볍게 이야기 읽듯 따라가 보자.

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

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

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

자바스크립트는 객체 지향 언어이자 함수를 1급 객체로 취급하기 때문에 함수형 프로그래밍도 가능한 멀티 패러다임 언어이다. 자바스크립트를 조금이라도 다뤄봤던 사람이라면 익히 알고 있겠지만 자바스크립트에는 클래스란 개념이 없어 객체 생성이나 상속이 다른 언어와 다르고 특히 OOP는 주로 프로토타입이란 메커니즘을 통해 이루어진다. 검색을 조금만 해보면 프로토타입을 다룬 아티클들은 많이 찾아볼 수 있다. 하지만 여기서는 프로토타입에서도 상속을 구현하는 핵심 메커니즘인 포로토타입 체인에 대해 집중적으로 다룬다.