swc 딥다이브
— Rust로 다시 쓴 "초고속 웹 컴파일러" 플랫폼의 설계

1프로젝트 한줄 요약

이 레포가 무엇을 하는 물건인가.

swc는 컴파일러 + 라이브러리다. Rust 사용자에게는 swc_ecma_parser 같은 crate로, JS 사용자에게는 @swc/core npm 패키지로 동시에 제공된다. 핵심 철학은 "작게 쪼갠 crate를 조합"이다 — 파서만, 코드젠만, 압축기만 따로 골라 쓸 수 있다. 현재 워크스페이스에는 약 120개의 crate가 있고, 각각 파싱·AST·visitor·변환(ES2015~ES2022)·모듈·React·TypeScript·CSS·HTML·XML·플러그인 런타임을 담당한다.

2왜 주목받는가

트렌딩 이유 · Babel·esbuild 등 경쟁 대비 장점.

JS 빌드 도구 시장은 오래 Babel(변환)+Terser(압축)+tsc(타입) 조합이 표준이었다. swc가 꾸준히 주목받는 이유는, 이 셋이 모두 JS로 작성돼 대형 프로젝트에서 느리다는 고질병을 Rust 네이티브로 정면 돌파했기 때문이다. 첫째 압도적 속도, 둘째 Babel 호환 변환 + TypeScript + 압축 + 번들 + 플러그인을 한 플랫폼에, 셋째 Next.js 채택으로 인한 사실상의 표준화다.

3기술 스택 전체 지도

코어(Rust)·바인딩(Node/Wasm)·인프라 각각.

① 코어 — Rust 컴파일러 엔진

swc의 본체는 100% Rust이며, 하나의 Cargo 워크스페이스 안에 약 120개 crate가 들어 있다. crate 이름이 곧 역할을 말해 준다 — swc_ecma_*는 JavaScript/TypeScript(ECMAScript), swc_css_*는 CSS, swc_html_*는 HTML 처리다.

② 바인딩 — JS에서 쓰게 만드는 다리

Rust 코어를 JavaScript 세계로 노출하는 층이다. bindings/ 디렉토리에 모여 있고, 네이티브(Node)와 WebAssembly 두 길이 있다.

③ 플러그인 · 인프라 · 빌드

4아키텍처 심화 분석

소스 → 파서 → AST → visitor/fold 변환 → 코드젠, 그리고 바인딩.

컴파일러 파이프라인 한눈에

swc는 전형적인 3단계 컴파일러 파이프라인이다. ① 소스 텍스트를 토큰으로 쪼개고(lexer) 트리로 조립한다(parser → AST). ② AST를 여러 변환 패스(pass)에 차례로 통과시킨다. ③ 최종 AST를 다시 코드 텍스트로 출력한다(codegen). JS 사용자가 @swc/core를 호출하면 napi/wasm 바인딩을 거쳐 이 Rust 파이프라인이 돈다.

visitor / fold 패턴 — swc 변환의 심장

모든 변환은 AST를 재귀적으로 순회(traverse)하며 노드를 건드리는 방식으로 동작한다. swc는 이를 세 종류의 트레이트로 제공한다. 직접 트리를 재귀하는 코드를 짤 필요 없이, "내가 관심 있는 노드 타입의 메서드만 오버라이드"하면 나머지 순회는 자동으로 처리된다(swc_ecma_visit의 매크로가 생성).

// 모든 식별자 `foo`를 `bar`로 바꾸는 변환 패스
use swc_ecma_ast::Ident;
use swc_ecma_visit::{VisitMut, VisitMutWith};

struct RenameFoo;

impl VisitMut for RenameFoo {
    // Ident 노드를 만날 때만 개입 — 나머지 순회는 자동
    fn visit_mut_ident(&mut self, n: &mut Ident) {
        n.visit_mut_children_with(self); // 자식 먼저 순회
        if &*n.sym == "foo" {
            n.sym = "bar".into();
        }
    }
}

resolver · hygiene · fixer — 3대 기반 패스

swc_ecma_transforms_base에는 다른 모든 변환이 의존하는 세 가지 핵심 패스가 있다. 이름이 같은 변수라도 스코프가 다르면 다른 변수로 구분해야 하는 위생(hygiene) 문제를 푸는 장치다.

핵심 설계 패턴 정리

5디렉토리 구조 해부

Cargo 워크스페이스(crates/) + JS 바인딩(bindings/·packages/).

6학습 포인트 (기술별)

대규모 컴파일러를 Rust로 설계하는 법에서 무엇을 배우나.

A. 컴파일러 3단 파이프라인 — 파서 / 변환 / codegen

swc는 "텍스트 → AST → 변환 → 텍스트"라는 컴파일러의 정석 흐름을 가장 깔끔하게 보여 주는 실전 코드다. 각 단계가 독립 crate라 경계가 명확하다. swc_ecma_parser로 입력을, swc_ecma_codegen으로 출력을 다루고, 그 사이를 변환 패스가 채운다. 컴파일러 강의의 추상 개념을 실제로 수백만 명이 쓰는 코드로 확인할 수 있다.

B. 방문자 패턴 — 트리를 안전하게 순회·변환

AST 같은 트리를 다룰 때 매번 재귀 코드를 짜면 실수가 잦다. swc의 Visit/VisitMut/Fold는 "순회는 프레임워크가, 개입은 내가"를 구현한 모범 사례다. 읽기/제자리 수정/소유 교체의 세 변형이 각각 언제 적합한지를 코드로 익히면, 다른 언어의 AST·DOM·설정 트리 작업에도 그대로 옮길 수 있다.

C. Rust 모노레포 / 워크스페이스 설계

120개 crate를 하나의 워크스페이스로 묶고, [workspace.dependencies]에서 버전을 중앙 관리하는 방식은 대형 Rust 프로젝트의 표준 청사진이다. 더해 같은 레포에서 pnpm 워크스페이스(JS)와 Cargo 워크스페이스(Rust)가 공존하는 폴리글랏 모노레포 구성도 배울 점이다.

D. 네이티브 코어를 다언어로 노출하기 (napi + wasm)

swc의 가장 실용적인 교훈은 "빠른 코어는 Rust로, 사용성은 바인딩으로"다. 같은 코어 로직을 napi-rs로는 Node 네이티브 애드온, wasm으로는 브라우저/엣지용으로 동시에 내보낸다. 성능이 중요한 부분만 Rust로 짜고 나머지 생태계는 그대로 쓰는 이 전략은 esbuild·Biome·Rolldown 등 차세대 도구의 공통 패턴이다.

7시스템 / 환경 요구사항

"쓰는 것"과 "빌드/기여하는 것"의 요구사항이 다르다.

8직접 해볼 수 있는 실습 과제

난이도별 5단계 — 플레이그라운드부터 Wasm 플러그인까지.

9관련 기술 심화 학습 로드맵

6주 코스 — Rust 기초부터 컴파일러 플러그인까지.

10핵심 키워드 사전

본문·소스에 나온 용어 빠른 참조.

11참고 링크

• GitHub: swc-project/swc
• 공식 웹사이트·문서: swc.rs (설치 · 설정 · 플러그인 · Babel 마이그레이션)
• 온라인 플레이그라운드: play.swc.rs
• Rust API 문서: rustdoc.swc.rs · 파서: swc_ecma_parser
• 내부 구조: ARCHITECTURE.md · 기여 가이드: CONTRIBUTING.md
• 관련 도구: esbuild · Babel · napi-rs