들어가기에 앞서

이 포스트들에서 말하는 내용들은 전부 배포용 파일에 적합한 작업이다.
이런 압축 작업을 개발용 버전에서 매번 빌드할 때마다 실행하면 빌드 시간이 매우 느려지기 때문이다.

우리는 (Webpack 2) 트리 쉐이킹을 해보자!에서 모듈 전체가 로딩 되는 CommonJS 방식에서
모듈의 필요한 부분만 로딩하는 ES2015 Native Module 방식을 사용하는 법을 배웠다.(Tree Shaking)
또한 (Webpack 2) 코드를 분할해보자!에서 공통된 라이브러리를 분리시켜 사용자가 재접속시 캐싱을 적극 활용하게 바꿨고,
모든 페이지의 코드를 로딩하는 것이 아닌 페이지를 이동할 때마다 필요한 소스만 로딩하게 끔 청크 별로 코드를 분할하였다. (Code Splitting)
그리고 Webpakc 2가 미완성이라 코드 스플리팅이 제대로 되지 않아 일일이 필요한 모듈 파일을 하나씩 명시해줬어야 했는데,
이를 좀 더 똑똑하게 해주는 바벨 플러그인을 소개한 내용을 (Webpack 2) 트리 쉐이킹을 똑똑하게 해보자! 통해서 보았다.
이번 포스트에서는 이와 더불어 조금이라도 더 소스 코드를 최적화하는 방법을 소개하도록 하겠다.
별로 안 대단해보일 수 있지만, 필자는 상당히 흥미롭게 느낀 내용이다.
혹시 위 3개 포스트를 보지 않은 사람은 따라하지는 않더라도 꼭 읽어보길 바란다.

예제는 아래 깃헙 저장소의 hot-3 브랜치를 기준으로 진행된다.
https://github.com/perfectacle/react-router-4/tree/hot-3

목차

• 들어가기에 앞서
  • 원시값(Primitive Value)
  • 객체(Object)
• Symbol의 특성
• Symbol의 탄생 배경
• Symbol의 사용 사례
• Symbol 파헤치기
• 프로퍼티의 은닉화?

들어가기에 앞서

Symbol은 새로 생긴 7번 째 자료형이며 원시값(Primitive Value)이다.
Symbol에 들어가기 전에 몸풀기로 ES5의 자료형부터 알아보고 가자.
ES5에는 6가지 자료형이 있다.

들어가기에 앞서

이 포스트는 (Webpack 2) 트리 쉐이킹을 해보자!의 후속작이다.
따라서 해당 포스트를 읽고 예제를 진행한 후에 보는 걸 추천한다.
또한 내가 리액트 말고 할 줄 아는 게 별로 없어서 예제를 리액트로만 진행하다보니
혹시 헷갈리면 다른 라이브러리로 진행해보길 바란다.

복습

우리는 지난 포스트에서 리액트 라우터를 트리 쉐이킹하였다.
아래와 같이 기존에 쓰던 방식대로 진행하면 쓰지도 않는 모듈들이 전부 번들링되는 참사가 발생한다.

들어가기에 앞서

어제 프라미스를 쓰면서 정리 해봤는데,
또 파라미터를 넘겨서쓰거나 하려니 제대로 쓸 수가 없어서 정리해봤다.
일단 reject 되는 경우는 생각하지 않고, 그냥 내가 짠 비동기 함수를 동기식으로 실행시키길 원했을 뿐이었다.
지극히 사용 방법 위주로 적었으니 아래 링크들을 참조해서 이해하자.
일단 구현이 먼저인 사람은 코드를 적극 참조하면 될 것 같다.

• Promise - JavaScript | MDN - Mozilla Developer Network
• 바보들을 위한 Promise 강의 - 도대체 Promise는 어떻게 쓰는거야? | 감성 프로그래밍
• Promise 를 사용하는 두 가지 방법, new Promise, Promise.resolve()

파라미터 없는 일반 비동기 함수

전에 AJAX를 Promise와 Async/Await로 처리하는 방법을 알아봤는데,
setTimeout과 같은 비동기 함수를 처리하려니 또 버퍼링이 걸려서 정리해봤다.
너무 사용법 위주로 공부하다보니 나중에 또 정리를 하게 될 것 같다.
AJAX를 비동기로 처리하고 싶은 사람은 아래 글을 참조하자.
(ES6) ajax 위주의 promise 실습
(ES6+) ajax를 위한 fetch와 async/await

~ES5(콜백 함수)

순서가 보장되지만 피라미드 같이 생겼다.
뎁스가 깊어질 수록 컨트롤하기가 어렵다.
혹시 cb && cb()의 동작 방식과 원리가 궁금한 사람은 아래 글을 참조하자.
(ES) 똑똑한 논리 연산자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

