React babel과 webpack, create-react-app

에듀캐스트 장고&리액트 강의를 듣고 정리하는 글이다.

다양한 babel preset

babel-preset-es20152015: ES6 babel-preset-es20152016: ES7 babel-preset-es20152017: ES8 babel-preset-env

• 디폴트 동작으로 ES6이상의 preset을 적용하여, ES5로 transpiling(호환성 맞춰주는 듯)
• 개별 지정보다 본 preset을 권장

webpack (modue bundler)

javascript, jsx, css, sass, less, es6, 이미지, HTML, 폰트 등 거의 모든 것이 모듈이 될 수 있으며, 하나의 파일(bundle)로 묶을 수 있다. 모듈성과 네트워크 성능 향상할 수 있다.

특징

• 코드를 필요할 때, 로딩 가능
• Minifying: 불필요한 코드, 공백/줄바꿈, 긴 이름 등을 줄여, 파일 크기 줄이기
• HMR(Hot Module Replacement): 개발모드에서 원본 소스코드 변경을 감지하여, 변경된 모듈만 즉시 갱신

지원 Loaders

• babel-loader: ES6나 리액트 코드를 transpiling
• css-loader: 설정에 따라 postcss-loader, sass-loader를 추가로 설정. css를 HTMl내에서 엘리멘트를 포함시킬 필요없이 JS/JSX단에서 임포트하여 React 컴포너트에 즉시 적용 가능하다.

필요한 유틸리티 및 라이브러리 설치

• 유틸리티 설치 npm install –global yarn yarn global add webpack webpack-cli

• 개발 시에 필요한 라이브러리 설치 yarn add –dev @babel/core babel-loader @babel/preset-env @babel/preset-react

• 프로덕션에서 필요한 라이브러리 설치 yarn add react react-dom