Vite로 React + TS + SWC 앱 생성 후기

1. 특정 유튜브 콘텐츠를 필터링하여 보여주는 웹사이트를 GCP에 배포하여 운영하는데...

이 웹사이트는 npx create-react-app 으로 생성을 한 프로젝트이다.

새로운 버전을 배포할 때마다 느끼는 거지만 build를 하고 배포를 하고 확인하기까지의 시간이 정말 길다.

 

버그 제보를 받고 간단한 기능을 수정하는데 필요한 시간은 1분 남짓이지만,

이를 적용하고 배포하기까지는 수분이 걸리는 불쾌한 경험은 지금도 진행형이다.

 

GCP로 배포한 react app은 별도의 설정을 하지 않으면 새로운 버전을 배포할 때 "<" syntax 에러가 빈번하게 발생한다.

무료로 제공되는 범위 내에서는 한 번에 1개의 인스턴스만을 이용하는 것이 일종의 국룰이기 때문에

서버에 배포된 앱이 제대로 동작하는지 확인하기 위해서는 직접 배포하고 확인하는 수밖에 없다.

앱이 제대로 실행되지 않는 것을 발견하면 곧바로 수정을 해야하는데, build + 배포를 하기까지 수 분이 소요된다??...

 

(일일 이용자가 100명대이기 때문에 걱정할 필요가 없음에도 실전에서 많은 트래픽이 발생하고 있다는 망상을 하며)

피가 마른다.

 

build누르고 잠시 쉬러 갔다가, 배포하기 실행하고 잠시 눈 감고 편히 쉬다가 자리에 돌아오는 작업을 수없이 반복한다.

 

2. 프로그래머스에서 진행하는 2주의 리액트 프리온보딩에 참여한 적이 있다.

지금 생각해도 이는 정말 귀한 경험이었다. (추천해 준 J씨에게 감사를)

어떻게 React가 동작하고 잘 쓰기 위해서는 어떻게 고민하는 것이 좋을지에 대해 연사님과 함께 참가한 사람들이 이야기를 나누며 성장하는 프로그램이었다.

연사님께서는 Vite를 찬양을 하셨었다.

"Vite 한 번 써보면 다른거 못 써요." 라는 뉘앙스로 말씀하셨던 것 같다.

 

3. 그렇게 Vite를 써보자는 생각으로 React + TS + SWC 앱을 생성했다.

Vite도 빌드를 빠르게 돕지만 SWC는 더욱 더 빌드를 빠르게 도와준다.

(심플한 SWC 설명)

https://shape-coding.tistory.com/entry/SWC-SWC%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

Vite와 SWC가 빌드를 빠르게 도와주는 원리는 각각 GO와 Rust라는 멀티쓰레드 언어를 이용하여 코드를 컴파일하고 번들링하는 과정을 거치는 것이다.

 

create-react-app으로 생성한 앱은 JavaScript의 싱글쓰레드 방식을 이용한 webpack과 babel을 이용하기 때문에 컴파일링, 번들링의 속도가 느린데 반해,

GO와 RUST를 이용한 Vite + SWC는 수배에서 수십배 빠른 build를 가능토록 한다.

 

얼마나 빠르냐면,

인지 하기도 전에 이미 끝나있다.

너무 빠르다!