들어가며
타입 관련 파일명을 변경한 뒤, import 구문 수정한 커밋을 누락한 채 배포했다.
"타입 에러가 발생해서 빌드가 실패했겠지?"라고 생각했는데, 예상과 다르게 배포가 문제없이 진행되었다.
"왜 타입 에러가 있었는데도 빌드와 배포가 성공한 걸까?" 🤔
이 궁금증을 해결하기 위해 CRA와 Vite의 빌드 과정을 비교해 보았다.
나의 착각 : 타입 체크는 자동으로 수행될 거야!
CRA와 같이 Vite도 프로덕션 빌드에서 타입 체크를 수행할 것이라고 생각했다. 즉, 타입 에러가 있으면 빌드가 실패할 줄 알았다.
하지만 Vite는 타입 체크를 하지 않고, 트랜스파일링(코드 변환)만 수행하기 때문에 타입 에러가 있어도 빌드가 가능하다는 걸 공식 문서를 통해서 확인할 수 있었다.
Vite는
.ts파일에 대해서 트랜스파일링만 수행하며, 타입 검사는 IDE와 빌드 프로세스에서 수행된다고 가정합니다. Vite 공식 문서 링크
Vite는 왜 .ts 파일의 타입을 검사하지 않을까?
Vite의 목표는 빠른 실행 속도
Vite는 빠른 실행 속도를 위해서 TypeScript 코드를 빠르게 JavaScript로 변환하는 트랜스파일링만 수행하고, 시간이 많이 걸리는 타입 검사는 제외했다.
타입 검사는 왜 시간이 많이 걸릴까
TypeScript는 모듈 간 관계를 분석하기 위해서 AST(Abstract Syntax Tree, 추상 구문 트리)를 생성하여 타입을 분석한다. 파일 단위가 아니라 전체 코드를 분석해야 하기 때문에 타입 검사는 시간이 오래 걸릴 수밖에 없다.
빌드 속도 비교 : 타입 검사는 진짜 오래 걸릴까?
타입 검사가 실제로 얼마나 느린지 확인해 보고 싶어서 직접 측정해 보았다.
비교 방법
터미널에서 time 명령어를 사용하여 빌드 속도를 측정했다.
타입 체크 없이 빌드 측정 :
time vite build타입 체크 포함 빌드 측정 :
time (tsc --noEmit && vite build)참고 :
tsc --noEmit이란?이 명령어는 타입 체크만 수행하고, 결과 파일(
.js)을 생성하지 않는다.
결과 : 타입 체크 포함하면 빌드 시간 350배 증가!
Vite는 파일 단위로 빠르게 트랜스파일링하지만, 타입 체크는 전체 코드를 분석해야 해서 속도가 느리다는 걸 확인할 수 있었다.
Vite 프로젝트에서 타입 검사는 언제 해야 할까?
Vite는 타입 검사가 포함되어 있지 않지만, 우리는 언제 타입 체크를 하는 게 좋을까?
로컬 개발 환경
IDE(VS Code)에서 실시간 타입 체크
tsc --noEmit --watch로 수동 검사
CI/CD 단계에서 체크
PR시 자동 타입 체크 실행하여, 타입 오류 발생 시 머지되지 않도록 설정
Vercel 배포 시
npm run tsc --noEmit && vite build설정
마무리 : 빠른 빌드 속도가 말해주는 것!
Vite를 사용하며, 빠른 빌드 속도가 단순한 최적화가 아니라 타입 검사를 제외한 결과라는 사실을 알게 되었다. 빠른 빌드는 기존에 수행하던 작업을 생략했기 때문에 가능했던 것이었다. 앞으로 개발 환경 세팅 도구를 확인할 때는 ‘빠르다’에서 그냥 넘어가지 말고, 그 속도가 어떻게 만들어졌는지, 어떤 작업이 포함되고 빠졌는지를 꼼꼼히 살펴봐야겠다. 그리고 빠른 속도와 안정성이라는 선택 속에서 프로젝트에 맞는 균형을 찾는 것이 중요하다는 걸 배웠다.