웹팩
- 모듈 시스템의 효율적인 사용을 가능하게한다.
- 파일을 압축하고 병합하여 서버로 요청하는 파일 숫자를 줄인다. → 로딩속도 개선
- 코드 스플리팅을 통한 로딩 속도와 성능 향상 ⇒ 필요한 정보에 우선순위를 두어 순서대로 로딩
- 웹 개발 작업 자동화가 가능하다. 작업 시 새로운 내용을 반영할 때, 새로고침을 클릭하지 않고, 자동으로 코드결과물이 브라우저에 반영되게 하는 것이 가능하다.
- 리액트의 jsx, 타입스크립트의 트랜스파일링을 돕는다.
- 프론트엔드 관련 코드들을 관리하여 하나의 파일로 만들어주는 기능을 통해, 개발 시 모듈화를 효율적으로 수행할 수 있으며, 필요에 따라 여러 파일로 나누는 작업을 수행하여 성능을 개선할 수 있다.
- 여러 파일 로더들과 플러그인을 통하여 하나의 파일 혹은 여러 개의 묶음 파일들로 만드는 과정을 통해 웹 브라우저가 서버로 요청하는 파일의 갯수를 줄일 수 있다.
- 대체제는 parcel, rollup, vite 등 많지만, 흔히 사용되는 CRA 의 기반이 되기때문에 바닥부터 이해하고 가는것이 좋을듯하다.
바벨
- TSconfig 에서도 Es 로 transpliling 을 해주는데 babel 은 transplie 뿐만 아니라 polyfill 까지해주기 때문
- tsc vs 바벨 트랜스파일러 둘 중 하나를 쓰면 되지 않나?
- 바벨은 자바스크립트 기능집합(ES3, ES5 등)을 명시하는 방법 대신, 지원해야 하는 환경을 나열하는 개선된 방식을 사용할 수 있음.
- 바벨은 polyfill 기능 뿐만 아니라 jsx 문법을 js 문법으로 처리하는 기능까지 하기 때문에 리액트 개발에서 없으면 안된다.
- 대체제로 swc-loader 웹팩 플러그인이 있고 성능도 바벨의 20배라는 엄청난 이점이 있지만, 아직 레퍼런스가 많이 없고, 채용공고에서도 사용하는 회사를 본 적이 많이 없어 바벨을 사용하려 한다.
- ts-loader vs @babel preset typescript + babel
- 바벨 7버전부터 ts 지원 ⇒ @babel/preset-typescript
- ts loader 사용시 타입체킹을 진행하기 때문에 컴파일 속도가 느림
- HMR(hot module replacement) 사용 불가능 (링크)
- babel + @... 으로 폴리필 효과를 챙길 수 있음
- babelrc 파일에 presets 배열 안에 들어가는 것들은 이름에 preset을 빼도 됨
- ex)
@babel/env === @babel/preset-env
@babel/proposal-class-properties 가 필요한 이유
- 아직 공식 스펙이 아닌 클래스의 기능들을 사용할 수 있음
- 클래스 내에서 instance 변수를 선언할 수 있음
- 클래스 내에서 화살표 함수를 멤버 메소드로 사용할 수 있음