const f1 = cb => setTimeout(() => {
  console.log(1);
  // setTimeout의 콜백 함수 안에서
  // 콜백함수(f1 함수의 매개변수인 cb)
  // 를 실행해야 실행 순서가 보장됨.
  // 매개변수로 넘어온 콜백함수(cb)
  // 가 없으면 실행하지 않음.
  cb && cb();
}, 1000);
const f2 = cb => setTimeout(() => {
  console.log(2);
  cb && cb();
}, 1000);
const f3 = cb => setTimeout(() => {
  console.log(3);
  cb && cb();
}, 1000);
const f4 = cb => setTimeout(() => {
  console.log(4);
  cb && cb();
}, 1000);
const f5 = cb => setTimeout(() => {
  console.log(5);
  cb && cb();
}, 1000);
const f6 = cb => setTimeout(() => {
  console.log(6);
  cb && cb();
}, 1000);
const f7 = cb => setTimeout(() => {
  console.log(7);
  cb && cb();
}, 1000);
const f8 = cb => setTimeout(() => {
  console.log(8);
  cb && cb();
}, 1000);
const f9 = cb => setTimeout(() => {
  console.log(9);
  cb && cb();
}, 1000);

f1(
  () => f2(
    () => f3(
      () => f4(
        () => f5(
          () => f6(
            () => f7(
              () => f8(
                () => f9()
              )
            )
          )
        )
      )
    )
  )
);

들어가기에 앞서

기본적으로 웹팩, 바벨, 리액트 라우터 등등은 안다는 전제 하에 글을 썼다.
웹팩 2에 대한 모르는 부분은 아래 글을 조금씩 참조하면 도움이 될 것이다.

• (Webpack 2) 트리 쉐이킹을 해보자!
• (Webpack 2) 코드를 분할해보자!

또한 리액트 라우터 v4 예제로 진행할 것이므로 아래 포스트를 참고하고 소스 코드를 클론하자.

들어가기에 앞서

~~React Router v4가 정식으로 나와서 3은 deprecated 된 거나 마찬가지라고 본다.~~~
현재 React Router v3은 디프리케잇 되지 않고 React Router v4와 다른 노선을 탔을 뿐, 지원은 계속 해주는 것 같다.
따라서 레거시 환경을 싫어하기도 해서 한 번 마이그레이션을 간단하게 해보았다.
기본적으로 웹팩, 바벨, 리액트 라우터 등등은 안다는 전제 하에 글을 썼다.
웹팩 2에 대한 모르는 부분은 아래 글을 조금씩 참조하면 도움이 될 것이다.

• (Webpack 2) 트리 쉐이킹을 해보자!
• (Webpack 2) 코드를 분할해보자!

v3으로 만들어보기

들어가기에 앞서

웹팩 2, 웹팩 1, 바벨, 리액트 등등에 대해서 기본적인 부분은 설명하지 않는다.
또한 (Webpack 2) 트리 쉐이킹을 해보자!를 보고 나서 이 포스팅을 읽는 걸 추천한다.

코드를 왜 분할하지?

SPA(Single Page Application)은 한 번에 모든 리소스를 로딩해서
초기 로딩 이후에 페이지 이동이 매우 빠르다는 장점을 가지고 있다.
하지만 앱의 규모가 커지면 모든 리소스를 한 번에 로딩하므로
초기 로딩이 느려져 사용자 이탈을 유발하는 양날의 검을 가지고 있다.

들어가기에 앞서

여기선 기본적으로 웹팩 1, 바벨, ES2015(ES6)을 알고 있다는 전제로 진행한다.
리액트 대신에 다른 서드 파티(라이브러리/프레임워크) 가지고 테스트하면서 이 글을 봐도 된다.
또한 이 글을 보고 나서 (Webpack 2) 코드를 분할해보자!도 보는 걸 추천한다.

트리 쉐이킹(Tree Shaking)??

트리 쉐이킹이란 나무를 흔들어서 필요없는 걸 떨어트리는 행위를 말한다.
여기서 우리에게 필요없는 것이란 쓰지 않는 코드를 뜻한다.

perf-chk (Performance Check)

왜 perf-chk를 만들었나?

나는 코드 실행 시간에 굉장히 관심이 많다.
따라서 코드 실행 시간 측정을 위해 테스트를 종종 해보곤 한다.
그럴 때 아래와 같은 코드를 사용하였다.

1
2
3
4
5
6
7
8
9
10
11

const iterations = 10000000;
console.time("function A");
for(let i=0; i<iterations; i++){
  // some code1
}
console.timeEnd("function A"); // 'Function A: xxx.xxx ms'
console.time("function B");
for(let i=0; i<iterations; i++){
  // some code2
}
console.timeEnd("function B"); // 'Function B: xxx.xxx ms'