[TypeScript] yarn + Vite + TS로 웹 개발 시작하기

들어가기

yarn + Vite + TS로 웹 개발 시 진행하는 절차를 기록하려고 한다.

최근까지 작업한 이세계 MBTI는 JS -> TS로 마이그레이션 한 거지, 처음부터 작업한 건 아니었다.

이번에 CSS 및 반응형 작업을 해보기 위해 갱규님과 작업을 새로 하게 되어 바로 TS로 진행하기로 했다.

 

대부분 TS 강의가 TS 문법 및 개념 설명에 그쳐서 실질적으로 웹 개발에 만날 여러 에러들이 기대된다 ^_^...

 

프로젝트 생성하기

Vite와 CRA에 대해서도 좀 더 스터디 해봐야겠지만, React 공식 문서에서 CRA가 빠진지 꽤 되었고 Vite가 훨씬 성능이 좋기 때문에 최근에는 Vite가 더 많이 사용되고 있다. 최근 개발 흐름이 Vite로 넘어가고 있어서 나도 공부해보고자 Vite를 써보고 있다.

 

yarn create vite

이미 완성했는데 기록하려고 새로 판 거라 Project name은 그냥 디폴트로 했다.

사용할 프레임워크를 골라주고 엔터를 누르면 다음으로 넘어간다.

여기서는 variant, 변형이나 버전을 선택한다.

나는 TypeScript + SWC를 선택했다.

 

SWC(Speedy Web Compiler)는 Rust라는 언어로 제작된, 컴파일과 번들링 모두 가능한 빌드 툴이다.

 

컴파일이란 어떤 언어로 작성된 코드를 동일한 기능을 하는 다른 언어의 코드로 변환하는 것을 말하고,

번들링은 웹 애플리케이션 개발에 필요한 여러 흩어진 파일들을 모아 압축해 하나 혹은 최적의 소수 파일로 결합하는 것을 말한다.

 

단순 컴파일러가 아니라 Rust 기반의 플랫폼이라고 이해해야 하는 것 같다.

이 SWC는 매우 속도가 빠른데, 병렬 처리를 고려하는 Rust의 특성 때문이라고 한다.

싱글 스레드 언어인 JS로 작성된 Babel과 달리 SWC는 동시에 여러 파일을 변환하기에 빠르다는 것!

 

그래서 단순 TypeScript보다 컴파일 속도가 빠른 TypeScript + SWC로 설정하는 것이 훨씬 좋다.

바로 설치 완료!

yarn dev로 실행 전 Node.js에서 type 정의를 포함한 패키지인 @types/node를 추가하고 VSC를 재실행한다.

yarn add @types/node

 

그러면 에러(cannot find module '@vitejs/plugin-react-swc' or its corresponding type declarations.)가 지워진다.

 

---

 

참고

https://velog.io/@jwkwon0817/typescript-swc

https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/

https://stackoverflow.com/questions/71286740/cannot-find-module-vitejs-plugin-react-or-its-corresponding-type