구름 풀스택 과정을 하면서 항상 의문점이 있었다
Vite
Vite로 프로젝트를 빌드했다는 이야기를 많이 들어서 항상 그게 뭐인가 빌드툴이라는 이야기를 유투부에서 본것 같은데 흠...
하면서 언젠간 한번 제대로 찾아보고 빌드과정을 겪어봐야겠다는 생각을 했었습니다.
그러던 중 새로운 프로젝트를 하게 된 계기가 생겼는데
친구의 학교 과제를 호기심에 따라서 하게 된 것이었어요 !
간단한 테이블 과제였는데 이번 기회에 Vite로 React프로젝트를 만들어보고 vercel로 정적인 배포를 해볼까 ?
AWS의 벽에 한번 부딪힌 후 배포에는 막연한 두려움이 있었는데 vercel에서 제공하는 배포는 정적인 웹사이트를 간단하게 배포해준다고 하더군욥
해서
yarn create vite {프로젝트명}
입력 하면
이렇게 프레임워크의 종류를 고를수 있어요
React를 고른 경우엔
이렇게 TS와 JS중 선택해주시면 됩니다.
SWC는 간단하게 말씀 드리자면
- Vite로 프로젝트를 생성하면 Vite가 무거운 Webpack을 대체하게 됩니다
- SWC는 Rust(병렬처리)로 작성 된 컴파일러 + 번들러의 역할을 하는데,
병렬처리를 한다면 동시에 여러 파일을 변환할수 있습니다.
즉, 병렬처리가 불가 한 Javascript로 작성 된 Babel과 같은 역할을 하지만 SWC는 그것을 대체하여 더욱 빠르게 이용이 가능하다고 합니다.
(저도 아직 사용해보진 않았습니다.)
필요한 것들을 쉽게 선택해주시면 됩니다
저도 저에게 필요한 프로젝트를 만들었어요 !
테이블 프로젝트는 이미 완성되어서 예시를 보여드릴게요
이런 모양인데 CRA로 만든 프로젝트와는 확실히 구성이 달라보입니다.
저의 경우엔
yarn install
yarn dev명령어를 순서대로 입력하여 로컬 서버를 열어주었고
CRA와 다르게 5173번 포트에서 프로젝트를 확인해볼수 있습니다 !
이런 화면이 뜬다면 프로젝트 생성 성공입니다 !
CRA로 만든 프로젝트와 동일하게 지지고 볶아 작업해주시면 되어요.
왜 이걸 써야하는건데~~
사실 이게 중요합니다 ..
CRA로도 문제없이 프로젝트를 진행해왔잖아요
저도 사실 좋다좋다 해서 경험해보는 것이라 다양한 자료들을 참고하여 Vite로 생성하는 프로젝트의 장점을 적어보려해요
일단 저는 vercel로 배포해본 경험이 있고,
프론트엔드를 CI/CD로는 아직 배포해본 경험은 없습니다
일단은 영상자료가 있어요
https://www.youtube.com/watch?v=M4CLvtCS2YU
영어영상이라 간단하게 해석해보면
-
CRA는 Webpack으로 웹을 번들링한다 라고 합니다
이 과정은 빌드할때 웹자체가 굉장히 무거워지고 변경사항이 반영되는 시간도 덩달아 느려진다 해요! -
리엑트 프로젝트를 SSR을 처리하고 싶은 경우가 있을텐데 (있나 ?..) CRA로 웹을 빌드하게 되면 세팅이 어렵다고 합니다 !
-
가장 핵심적인걸론 첫번째와 연관성이 있을것 같은데 용량이 너무 크다는 것입니다 !
그래서 제가 직접 테스트 해봤습니다
프로젝트 생성 시간
동일하게 React+Javascript 프로젝트로 테스트 하였습니다.
설치시간의 경우 데스크탑의 환경과 사양마다 다를수 있습니다
1. CRA
CRA로 프로젝트를 생성하면 바로 로컬에서 실행할수 있습니다
yarn create react-app {프로젝트명}명령어를 입력하고 타이머를 잽니다
항상 프로젝트 생성해두고 딴짓하다 와서 몰랐는데 생각보다 많이 걸리는군요 ?
yarn start바로 실행 가능한 프로젝트를 만들었습니다.
2. Vite+React
vite로 프로젝트를 생성하면 yarn을 추가로 다운받아줘야합니다.
yarn create vite {프로젝트명}을 입력하고 프레임워크 종류를 고르면 1초도 안되는 시간에 생성이 됩니다.
타이머를 누를 틈이 없었어요
그런데 이게 왠걸
yarn dev실행이 안됩니다 yarn을 한번 더 설치해주어야 합니다
yarn install설치 명령어 입력해주고 시간을 잽니다
짠 이렇게 실행 가능한 프로젝트를 만드는데 약 15초 정도 걸립니다
명령어 입력 시간까지 합치면 20초 정도 될것 같네요
그런데 절대적인 설치 시간이 덜 걸린다는 것은 용량도 작다는 의미가 아닐까요?
용량 비교
이렇게 이 둘의 환경이 아예 동일하진 않겠지만 작업이 가능한 환경을 만드는데 필요한 파일의 용량이 약 4배정도 차이가 나는 것을 볼수 있었습니다
여기까지 제 나름대로 테스트를 해보았습니다.
써보니 어떠신가요 ?
위에서 테이블 과제를 Vite + React 프로젝트로 해보았다고 말씀 드렸습니다.
체감상 저장할때 화면에 보여지는 변경점이 더 빠르게 적용 된다고 느꼈어요
작은 프로젝트일땐 이 차이가 미미하겠지만 사이즈가 커진다면 유의미한 결과를 낼 것이라고 생각이 들었습니다.
vercel을 이용하여 배포하였는데 이 과정에는 사실 CRA와 비교가 좀 어렵습니다.
제가 처음 해보았기 때문이죠 !
앞으로 Vite + React로 프로젝트를 생성해서 작업하게 될 것 같습니다.
추 후에 제가 느낀점을 적어볼수 있기를 바랍니다~~
최고 Vite야 고마워~
