SWC란?
SWC(Speedy Web Compiler) 는 매우 빠른 웹 컴파일러 입니다.
1.
Rust 언어로 개발되어 높은 성능을 제공합니다.
2.
JS, TS 코드를 트랜스파일하고 컴파일합니다.
3.
기존 Babel과 TSC 보다 성능이 좋으며 대체 가능합니다.
4.
컴파일과 번들링 모두를 처리할 수 있습니다.
5.
병렬 처리를 통해 기존 도구보다 훨씬 빠른 속도를 제공합니다.
다만, Babel의 모든 플러그인과 호환되지 않으므로 적용 시 주의가 필요합니다. SWC는 현대적인 웹 개발에서 빌드 성능을 크게 향상시키는 도구로, 특히 대규모 프로젝트에서 유용합니다.
SWC가 tsc를 완전히 대체 가능한가요?
tsc와 SWC는 비슷한 역할을 하지만 몇 가지 중요한 차이점이 있습니다.
1.
컴파일 속도 : swc는 rust로 작성되어 tsc보다 훨씬 빠른 성능을 제공합니다. (대략 70배 빠른 성능차)
바벨보다도 20배 빠른 속도를 제공
2.
기능 범위 :
•
TSC : ts → js 로 변환하고 타입 검사를 수행합니다. 완전한 ts 지원을 제공
•
SWC : 주로 코드 변환에 초점을 맞추며, 타입 검사는 수행하지 않습니다.
3.
사용 목적
•
tsc : ts 공식 컴파일러로, 타입 검사와 코드 변환을 모두 수행합니다.
•
SWC : 주로 빠른 빌드 시간을 위해 사용되며, Babel의 대안으로 설계되었습니다.
4.
병렬 처리 : SWC는 Rust의 병렬 처리 기능을 활용하여 여러 파일을 동시에 변환활 수 있어 대규모 프로젝트에서 특히 유용합니다.
⇒ 결론적으로, tsc와 SWC는 TypeScript 코드를 JavaScript로 변환하는 역할을 하지만, SWC는 빠른 속도에 중점을 두고 있으며 타입 검사는 수행하지 않습니다. 프로젝트의 요구사항에 따라 적절한 도구를 선택해야 합니다
일반적으로 TSC + SWC 를 함께 사용하는 방식
1.
타입 검사 : tsc를 사용하여 타입 검사를 수행합니다. 이는 코드의 타입 안정성을 확보하는 데 중요합니다.
2.
코드 변환 : SWC를 사용하여 TS 코드를 JS 로 변환합니다.
3.
빌드 프로세스 설정 :
•
tsconfig.json 파일에서 "noemit" : true 옵션을 설정하여 tsc가 JS 파일을 생성하지 않도록 합니다.
•
SWC 설정을 위해 .swcrc 파일을 프로젝트 루트에 생성합니다.
4.
스크립트 설정 : package.json 에 다음과 같은 스크립를 추가합니다
{
"scripts": {
"type-check": "tsc --noEmit",
"build": "swc src -d dist"
}
}
JSON
복사
5.
개발 과정 :
•
npm run type-check 로 타입 검사를 실행합니다.
•
npm run build 로 SWC를 사용해 코드를 변환합니다.
이 방식을 통해 tsc의 강력한 타입 검사 기능과 swc의 빠른 컴파일 속도를 모두 활용할 수 있습니다.
Vite React 에서의 tsc + swc 설정
vite에서 swc를 사용하기 위해 @vitejs/plugin-react-swc 플러그인을 설치해야 합니다. package.json에 다음과 같이 설정합니다.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
export default defineConfig({
plugins: [react()],
});
JavaScript
복사
이 설정을 통해 SWC가 React 코드를 변환하도록 Vite에 지시합니다.