SWC(Speedy Web Compiler)?

❓ SWC(Speedy Web Compiler) ❓

SWC(Speedy Web Compiler)는 JavaScript/TypeScript 컴파일러이자 번들러이다.

 

이는 성능 향상을 목표로 개발이 되었는데, Rust로 작성이 되어 있다.

TypeScript와 JSX를 포함한 최신 JavaScript 기능을 빠르게 변화할 수 있는 성능을 제공한다.

 

🤔 SWC는 왜 개발이 되었는가 🤔

프론트엔드 개발을 해본 사람이라면, Babel을 들어봤을 거다.

JavaScript 생태계에서는 Babel을 주로 사용하는데, Babel은 JavaScript로 작성되어 있기에, 컴파일 속도가 느려질 수 있다.

특히나 대규모 프로젝트에서 빌드 시간이 상당히 길어질 수 있다.

💡 [참고] Babel 💡
: Babel은 JavaScript로 작성되어 있다. JavaScript는 해석형 언어로, 메모리 관리나 실행 속도 면에서 Rust에 비해 느릴 수 있지만, 매우 유연하여 다양한 플러그인과 미들웨어를 통해 코드 트랜스파일링을 쉽게 확장할 수 있다는 장점이 있다.

 

이를 해결하기 위해서 SWC가 개발되었는데, 성능 최적화를 위해서 Rust 언어로 작성되었다.

💡[참고] Rust💡
Rust는 고성능 시스템 프로그래밍 언어로, 빠른 컴파일과 메모리 관리에 유리하다.

 

그렇기에, 이 SWC는 빠른 속도를 유지하면서도 다양한 최신 JavaScript 기능과 TypeScript를 지원한다. 게다가 SWC가 기본적인 컴파일러 역할 뿐만 아니라, 다양한 요구 사항에 맞춰 기능을 확장하거나 커스터마이징할 수 있어서 확장 가능한 구조를 가지고 있다.

 

🤔 그럼 어디에서 사용해야 할까 🤔

SWC는 프론트엔드 개발의 React, Vue.js, Angular와 같은 프레임워크에서 TypeScript와 주로 사용된다. TypeScript는 정적 타입 검사로 코드 안정성을 높여주지만, 빌드 과정에서는 변환이 필요하다. 이를 SWC를 통해 매우 빠르게 처리할 수 있다.

 

변환이 필요한 이유는 아래에서 참고할 수 있다.

[TS] Typescript를 왜 쓸까?

 

백엔드에서도 SWC를 Node.js 환경에서도 사용할 수 있다.

예를 들어, 서버사이드 렌더링(SSR)에서 JavaScript 파일을 빠르게 처리해야 할 때, SWC가 성능상 이점을 제공한다.

SSR은 다음과 같다.

CSR과 SSR의 개념 및 동작 방식

 

SWC는 번들링 도구와도 통합되어 사용할 수 있는데, Webpack이나 Vite, Next.js 등과 같은 번들러 및 빌드 도구와 통합되어 사용할 수 있다. 예를 들어 Next.js는 SWC를 기본 트랜스파일러로 사용하면서도 기존 Babel 설정을 지원하는 등, 개발자 친화적인 생태계를 유지하고 있다.

💡 [참고] 트랜스파일러 💡
: 한 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어로 변환하는 프로그램이다. 

예시)
최신 JavaScript 기능의 경우 모든 브라우저에서 지원되지 않는다. 그렇기에, 트랜스파일러는 최신 문법을 더 오래된 브라우저에서도 사용할 수 있는 ES5 버전의 JavaScript로 변환하게 된다.

 

✅ 사용하는 이유 ✅

1. 속도
   : SWC의 가장 큰 장점은 속도이다. Babel과 비교했을 때 빌드 속도가 최대 20배까지 빠르다고 하며, 특히나 대규모 코드베이스에서 빌드 시간을 크게 단축할 수 있다는 장점이 있다.
2. 메모리 효율성
   : Rust로 개발된 덕분에 메모리 효율이 높아, 대규모 프로젝트에서 빌드할 때도 리소스 절약에 도움이 된다.
3. 유연성
   : 최신 JavaScript와 TypeScript를 지원하며, 플러그인 생태계를 통해 사용자 정의 확장이 가능하다. 이를 통해 개발자가 프로젝트의 요구에 맞게 SWC를 조정할 수 있다.