TOAST UI

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

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

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

이번 시간에는 에러와 스택 트레이스를 조작하는 방법에 대해 이야기하려 한다. 때때로 사람들은 이런 세부 사항에 대해 신경쓰지 않지만, 테스트나 에러와 관련된 어떤 라이브러리를 작성하려고 할 때 이 지식들은 굉장히 유용할 것이다.

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

2021년 8월 21일 오전 9시 18분. 당신은 막 아침을 먹었다. 당신은 Omni Consumer Products의 웹 유지 보수를 담당하고 있다. 한 시간 뒤 당신의 마지막 변경이 적합성 테스트에서 부적합 판정을 받았음을 발견했고, 이 문제는 "RedactSelect"의 버그로 발견되었다. 이는 당신이 사용하는 오픈소스 "multiselect" 웹 컴포넌트다. 이 컴포넌트는 업데이트 된 지 1년은 넘은 것 처럼 보이고, 성숙하고 안정적이라 생각되었다. 당신은 속으로 '문제없어, fork 해서 고쳐야겠군.'이라고 생각하고 고치기 시작했다.

ES6는 화살표 함수를 도입했다. 화살표 함수는 3가지 장점이 있는데 첫째로, 간결한 문법을 가졌다. 둘째, 명시적인 반환을 하며 한 줄로 멋지게 작성할 수 있게 해준다. 셋째, 다른 함수 내부에서 화살표 함수를 사용할 때 this를 재차 바인드 하지 않는다. 세 번째 장점은 클릭 핸들러와 비슷한 여러 가지의 구현을 정말 편리하게 해준다.

함수와 객체를 배우지 않고서는 자바스크립트 프로그래머로서 더 나아갈 수 없을 것이며, 이 두 가지가 함께 사용되는 경우 조합이라 불리는 강력한 객체 패러다임을 시작하는데 필요로 하는 빌딩 블록이 된다. 오늘 우리는 함수, 객체와 프라미스들을 조합하기 위해 사용되는 팩토리 함수의 몇 가지 관용적 패턴들을 살펴볼 것이다.

과거 웹오피스의 워드를 개발했던 때에, 각주 기능을 개발했던 적이 있다. 문서의 특정 부분에 커서를 두고 "각주"를 추가하면 해당 부분에 대한 코멘트를 문서의 우측 영역에 작성할 수 있는 기능이었다. 며칠 만에 기능을 완성하고 개별적으로 성능을 측정했다. 각주의 수를 늘려가면서 추가 삭제를 반복하는 일이었다. (IE6가 지원 대상이었고 마땅한 성능 측정 도구가 없어 CPU, 메모리 증가 여부와 사용감 정도로 체크했었다.)

토스트 드라이브 프로젝트에서 실제 구현해야 했던 명세 중 Generator 적용 효율이 제일 높았던 명세를 조금 수정했다. 파일 또는 폴더를 선택한 후 다른 폴더로 이동할 때의 명세다. 다음은 웹 기반 파일 시스템 구현 프로젝트의 일부 기능이다. 파일 목록에서 선택한 다수의 파일 및 폴더를 다른 폴더로 이동할 수 있다. 이때, 이동 대상 폴더에 이름이 같은 파일 및 폴더가 이미 존재할 경우 모든 건에 대해서 사용자에게 확인한다.