SWC: Rust 기반 초고속 웹 컴파일러

SWC(Speedy Web Compiler)는 Rust 기반의 확장 가능한 웹 플랫폼으로, Babel보다 수십 배 빠른 트랜스파일 속도를 무기로 Next.js, Deno 등 주요 프로젝트에서 채택되고 있다.

학습 목표

SWC의 설계 철학("Rust 기반 웹 플랫폼")과 포지셔닝을 이해한다
SWC가 Babel 대비 성능 우위를 갖는 기술적 근거를 설명할 수 있다
.swcrc 설정 파일을 작성하고 주요 옵션을 활용할 수 있다
SWC가 Babel과 호환되는 범위와 한계를 판단할 수 있다
SWC를 채택한 주요 프로젝트(Next.js, Deno, Vite)의 활용 방식을 파악한다

1. SWC란?

SWC 공식 사이트는 **"Rust-based platform for the Web"**이라는 문구로 시작한다. "번들러"나 "트랜스파일러"가 아닌 **"플랫폼"**이라는 이름을 사용한다는 점이 중요하다. SWC는 트랜스파일에 머물지 않고, 번들링과 미니파이까지 포괄하는 종합 빌드 플랫폼을 지향한다.

1.1 SWC의 핵심 특성

특성	설명
정식 명칭	Speedy Web Compiler
구현 언어	Rust (네이티브 컴파일, 메모리 안전성)
운영 주체	Vercel (Next.js를 만든 회사)
핵심 역할	트랜스파일(현재 주력) + 번들링(개발 중) + 미니파이
포지셔닝	Babel의 직접적 대체 + 느린 웹 빌드 도구 전체를 Rust로 재구현

1.2 SWC의 목표

SWC 프로젝트의 궁극적 목표는 느린 웹 빌드 도구 전체를 Rust로 다시 구현하는 것이다. 현재는 컴파일(트랜스파일)이 가장 성숙한 영역이며, 번들링(swcpack)은 아직 개발 중이다.

2. esbuild와의 비교

SWC와 esbuild는 "빠른 빌드 도구"라는 같은 영역에서 경쟁하지만, 설계 방향이 다르다.

비교 항목	SWC	esbuild
구현 언어	Rust	Go
주력 영역	트랜스파일 (Babel 대체)	번들링 (올인원)
번들러	swcpack (개발 중)	내장 (안정)
플러그인	Rust/Wasm 플러그인 지원	JS 플러그인 지원
운영 주체	Vercel	Evan Wallace (개인)
주요 채택	Next.js, Deno, Parcel	Vite, Snowpack
Babel 호환	높은 호환성 추구	부분적 호환

3. .swcrc 설정

SWC는 .swcrc 파일(JSON 형식)로 설정한다. Babel의 .babelrc와 유사한 구조를 의도적으로 채택하여 마이그레이션 비용을 낮추었다.

3.1 기본 설정 예시

json

{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    },
    "target": "es2020"
  },
  "env": {
    "targets": "last 2 Chrome versions"
  },
  "minify": false
}

3.2 주요 설정 항목

3.3 env.targets와 Browserslist

Babel의 @babel/preset-env처럼, SWC의 env.targets도 Browserslist 쿼리를 지원한다. 대상 브라우저에 따라 변환 범위가 자동으로 조절된다.

json

// 최신 Chrome만 지원 → 변환 최소화
{ "env": { "targets": "last 1 Chrome version" } }
// 결과: Arrow Function 유지, const/let 유지

// 오래된 브라우저 포함 → 많은 변환 적용
{ "env": { "targets": "Chrome 50" } }
// 결과: Arrow Function → function, const → var

4. SWC CLI 사용법

bash

# 설치
npm install --save-dev @swc/cli @swc/core

# 단일 파일 트랜스파일 (결과를 stdout에 출력)
npx swc src/index.ts

# 파일로 출력
npx swc src/index.ts -o dist/index.js

# 디렉토리 전체 트랜스파일
npx swc src -d dist

# 미니파이 포함
npx swc src/index.ts -o dist/index.min.js --config minify=true

# Watch 모드
npx swc src -d dist --watch

5. SWC와 Babel의 호환성

SWC는 Babel의 대체를 목표로 하며, 대부분의 일반적인 변환에서 Babel과 동일한 결과를 내놓는다.

5.1 호환되는 영역

영역	호환 상태
ES6+ → ES5 문법 변환	완전 호환
TypeScript 타입 제거	완전 호환
JSX 변환 (Classic/Automatic)	완전 호환
Browserslist 기반 타깃 설정	완전 호환
데코레이터 (레거시/Stage 3)	지원
CommonJS ↔ ESM 변환	지원

5.2 호환되지 않는 영역

