Vite를 사용해 React 프로젝트를 설정할 때마다 보이는 두 가지 선택지가 있다. 바로 TypeScript와 TypeScript+SWC.
이 두 옵션은 어떤 차이가 있기에 나뉘어 있을까?
단순히 옵션을 선택하는 것보다 그 차이를 이해하고 사용하는 것이 더 적절한 개발 환경을 구축하는데 도움이 될 것이다.
따라서 이번 포스팅에서는 TypeScript + SWC가 무엇인지, 그리고 이 두 옵션이 어떻게 다른지 정리해 보려 한다.
SWC란?
SWC는 "Speedy Web Compiler"의 약자로, Rust에서 개발된 초고속 JavaScript/TypeScript 컴파일러다. 기존 Babel을 대체하기 위해 설계되었으며, 다음과 같은 특징을 가진다.
- 컴파일러와 번들러 역할: Babel의 대체제로, JavaScript/TypeScript를 변환할 뿐만 아니라 일부 번들링 기능도 제공한다.
- 빠른 속도: Rust의 멀티스레드 처리 능력을 활용해, 대규모 프로젝트에서도 빠르게 작동한다.
- 타입 검사 미지원: SWC는 타입 검사를 수행하지 않고, 코드 변환에 집중한다.
Rust 기반의 SWC는 성능과 병렬 처리 기능 덕분에 기존 Babel이나 TypeScript 컴파일러(tsc)보다 최대 70배 빠른 성능을 제공한다고 알려져 있다.
TypeScript와 TypeScript+SWC의 차이
TypeScript만 사용하는 경우
TypeScript 컴파일러(tsc)를 사용해 코드를 변환하고 타입 검사를 수행한다. 이는 전통적인 방식으로, 안정적이고 완전한 TypeScript 지원을 제공한다.
- 장점: 안정적이고 완전한 언어 지원
- 단점: 빌드 속도가 느릴 수 있다.
TypeScript+SWC 옵션
SWC를 사용해 TypeScript를 컴파일하면 훨씬 빠른 속도를 제공한다. 특히 대규모 프로젝트에서 빌드 시간이 단축된다.
- 장점: 빠른 컴파일 속도와 효율적인 개발 환경
- 단점: 타입 검사를 별도로 설정해야 한다.
SWC가 빠른 이유
SWC는 Rust를 기반으로 설계되었다는 점에서 기존 자바스크립트 컴파일러와 차별화된다.
Rust는 병렬 처리를 고려한 언어로, 멀티스레드 환경에서 효율적으로 작동한다. 이를 통해 SWC는 여러 파일을 동시에 변환하여 속도를 극대화할 수 있다. 공식 문서에 따르면, SWC는 단일 스레드 환경에서 Babel보다 약 20배, 멀티 코어 환경에서는 최대 70배 빠르다고 한다.
Vite와 SWC의 결합 효과
Vite와 SWC의 조합은 개발 경험을 크게 향상시킨다. Vite는 빠른 HMR(Hot Module Replacement)을 제공하며, SWC는 빠른 컴파일을 통해 개발 속도를 높인다. 이 조합은 특히 대규모 프로젝트에서 유용하다.
결론
프로젝트의 요구 사항에 따라 두 옵션 중 적절한 것을 선택하면 된다.
- TypeScript: 타입 검사를 안정적으로 수행해야 하거나, 프로젝트 규모가 작을 때 사용.
- TypeScript+SWC: 빌드 속도가 중요한 대규모 프로젝트에서 사용.
Reference
