브라우져별 지원 현황
- ES6+와 ES.NEXT의 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우져에서 문제 없이 동작 시키기 위한 개발환경을 구축할 필요성이 있다.
- 또한 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다 ES6모듈 (ESM)은 대부분의 모던 브라우져 에서 사용할 수 있지만, 별도의 모듈 로더를 사용하는것이 아직까지는 일반적이다.
- IE를 포함한 구형 브라우져는 ESM을 지원하지 않는다.
- ESM을 사용하더라도 트랜스 파일링이나 번들링이 필요한 것은 변함 없음
트랜스 파일러
같은 수준(레벨)의 언어를 변환하는 도구
e.g.) TypeScript → JavaScript, ES6 → ES5
- 최신 문법(JS, TS)을 브라우저나 런타임(Node 등)이 이해할 수 있는 코드로 변환(compile)
- 즉, “문법 번역기” 역할을 한다.
⚙️ 대표 종류
| 트랜스파일러 | 주요 기능 | 특징 |
|---|---|---|
| Babel | ESNext → ES5 변환, JSX 변환 | 플러그인·폴리필 풍부, 느리지만 유연 |
TypeScript Compiler (tsc) | TS → JS + 타입 검사 | 타입 안정성 확보, 느리지만 정확 |
| SWC | Babel 대체 (Rust 기반) | Next.js 기본 탑재, 매우 빠름 ⚡ |
| esbuild | 초고속 트랜스파일러 (Go 기반) | Vite 등에서 사용, 번들링까지 지원 |
| Sucrase | 빠른 TS/JSX 변환기 | 개발 서버용(검사 없음, 빠름) |
모듈 로더
여러 개의 JS 파일(모듈)을 불러오고 연결해주는 시스템 ⇒ 파일 간 의존성을 해결해주는 연결자
import,require()등을 해석해서 어떤 순서로, 어떤 모듈을 불러올지 결정한다.- 브라우저나 런타임에서 모듈 간 의존성 그래프를 해석하고 실행 한다.
⚙️ 주요 종류 / 모듈 시스템
| 시스템 | 문법 | 사용 환경 | 로더 종류 |
|---|---|---|---|
| CommonJS (CJS) | require(), module.exports | Node.js (기본) | Node.js 내장 로더 |
| ES Module (ESM) | import, export | 브라우저, Node (ESM 모드) | 브라우저 네이티브, Node 로더 |
| AMD (Asynchronous Module Definition) | define(['dep'], fn) | 구형 브라우저 (RequireJS) | RequireJS |
| UMD (Universal Module Definition) | CJS + AMD 혼합 | 브라우저 + Node 겸용 | 라이브러리 배포용 |
| SystemJS | 동적 import 지원 | 다양한 환경 호환 | System Loader API 기반 |
| Dynamic Import | import() | 최신 브라우저, Node | 런타임 동적 로더 |
