TOAST UI

TOAST UI Editor는 2015년 3월에 첫 커밋이 이루어진, 대략 3년이 된 프로젝트이다. 2017년 12월 30일 이 프로젝트의 버전을 1.0으로 올리고 npm에 배포하기 위해 연말에 출근을 했었고, 당시 이 프로젝트의 저장소는 연말 사무실의 풍경만큼이나 한산했다. 3년간 정확히 160개의 github 스타를 받았었으며, PR은 기대하기 힘들었다. 이슈는 몇 달에 한 번씩 나타나 "이 프로젝트는 오픈소스야"라는 정체를 희미하게 알리는 정도의 역할을 하였다.

지난 글에서 Redux-Saga와 사이드 이펙트를 가지고 공부 겸 정리 겸 글을 작성했다. 이번 글에선 Redux-Saga에서 사용하는 제너레이터함수, 이펙트에 대해 정리해보려 한다. 제너레이터함수는 협력적이고,run-to-completion이 아니며, 그렇다고 비동기도 아닌 그런 함수다. 그리고 이펙트는 Redux-Saga의 가장 중심이 되는 특징이다. 마치 Redux의 Action처럼 단순한, 일반적인 객체인데 개발자에겐 어마어마한 마법을 보여준다. 그리고 대부분의 서비스 로직을 이 이펙트로 작성한다. 이 두 가지를 이해한다면 이제 Redux-Saga는 뭔지 모르겠는데 엄청 대단해 보이는 것에서 엄청 대단한 건데 난 이해함ㅋ이 될거라 생각한다.

웹 워드프로세서(이하 웹 워드)분야는 생각보다 오래된 역사를 가지고 있다. 구글 독스가 2006년에 소개되면서 많이 알려졌으니 벌써 십여 년의 역사가 있는 소프트웨어 분야이다. 씽크프리는 자바 애플릿 기반으로 브라우저에서 구동되는 웹 워드를 표방했지만, 자바스크립트와 같은 웹 언어로 작성되지 않았기 때문에 웹 워드라고 보기는 어렵다. 네이티브 워드프로세서는 각 OS를 기반으로 독자적인 그래픽 툴킷과 C++이나 자바와 같은 프로그래밍 언어로 구현되어 있다. 반면에 웹 워드는 브라우저에서 구동되기 때문에 지원되는 브라우저만 있으면 어느 컴퓨터에서나 문서 편집을 할 수 있는 장점이 있다.

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

몇 해 전, 필자가 대학 졸업반일 때 웹 개발 과정은 두 가지의 기술에 초점을 두었다. 한가지는 기본적인 것들 즉, HTML과 CSS, 그리고 다른 한 가지는 Adobe Flash였다. 필자는 포트폴리오에 추가하기 위해 Action Script3.0로 사용자와 상호작용하는 웹사이트를 작성하는데 많은 시간을 들였다. 대학을 졸업한 뒤 몇 개월이 지나, 필자는 Flash로 고객의 웹사이트를 만들어 주었고 그것이 처음이자 마지막이었다. Flash는 죽어가고 있었다. 그리고 필자의 이력서나 포트폴리오에서도 사용하지 않게 되었다. 그것은 바뀌는 기술의 변화 속도에 대한 첫 번째 교훈이었고, 졸업 후 이제 막 실무로 뛰어드는 사람에게는 매우 두려운 깨달음이었다. 그 후 7년 후인 지금, 필자는 Microsoft Edge팀에서 디자인을 돕고, 필자가 느꼈던 불안감을 줄여줄 도구(Sonarwhal)를 개발한다.

지난 1년 6개월 동안 리액트, 리덕스를 공부하고 활용해 웹 애플리케이션을 개발했다. 지금도 개발하고 있고, 여전히 비동기 처리와 같은 사이드 이펙트(Side effects)를 고민하고 있다. 리액트, 리덕스는 함수의 응용, 순수 함수, 불변성 등 함수형 프로그래밍을 지향한다. 그리고 사이드 이펙트를 원하지 않는다. 하지만 세상일은 뜻대로 되지 않는다는 말을 증명하듯 서비스는 사이드 이펙트 없이 개발할 수 없었다. 사실 처음에는 사이드 이펙트라는 개념도 몰랐다. 그냥 무언가 개발에 어려운 점이 있는데, 그 무언가가 무엇인지 표현도 못 했다.

리액트가 정식으로 릴리즈된 지도 벌써 4년이 훌쩍 지났다. 얼마전 나온 16.0 버전에 이르기까지 내부적으로도 많은 발전이 있었고, 수 많은 리액트 관련 라이브러리들이 나오는 등 외부적으로도 많은 발전이 있었다. 지금은 거의 대세가 되어 버린 리액트이기에 장점을 나열하자면 지루한 내용이 되겠지만, 꼭 짚고 넘어가고 싶은 장점은 4년이 넘게 지나도록 핵심 개념이나 중요 API가 거의 그대로 유지되고 있다는 것이다. 나는 이것이 리액트가 처음부터 추구했던 가치가 시간이 지나도 퇴색되지 않을만큼 의미있다는 것을 입증하고 있다고 생각한다.

에디터, IDE뿐 아니라 업무에 관련된 새로운 도구가 나오면 꼭 써봐야 직성이 풀리는 성격이었지만 언젠가부터 그놈이 그놈이고 저놈이 그놈이고 새로운 기능이 있어도 개발을 할 때 사용하는 기능들은 매우 한정적이라는 사실을 깨닫게 되었다. 인텔리제이도 일년 이상은 사용해봤지만 프론트 엔드를 주로 개발하기에 딱히 IDE가 필요하지 않았고 수많은 기능들을 거의 사용하지 않다 보니 필요 이상의 도구를 사용하는 느낌이었다.

로컬 PC 내에서 브라우저 자동화 테스트를 수행하는 테스트의 경우 `karma-chrome-launcher`가 현재 karma 실행 환경에 설치된 Chrome 브라우저를 실행한다. 로컬 PC 내에서 다른 브라우저들을 동시에 테스트하려면 Firefox, OSX인 경우 Safari, Windows의 경우 Internet Explorer 나 Edge의 karma launcher를 추가로 등록하여 테스트를 수행할 수 있다. 하지만 이런 경우 OSX에서 Internet Explorer 테스트, Windows에서 Safari 테스트는 수행할 수 없다는 한계가 있다.

Firefox Quantum 릴리즈가 가까워지고 있다. 이번 릴리즈에서는 Servo에서 가져온 초고속 CSS 엔진을 포함하여 많은 성능 개선이 있다.