0. 주제 선정하게 된 배경 :
CRA부터 먼저 알아보려 했는데, 모듈, webpack, babel 등의 개념부터 먼저 공부가 되어야 CRA나 VITE를 이해할 수 있을것 같다.
1. 필요한 개념정리
1-0. 의존성 설치
: npm이나 yarn 같은 패키지 매니저를 사용해서 필요한 라이브러리나 도구들을 설치해줌
1-1. 모듈
: 특정 기능을 담당하는 가장 작은 단위
- 자바스크립트에서의 모듈 : 성격이 유사한 기능들을 모아둔 하나의
js 파일 - 웹팩에서의 모듈 : js 파일 뿐만 이나라
HTML, CSS, images, font도 모듈로 봄
1-2. 번들(링/러)
: 모듈들을 하나의 파일로 묶어주는 것(병합/압축)
예) 모듈 번들러 : webpack
1-3. 빌드
: 모듈 번들링 + 이미지 최적화 + 코드 압축 + 트랜스파일링 + ... 을 합친 과정으로
실행 가능한 소프트웨어 산출물로 변환하는 과정
- 빌드는 왜 하는걸까?
- 번들링 : 하나의 번들로 결합하면 로딩시간이 최소화되고 네트워크 요청을 줄일수 있음
- 코드 최적화 : 코드를 최적화하면 성능 개선에 도움
- 호환성 : 다양한 브라우저 및 환경에서 동작할 수 있는 호환성이 있는 코드로 생성해줌
- 보안 : 난독화시키면 코드를 보호할 수 있음
1-4. 트랜스파일링(러)
: 컴파일링의 하위개념
주로 같은 언어내에서 다른 문법을 따르는 버전으로 변환하는 작업
1-5. 컴파일링(러)
: 소스 코드를 다른 형태로 변환하는 것
주로 고급언어에서 저급언어(기계어)로 번역/변환하는것을 가리킴
1-6. Babel
: Babel은 공식문서에서 자바스크립트 컴파일러라고 말함
Babel은 주로 트랜스파일링 작업을 수행하지만 어쨌든 트랜스파일링은 컴파일링의 일종이고
코드를 변환하고 컴파일링 작업을 수행하기 때문에
일반적으로 자바스크립트 컴파일러라고 표현함
- 트랜스파일링 작업?
ES6+ 자바스크립트 문법을 하위 버전의 문법으로 변환해줌 - 왜 필요할까?
브라우저간 호환성을 위해서!
- 구식 브라우저에서는 최신 자바스크립트 문법을 읽을 수 있게 하기 위해서
또는 브라우저가 지원하지 않는 자바스크립트의 특정 문법이나 타입스크립트, JSX등의 문법등을 모든 브라우저에서 읽을 수 있게 변환해줌
1-7. 빌드 도구
- 모듈 번들러 : webpack, Rollup, Parcel 등
- 자동화 도구 : Gulp, Grunt emd
2. 참고 :
삐약