속깊은 JavaScript

도서 정보 링크

이 책은 작년쯤 사두고 방치해 두었다. 여유있을 때 조금씩 책을 읽고 싶은 마음이 들었는데, 방치해둔 책을 끝까지는 읽어보고픈 맘이 들어 읽게 되었다. 읽고 나니, 읽었던 기록을 남기고 싶었다. 간단히 적어 본다. 독서가 습관이 아닌 나, 글쓰기에 서투른 나다. 블로그에 글 적어 봐야 아무도 관심가지지 않을 거라는 확신 하에 적어 본다.

2020년 12월 31일. 1년의 마지막이자 또다른 1년의 시작 전이 날이다. 대개 이런 날에는 안하던 짓을 하나씩 하게 된다. 그것 중 하나가 이건가보다. 이 책은 아침저녁으로 책상에 앉을 때 계속 눈길만은 주던 책이고 언젠가 읽어야지 생각만 하던 책이다. 요즘 괴로울 정도로 권태롭다. 일상에 변화를 주고 싶다. 자극을 주고 싶다. 평소와는 다른 것들을 해야한다고 생각한다. 독서가 그런 자극이 될까 모르겠다.

책의 분량이 있어 하루만에 다 읽지는 못하고 1에서 4장까지 읽어내렸다. 이전에 책을 산 그날 대략 2장인가 3장까지 읽고 방치해뒀던 기억이 난다.

1장은 초반이라 대략적인 설명이라 큰 감흥은 없고, 2장과 3장도 읽었던 내용이고 어지간히 숙지하고 있는 내용이라 큰 어려움은 없었다.

4장이 좀 문제인데, 그동안 자바스크립트의 상속 개념, 프로토타입 개념이 조금 난해해서 대강 넘어갔었는데, 이 챕터에서 아주 자세하게 설명을 한다. ECMA 표준까지 인용해가며 설명해주는 것은 좋기는 하지만 읽다 보니 내용이 지나치게 깊게 들어가 이해하기 쉽지 않은 점은 좀 아쉽기도 하다. 내 독해력이 문제인가…? 몇 번 반복해야 할 문제일지도.

아무튼 지금 생각은 이렇다. 4장의 개념은 원리적으로는 중요할지 모르지만, 결과적으로 그냥 새로운 문법인 class와 extend 키워드로 결국 끝난다는 것 아닌가? 지나치게 설명이 지루했다고 생각한다. 기술은 계속 발전해 ECMA에서 제안한 새로운 자바스크립트 문법은 점점 상용화 되어 가고 있고, 구 브라우저 들은 어지간하면 지원하지 않는 케이스도 늘어가고 있으며, 트랜스파일러나 웹팩 같은 것도 있는 마당에…

암튼 5장 이후의 내용도 꽤 흥미롭다. 디자인 패턴, 성능 문제, 코딩 스탠다드, 여러 프레임워크.. 한 번쯤 보고 넘어갈 주제라고 생각한다. 만약 계속 읽게 된다면 이 포스트에 업데이트하자.


새해 첫날 셀독에 와서 5장 ‘디자인 패턴 실용’을 읽었다. 패턴을 많이 공부 안 한 나는 이런 것 대환영이다. 이미 알던 것도 몇 개 있고, 알게모르게 개발에서 이러면 좋겠구나라고 막연히 생각한 것들도 있고 새로운 것들도 있다. 구체적인 이름, 구조, 기대 효과를 볼 수 있어 뜻깊다. 되게 뇌를 자극받는 느낌이다.

5장에서 제시하는 자바스크립트 대표 디자인 패턴은 다음과 같다.

  • Module
  • Event delegation
  • Proxy
  • Decorator
  • Init-time branching
  • Self-definine function
  • Momoization
  • Self-invoking constructor
  • Callback
  • Currying

지금 보니 Promise 가 없긴 하네. 딱히 여기서 모든 패턴을 바이블처럼 살펴보자는 것도 아니니 넘어가자. 이 부분 중요한 내용인 것 같으니 챕터 말미의 정리 부분을 인용하며 참고를 위한 웹페이지 링크를 달도록 하자.

모듈은 간단히 말해 객체를 모듈로 사용해 여러 기능을 하나로 묶은 것. 쉽게 말해 $.ajax() 같은 함수가 $ 안에 있는 것.

이벤트 전파는 캡쳐, 타겟, 버블 3단계로 구분하여 이벤트가 된다는 것. (참고: 이벤트 전파)

