# babelrc

[최적화] 트리쉐이킹(Tree Shaking)
트리 쉐이킹 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것 자바스크립트 트리쉐이킹 하는 이유 1) JavaScript 파일 크기 / 요청 횟수 증가 과거 HTML 위주의 단순한 웹 페이지와는 비교도 안 될 정도로 규모 있고 화려한 인터랙션을 자랑하는 웹 애플리케이션들이 증가 (참고: http archive) 2) JavaScript 파일의 실행 시간 자바스크립트는 코드 실행까지 거쳐야 하는 과정이 많음 (다운로드 - 압축 해제 - JS 코드 파싱해서 DOM 트리 생성 - 컴파일 - 실행) 다른 리소스에 비해 상대적으로 많은 시간을 소모 파일의 크기가 커진 만큼, 파일의 실행 시간 또한 증가 JavaScript 트리쉐이킹 웹팩 4버전 이상을 사용하는 경우에는 ES6 모듈(import, exp

parcel 기초 세팅
오늘은 웹 어플리케이션 번들러 3대장webpack, rollup, parcel중 하나인 parcel의 세팅 방법에 대해 알아보겠습니다. 물론 알아볼 것도 없이 parcel 홈페이지가 워낙 번역이 잘되어 있긴 합니다 ㅎㅎ;; 그래도 세팅이 어려운 분들을 위해 작성해봅니다. 시작하기 먼저 parcel을 실행하려면 parcel을 설치해야겠죠? Yarn: yarn global add parcel-bundler npm: npm install -g parcel-bundler 그 다음 yarn init -y npm init -y 그런 다음 index.html 실행 parcel index.html 이런식으로 실행하면 parcel이 자동으로 다시 빌드하고 핫리로드도 지원합니다. 그냥 진입점 파일만 지정해주면 됩니다. 개발 환경 parcel은 옵션을 건드릴게 없습니다. 그게 장점이라면
next.js에 Styled Components 적용을 위한 .babelrc 설정
프로젝트의 최상위 경로에 .babelrc 파일을 생성하고 다음 내용을 입력한다.