Code Spliting 왜 필요한가

webpack 을 이용하여 spa 애플리케이션을 만들면 결국 모든 소스파일이 하나의 파일로 (ex, index.bundle.js) 번들링되는데 개발이 진행되면서 여러가지 라이브러리들을 사용하게 되면 번들파일의 용량이 4~5MB 이상으로 금방 무거워질 수 있다. 이렇게 될 경우, 네트워크 상황에 따라 해당 js를 처음 내려받는데 오랜 시간이 걸릴 수 있다. 이럴 경우에는 index.bundle.js 파일을 splitting 하여 다운로드 받는데 걸리는 시간을 줄일 필요가 있다. 이때 코드를 나누는 방법은 성격에 따라 정적스플리팅, 동적스플리팅으로 나눠볼 수 있는데 차례대로 그 방법을 살펴보도록 한다.

npm 모듈 삭제

node_module 폴더에서 패키지 삭제. package.json 에서 내용을 삭제하지는 않는다

npm uninstall <package>

package.json 에서까지 삭제하려면 --save or --save-dev 옵션을 주어야 한다

life-cycle 메소드 순서

컴포넌트를 생성 할 때

constructor -> componentWillMount -> render -> componentDidMount

Point.

화살표 함수에서 사용된 this 참조는 해당 함수가 정의될 당시의 컨텍스트를 참조한다. function 함수에서 사용된 this는 해당 함수가 어떤 객체의 메소드로 호출되었느냐에 따라 해당 객체를 가르키는 참조가 된다.

현재 폴더 용량확인

$ du -hs

특정폴더 용량확인

$ du -hs foldername

하위 폴더별 용량확인

$ du -h --max-depth=1