영역	설명
커스텀 Babel 플러그인	Babel 플러그인을 SWC에서 직접 사용할 수 없다
특수 매크로/변환	babel-plugin-macros 등 일부 고급 플러그인 미지원
AST 접근	Babel의 visitor 패턴 기반 AST API와 호환되지 않음

5.3 마이그레이션 팁

SWC가 지원하지 않는 Babel 플러그인이 있다면, SWC와 Babel을 혼용할 수 있다. SWC로 기본 변환을 수행한 후, 특수 변환만 Babel 플러그인을 추가하는 방식이다.

6. SWC를 채택한 주요 프로젝트

6.1 Next.js

Next.js 12부터 Babel을 SWC로 대체했다. Next.js에서는 별도의 .swcrc 설정 없이 next.config.js에서 SWC 옵션을 제어한다.

javascript

// next.config.js
module.exports = {
  compiler: {
    // styled-components 지원
    styledComponents: true,
    // React 서버 컴포넌트
    reactRemoveProperties: true,
    // 프로덕션 console 제거
    removeConsole: { exclude: ['error'] }
  }
};

6.2 Deno

Deno는 TypeScript를 기본 지원하며, 내부적으로 SWC를 사용하여 TypeScript를 JavaScript로 변환한다.

6.3 Webpack (swc-loader)

기존 Webpack 프로젝트에서 babel-loader를 swc-loader로 교체하면 트랜스파일 속도를 대폭 향상시킬 수 있다.

javascript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts|jsx|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: { syntax: 'typescript', tsx: true },
              transform: { react: { runtime: 'automatic' } }
            }
          }
        }
      }
    ]
  }
};

6.4 Vite (plugin-react-swc)

Vite에서 @vitejs/plugin-react 대신 @vitejs/plugin-react-swc를 사용하면 Babel 대신 SWC로 React JSX를 변환한다.

javascript

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()]
});

7. SWC와 Turbopack

Vercel은 SWC를 기반으로 Turbopack이라는 차세대 번들러를 개발하고 있다. Turbopack은 Webpack의 후계자를 자처하며, SWC의 Rust 파서와 변환 엔진 위에 증분 컴퓨팅(incremental computation) 아키텍처를 얹어 극도로 빠른 번들링을 목표로 한다. Next.js 13부터 실험적으로 통합되었다.

핵심 정리

개념	핵심 내용
SWC	Rust 기반 웹 플랫폼. "느린 빌드 도구 전체를 Rust로 재구현"이 목표
현재 주력	트랜스파일(Babel 대체)과 미니파이(Terser 대체). 번들링은 개발 중
.swcrc	JSON 형식 설정 파일. Babel의 .babelrc와 유사한 구조
env.targets	Browserslist 연동. 대상 브라우저에 맞게 변환 범위 자동 조절
Babel 호환	대부분 호환되나 커스텀 Babel 플러그인은 직접 사용 불가
채택 사례	Next.js(12+), Deno, Webpack(swc-loader), Vite(plugin-react-swc)

다음 단계

다음 문서 06-Webpack.md에서 프론트엔드에서 가장 대표적인 번들러인 Webpack의 핵심 개념(Entry, Output, Loaders, Plugins, Mode)과 설정 방법을 학습한다.

SWC: Rust 기반 초고속 웹 컴파일러 ​

학습 목표 ​

1. SWC란? ​

1.1 SWC의 핵심 특성 ​

1.2 SWC의 목표 ​

2. esbuild와의 비교 ​

3. .swcrc 설정 ​

3.1 기본 설정 예시 ​

3.2 주요 설정 항목 ​

3.3 env.targets와 Browserslist ​

4. SWC CLI 사용법 ​

5. SWC와 Babel의 호환성 ​

5.1 호환되는 영역 ​

5.2 호환되지 않는 영역 ​

5.3 마이그레이션 팁 ​

6. SWC를 채택한 주요 프로젝트 ​

6.1 Next.js ​

6.2 Deno ​

6.3 Webpack (swc-loader) ​

6.4 Vite (plugin-react-swc) ​

7. SWC와 Turbopack ​

핵심 정리 ​

다음 단계 ​

SWC: Rust 기반 초고속 웹 컴파일러

학습 목표

1. SWC란?

1.1 SWC의 핵심 특성

1.2 SWC의 목표

2. esbuild와의 비교

3. .swcrc 설정

3.1 기본 설정 예시

3.2 주요 설정 항목

3.3 env.targets와 Browserslist

4. SWC CLI 사용법

5. SWC와 Babel의 호환성

5.1 호환되는 영역

5.2 호환되지 않는 영역

5.3 마이그레이션 팁

6. SWC를 채택한 주요 프로젝트

6.1 Next.js

6.2 Deno

6.3 Webpack (swc-loader)

6.4 Vite (plugin-react-swc)

7. SWC와 Turbopack

핵심 정리

다음 단계