react 개발자 취업 지원 준비[1.2]

두번째 질문 => (바벨의 역할과 Ts와의 연관성, 트랜스 컴파일러 및 번들링에 대한 지식이 있으신 분.) 에 대답하기 위해 웹팩을 먼저 공부해 보았다.

1. Webpack Guide 링크

   1. webpack is used to compile JavaScript modules. 웹팩 공식 Getting started의 첫 문장이다.

   2. Getting started

      기존 html head 태그에서 관리되던 <script src="https://unpkg.com/lodash@4.16.6"></script> lodash의 다운로드 스크립트를 node npm을 통해 다운로드 하여 js 파일에 import _ from 'lodash'; 명시 함으로써 global scope pollution 을 없애고 점점 복잡해 지는 모던 자바스크립트의 모듈 의존성을 도와줄 것이라는 말과 간단한 webpack.config.js 의 소개로 끝난다.

   3. Asset Management

      1. Loading CSS
      2. Loading Images
      3. Loading Fonts
      4. Loading Data

      loader 들을 통해 다른 종류의 데이터들을 js 파일 안에 종속 시킴으로써 의존성 관리를 도와준다는 내용. 번들링하는 과정에서 알아서 처리되어 서비스할때 제공된다.

   4. Output Management

      webpack.config.js를 통한 1개의 번들 파일이 아닌 여러개로 컨트롤 할 수 있다는 것을 보여주고 번들 파일의 갯수에 따라 html 파일을 자동 생성해주는 html-webpack-plugin, 쓰고있는 파일만 정리하고 캐싱관리도 가능한 clean-webpack-plugin 을 소개하고 마무리된다.

   5. Development

      디버깅환경에 대한 솔루션을 제공한다. 웹팩의 기본 설정인 inline-source-map과 webpack-dev-server, webpack-dev-middleware으로 자신의 개발환경을 커스터마이징 할 수 있도록 도와주는 플러그인을 소개한다.

   6. Code Splitting

      조금 부족한 느낌이 들어 갓로퍼트님 리액트 프로젝트 코드 스플리팅 정복하기 실습을 진행하고 왔다. webpack v4 부터 지원하는 dynamic import 기능으로 모듈을 비동기적으로 불러와 사용 할 수 있도록 도와준다(Promise 리턴). 서버사이드 랜더링, 라우터 코드스플리팅을 동시에 제공함 있어 생기는 문제들도 소개하고 어떻게 해결하는지 보여준다. 이 부분은 서비스 하는데 있어, 그리고 최적화에 있어 중요한 부분이기 때문에 따로 공부해 봐야겠다. 글이 2018년 글이기 때문에 현재 다른 솔루션들이 생겼는지도 찾아봐야 한다.

   7. Caching

      리소스 이름으로 캐싱을 하는 브라우저에게 파일에 변경이 있다고 알려주기 위해 리소스 이름에 contentHash 기능을 통해 이를 방지하는 방법(캐시 버스팅)을 알려준다. 그리고 node_module의 외부 의존 라이브러리들만 따로 vendors 번들에 담아 캐싱 할 수 있도록 하는 방법도 알려준다!

   8. Authoring Libraries

      라이브러리 메이커들에게 웹팩을 쓰면 좋은 점들을 제시한다. => 라이브러리 만들어 볼 때 참고해야 할듯

   9. Environment Variables

      production과 development 환경을 나누기 위한 webpack environment variables 사용법을 알려준다.

      webpack --env.NODE_ENV=local --env.production --progress
      
      // webpack.config.js
      const path = require('path');
      
      module.exports = env => {
        // Use env.<YOUR VARIABLE> here:
        console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
        console.log('Production: ', env.production); // true
      
        return {
          entry: './src/index.js',
          output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
          },
        };
      };

   10. Build Performance

       웹팩의 빌드 속도를 높이기 위해 해야하는 Best practice들을 소개한다.

   11. Content Security Policies

       CSP에 대한 내용

   12. Development - Vagrant

       Vagrant위에 webpack을 띄우는 방법과, 데브환경을 프로덕션 환경에 가깝게 만들기 위해 webpack-dev-server와 nginx를 함께 쓰는 방법을 소개한다.

   그 외 모듈을 import 하고 사용하지 않으면 의존성에서 제외해주는 Tree shaking에 대한 설명이나 Typescript와 함께 사용하는 방법 등을 알려준다. 어마어마하게 많은 기능들이 있기 때문에 하나하나 사용해 보면서 익혀야겠다!