Repo 생성

• [x] github 컨벤션 수립 후 branch protection rule 지정
• [ ] webpack, babel + ts
  • [x] ts
  • [ ] babel
    • 반드시 필요한가?
      • emotion 관련 필요 확인
        • ⚠️ emotion babel plugin 사용을 위해 babel/core 설치필요한가?
  • [ ] webpack
• [ ] eslint, prettier

TS 세팅

• 내 설정

Webpack 세팅

[core 설치]

npm install -D webpack webpack-cli webpack-dev-server

• webpack : 번들 작업을 하는 웹팩의 코어
• webpack-cli : 웹팩 터미널 도구, 웹팩을 커맨드 라인에서 사용
• webpack-dev-server : 웹팩을 메모리 상에 빌드하여 개발 서버를 구동

[ loader 및 플러그인 ]

<aside> 💡 npm i -D ts-loader css-loader style-loader file-loader html-webpack-plugin **fork-ts-checker-webpack-plugin**

</aside>

❓ loader와 plugin은 무슨 차이일까?

• 단순히 비교하면 번들이 생성 되기 전(빌드 전)에 쓰이냐, 후에 쓰이냐로 구분할 수 있다
• loader는 webpack으로 빌드를 진행하기 전/진행 중에 개별 파일들(빌드 과정에 포함되는 각 파일들)에게 적용하기 위해 사용된다
• plugin은 번들이 생성 된 후 결과 파일에 적용하기 위해 사용된다. 번들된 js 난독화, 압축, 복사, 특정 텍스트 추출, 별칭 등 부가 작업 등등 후처리를 한다.