[통합개발도구 이용]

• Create React App : single-page app을 만들때 사용하는 도구
• Next.js: Node.js를 사용한 server-rendered website 만들때 사용하는 도구
• Gatsby : static content-oriented website를 만들때 사용되는 도구

: npm 라이브러리 이용, 이른 실수 발견, live-editing, 결과물 최적화를 가능하게 함

• npm run eject 해보면 빌드를 위한 안의 패키지들을 확인해볼수 있다

[바닥부터 올릴 때 필요한 툴들]

• Package Manager : 다른 라이브러리의 쉬운 활용을 위해 Yarn 또는 npm 사용

• bundler : 사용자가 모듈 코드를 작성하고 작성한 코드의 최적화 로딩 시간을 위해 **webpack이나Parcel**의 사용

• compiler : modern JavaScript 코드를 작성하고 지원하지 않는 브라우저에서 작동하게 하기 위해 **Babel**을 사용.

• production 을 위한 설정

  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  new webpack.optimize.UglifyJsPlugin()
  

• 정리

  • 필수사항
    • Package Manager
    • Bundler
    • Compiler
  • 개발 편의성을 위한 선택 사항
    • Lint
    • Live Dev Server

[바닥부터 올려보기]

[Package Manager]

• 초기화

  $ npm init -y
  

[Webpack을 이용한 번들링]

• 설치

  $ npm install --save-dev webpack webpack-cli