프록시는 캐시를 활용할 때나 여러 요청을 하나로 합쳐 서버 요청을 최적화하거나 외부 인터페이스를 간편하게 할 수 있다. (참고: 프록시 패턴)

데코레이터는 반복되는 기능의 조합을 조금씩 변경해 사용하는 경우 유용하다. (참고: 데코레이터 패턴)

In-time branching 패턴은 브라우저 호환성을 지원하기 위해 많이 사용한다. 브라우저마다 다른 함수를 지원여부에 따라 브랜칭하여 polyfill 하기도 할 때 자주 본다.

Self-defining function 패턴은 초기화 작업이 매번 필요한 함수나 클로저에 초개화 내용을 저정해야 하는 함수에 활용하면 좋다.

메모이제이션 패턴은 캐시와 같은 기능을 수행하여 성능과 서버 요청 최적화에 유용하다. (참고: 메모이제이션 패턴)

콜백 패턴은 늘 보는 바로 그것.

커링 패턴은 하나의 공용 함수에 세부적인 기능을 함수로 나누고 싶을 때 유용하다. (참고: 커링 패턴)


6장 브라우저 환경에서 자바스크립트는 setTimer를 예시를 들어 자바스크립트가 단일 스레드에서 운영됨을 알린다. 이 부분 어느 정도 이해하고는 있는데, 필자 특유의 지나치게 디테일한 설명이 좀 어렵게 느껴지기도 한다. 뭐 나중에 시간이 있다면 더 살펴볼까.

DOM의 repaint와 reflow를 설명하고 더 나은 성능을 위해 reflow를 줄일 수 있는 방안을 제시하는 것은 흥미로웠다. 솔직히 집중력이 떨어진 시점에 독서했고, 지나치게 장황한 코드에 의존한 흐름이라 눈으로만 읽기 힘들어 설렁설렁 넘어간 부분이긴 하다. 뭐 언젠간 체감할 날이 오겠지.

웹 워커라는 것을 알게 되어 흥미로웠다. UI 이벤트 핸들링과 로직 핸들링을 아예 다른 스레드로 분리하여 처리하는 것은 처음 봤다. 내 생각에는 워드프레스나 유튜브 API 어딘가에서 이걸 쓰지 않을까? 로그 메시지나 언더스코어 테마 코드 어디서 postMessage라는 걸 봤는데 관련 있는 것 같다.

웹 기술은 계속 발전하고 따라가는 것도 쉽지 않다. 그리고 좋은 성능을 위한 노력은 정말 끝도 없이 깊게 갈 수 있다는 것을 느낀다. 물론 너무 거기에 경도되어서는 안되지만.


1월 2일 07장 자바스크립트 성능과 사용자 경험 개선, 08잘 08장 자바스크립트 코딩과 개발 환경, 09장 자바스크립트 표준을 대략 봤다. 7장은 자바스크립트 범위를 넘는 최적화 방법도 있고 너무 겉핥기. 8장도 별 의미 없다. 9장은 ES2015 새로운 문법을 좀 자세히 설명해줘 몇 가지는 볼만했다. 하지만 이미 점점 쓰고 있는 것들이 많아 지금의 나한테는 좀 반복된 주제 같다. 다만 몇몇 문법은 잘 모르던 것들이라 다시 한 번 뒤적일 가치는 있다.

10장은 진짜 몇 페이지 없고, 이 책이 좀 나온지 오래되었구나 라는 생각을 들게 만든다. jQuery, Underscore 같은 오래된 라이브러리 (물론 여전히 좋은 라이브러리라고 생각하지만)도 나오고… 이것은 그냥 읽었다고 치자. 이렇게 이 책을 한번 완독한 셈 치자.

전반적으로 IT 관련 책은 뜨거울 때 빨리 읽고 소비하고 버려야 하는 것 같다. 그 중에서도 기술의 변화가 가장 빠른 웹 프론트엔드쪽의 책을 연단위로 묵혀 봤다. 당연히 그동안 변한게 많겠지. 그래서 오래된 설명도 좀 있고 지나치게 깊게 들어가는 설명도 있었지만, 그래도 나름 자바스크립트를 깊게 알고픈 사람에게 초반 몇 챕터는 읽어 보면 좋겠다 싶을 정도로 나름 잘 정리된 책이라고 생각한다.

댓글 남기기