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 난독화, 압축, 복사, 특정 텍스트 추출, 별칭 등 부가 작업 등등 후처리를 한다.