🌐
웹개발
SWC
Speedy Web Compiler
Rust 기반 JS/TS 컴파일러. Babel 대비 20배 이상 빠름.
📖 상세 설명
SWC(Speedy Web Compiler)는 Rust로 작성된 초고속 JavaScript/TypeScript 컴파일러입니다. Babel과 동일한 기능(트랜스파일링, 압축, 번들링)을 제공하면서도 싱글 스레드에서 20배, 멀티코어에서 70배 이상 빠른 성능을 자랑합니다.
SWC는 Next.js 12부터 기본 컴파일러로 채택되었으며, Vite, Parcel 등 주요 빌드 도구에서도 지원됩니다. Rust의 저수준 최적화와 효율적인 메모리 관리 덕분에 대규모 프로젝트에서도 빠른 빌드 시간을 유지합니다.
SWC의 핵심 기능으로는 ES6+ 트랜스파일링, TypeScript/JSX 변환, 코드 압축(minification), 그리고 플러그인 시스템이 있습니다. Babel 플러그인을 대체하는 SWC 플러그인은 Wasm으로 작성하여 크로스 플랫폼 호환성을 제공합니다.
Turbopack은 SWC를 기반으로 한 차세대 번들러로, Webpack 대비 700배 빠른 업데이트 속도를 목표로 합니다. 대규모 코드베이스에서 개발 서버 시작 시간과 HMR 속도를 획기적으로 개선합니다.
💻 코드 예제
// .swcrc 설정 파일
{
"$schema": "https://json.schemastore.org/swcrc",
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true,
"decorators": true,
"dynamicImport": true
},
"transform": {
"react": {
"runtime": "automatic",
"importSource": "@emotion/react"
},
"legacyDecorator": true,
"decoratorMetadata": true
},
"target": "es2020",
"loose": false,
"minify": {
"compress": {
"unused": true,
"dead_code": true
},
"mangle": true
}
},
"module": {
"type": "es6",
"strict": true
},
"minify": true,
"sourceMaps": true
}
// next.config.js - SWC 커스텀 설정
/** @type {import('next').NextConfig} */
const nextConfig = {
compiler: {
// Emotion 지원
emotion: true,
// Styled Components 지원
styledComponents: true,
// 프로덕션에서 React DevTools 제거
reactRemoveProperties: process.env.NODE_ENV === 'production',
// console.log 제거
removeConsole: process.env.NODE_ENV === 'production'
? { exclude: ['error', 'warn'] }
: false,
},
experimental: {
// Turbopack 사용 (dev 모드)
turbo: {
rules: {
'*.svg': {
loaders: ['@svgr/webpack'],
as: '*.js',
},
},
},
},
};
module.exports = nextConfig;
// 명령줄에서 SWC 직접 사용
// npx swc src -d dist --source-maps --minify🗣️ 실무 대화 예시
기술 미팅에서:
"CI 빌드 시간이 8분이나 걸리는데, Babel에서 SWC로 바꾸면 2분 안에 끝날 거예요. Next.js 12로 업그레이드하면 자동으로 SWC 쓰게 됩니다."
기술 면접에서:
"SWC가 Babel보다 빠른 이유는요?" - "Rust로 작성되어 네이티브 바이너리로 실행되기 때문입니다. JavaScript 런타임 오버헤드가 없고, Rust의 zero-cost abstraction으로 최적화됩니다."
코드 리뷰에서:
"이 Babel 플러그인 SWC에서 지원 안 되면 어떡하죠?" - ".swcrc에서 못 하면 next.config.js의 webpack 설정으로 Babel loader 추가할 수 있어요. 근데 대부분 SWC 빌트인으로 대체 가능합니다."
⚠️ 주의사항
- ⚠️ 일부 Babel 플러그인(예: babel-plugin-macros)은 SWC에서 지원되지 않습니다. 마이그레이션 전 사용 중인 플러그인 호환성을 확인하세요.
- ⚠️ SWC는 타입 체킹을 하지 않습니다. TypeScript 타입 검사는 별도로 tsc를 실행하거나 IDE의 타입 체커를 활용해야 합니다.
- ⚠️ SWC 플러그인 생태계는 Babel보다 작습니다. 커스텀 변환이 필요하면 Rust/Wasm으로 플러그인을 작성해야 할 수 있습니다.