개요
JavaScript 라이브러리를 개발하며 React, Vue와 같은 프레임워크를 제외하고 빌드와 관련된 여러 도구들의 관계를 정리하고자 포스팅한다.
1. WebPack
1 - 1. 웹팩이란?
웹팩은 웹 어플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축 해주는 모듈 번들러이다.
1. 자바스크립트에서의 모듈
자바스크립트에서의 모듈이란 특정 기능을 가진 코드들을 하나의 파일로 관리하는 것
// date.js
export const getDate() => new Date().valueOf();2. 웹팩에서의 모듈
웹팩에서의 모듈은 자바스크립트 모듈 뿐만이 아니라 HTML, JavaScript, Images, Font등 웹 애플리케이션을 구성하는 모든 자원들을 모듈이라고 한다.
3. 모듈 번들링
위 이미지처럼 여러 모든 모듈을 하나의 파일로 병합하는 행위를 모듈 번들링이라고 한다.
1 - 2, 웹팩의 등장 배경
- 파일 단위의 자바스크립트 모듈 관리의 필요성
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
1. 파일 단위의 자바스크립트 모듈 관리의 필요성
자바스크립트의 변수 유효 범위 (스코프)는 기본적으로 전역 범위를 기본으로 가진다. 즉 어디서든 변수에 접근할 수 있다는 말이다.
파일 단위로 자바스크립트 코드를 관리할 때 모듈화 하지 않으면 어떤 문제가 발생하는지 예를 들어 알아보자.
// module1.js
var foo = 10
// module2.js
foo = 20
// main.html
<body>
<script src="./module1.js"></script>
<script src="./module2.js"></script>
<script>console.log(foo) // 20 </script>
</body>위 코드에서 foo는 전역변수이기 때문에 어디서든 접근할 수 있고 값을 변경할 수 있다. 프로젝트가 커지고 이러한 변수가 많아진다면 남이 사용한 변수를 실수로 변경할 수 있는 문제등이 발생한다.
그리고 script의 순서를 바꾸면 foo의 값도 바뀌게 된다.
// main.html
<body>
<script src="./module2.js"></script>
<script src="./module1.js"></script>
<script>console.log(foo) // 10 </script>
</body>이러한 문제를 해결하기 위해 javascript 파일을 모듈로 관리하게 되었고, CommonJS, ESModule 등의 모듈 시스템이 만들어졌다.
웹팩은 다양한 모듈화 방식 중 ESModule 방식을 사용한다.
2. Vite
1. Vite란?
Vite는 네이티브 자바스크립트 모듈 (ESModule)을 기반으로 한 데브 서버이다. 이미 현대 프런트엔드 개발 생태계는 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있습니다. 그런데 왜 비트와 같은 도구들이 나왔을까요? 그 이유는 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포할 수 있기 때문입니다. 왜 빠른지 이해하기 위해서는 먼저 번들링과 자바스크립트 네이티브 모듈을 이해해야 합니다.
2. ESM (자바스크립트 네이티브 모듈)
ESM은 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미합니다. 만약 아래와 같은 코드를 웹팩과 같은 번들러 없이 브라우저에서 실행하면 에러가 발생합니다.
// app.js
import { sum } from "./math.js"
console.log(sum(10,20))
<script src="./app.js"></script>기존의 브라우저에서는 import와 export를 해석할 수 있는 능력이 없었습니다. 하지만, 이제는 script 태그에 아래와 같이 type="module" 속성을 추가하면 정상 동작하는 것을 볼 수 있습니다.
<script type="module" src="./app.js"></script>브라우저에서 import와 export를 소화할 수 있는 능력이 바로 ESM입니다.
3. Vite 특징
비트는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠릅니다. 500개 정도 되는 모듈을 갖고 있는 웹 서비스를 웹팩 데브 서버 (opens new window)와 비트로 비교해 본다면 실행 시간이 20 ~ 30배 이상 차이가 납니다. 웹팩 데브 서버는 처음 로컬 서버를 시작할 때 관련 있는 모듈들을 번들링 해서 메모리에 적재하는 시간이 필요하기 때문에 당연히 어느 정도의 시간이 필요합니다. 반면 비트는 번들링을 하지 않고 바로 서버를 실행하기 때문에 명령어를 실행함과 동시에 서버가 바로 구동됩니다.
3. Babel
1. Babel 이란?
Babel is a JavaScript compiler.
정확히는 babel 은 javascript 로 결과물을 만들어주는 컴파일러입니다.소스 대 소스 컴파일러 (transpiler)라고 불립니다.
2. ESNext and Legacy..
지금도 프론트엔드는 너무나도 빠르게 발전되고 있습니다. 심지어 최신 브라우져 조차도 지원하지 못하는 문법과 여러 기술들이 출연하고 있습니다. 새로운 ESNext 문법을 기존의 브라우져에 사용하기 위해서 babel 은 필수적입니다. 모든 사람들이 새로운 브라우져를 쓰면 좋겠지만, 슬프게도 아직도 많은 사람들이 예전 브라우져 예전 OS 를 사용하고 있습니다.
이런 하위 호환성은 외면하기에는 쉽지 않습니다. 이또한 babel 을 쓰는 강력한 이유가 됩니다. (babel-polyfill 부분을 참고하세요!)
3. polyfill
폴리필(polyfill) 은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미 합니다. 브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워 넣는다고 해서 polyfill 이라고 칭합니다.
babel 은 이러한 polyfill 을 손쉽게 지원하기 위해 babel-polyfill 기능을 지원합니다.
아까 이미 문법을 컴파일 해서 javascript 로 compile 한다고 했는데… 왜 polyfill 이 필요할까요?
babel 을 사용한다고 최신 함수를 사용할 수 있는 건 아닙니다. babel 은 문법을 변환하여 javascript 로 변환하는 transpiler 역할만 할 뿐입니다.
앞에서 설명한대로 polyfill 은 프로그램이 처음에 시작될 때 지원하지 않는 기능들을 추가하는 것입니다. 즉, babel 은 컴파일시에 실행되고 babel-polyfill 은 런타임에 실행되는 것입니다.
Reference
'TIL' 카테고리의 다른 글
| 2024.09.27 (6) | 2024.09.27 |
|---|---|
| Retry 전략 (7) | 2024.09.25 |
| 자바스크립트 비동기 처리 알아보기 (3) | 2024.04.01 |
| Windows 10 에어팟 2 케이스 충전 불가능 해결하기 (0) | 2024.03.29 |
| 싱글 스레드에서 비동기 요청이 가능할까? (1) | 2024.03.04 |