Vite와의 첫만남

 

Problem

원티드 프리온보딩 1일차 과제를 포크해서 깃 클론하고 평소처럼 npm start를 커맨드에 딱 쳤는데

이런 에러메세지가 뜨면서 실행이 안되는 현상을 발견했다

이거 왜안되징... 하고 당황하다가

프로젝트 폴더를 자세히 보니 vite.config라는 파일이 보였다

vite가 번들링 툴이라는 것은 어디서 주워들어서 알고만 있었는데, 이게 그 vite를 쓴 프로젝트인가? 싶어서 vite에 대해서 찾아보게 되었다

Solve

Package.json에 있는 이 명령어들이 vite 실행 명령어들이었다

npm run dev 하니까 이런게 뜨면서 잘 실행이 되었다

 

Vite랑 처음 만난 김에 Vite에 대해서 간단히 공부해보기로 했다

 

마침 코딩애플 교수님이 이미 유튜브에 Vite 영상을 올려놓으셔서 이 영상으로 살짝 입문을 해보았다

아래는 영상 요약한 내용

 

요약

현대 웹개발: npm을 이용해서 JS 라이브러리를 쉽게 관리한다

문제점

1. node_modules 폴더 용량이 계속 커짐
2. import/require 문법은 브라우저 친화적이지 않음

 

해결책 : 모든 JS 파일을 하나로 합쳐서 사용하기 (bundling)

장점

1. 실제 필요한 코드만 찝어서 합쳐줌 (용량 절약)
2. 결과물이 js 파일 하나임 (import, require 필요 없어짐)

따라서 npm을 쓸거면 bundling tool도 같이 쓰는 것이 좋다

 

가장 유명한 bundling tool : webpack

문제 : npm 라이브러리 많아지면 webpack bundling 오래걸림

그래서 나온 2세대 번들링 툴들! : vite, snowpack 등등

 

Vite 장점 (1) 빠르다

빠른 이유

1. (Go로 만든 빠른 bundler 라이브러리) esbuild를 썼기 때문
2. 라이브러리 설치하자마자 미리 bundle 만들어놓음
3. 소스코드는 필요한것만 건드림 (미리보기 띄울때 좋음)

Vite 장점 (2) HMR을 사용하므로 변경된 모듈만 반영시킬 수 있음

옛날 번들 방식 : 파일 하나가 수정되면 ⇒ 재번들링 해야함

요즘 번들 방식 : 파일 하나가 수정되면 ⇒ 변경사항만 반영하면 됨

 

Vite + React Project 만들기

npm create vite@latest

그다음에 나오는 설정 쭉쭉 골라주면 끝 쉬움

자세한 것은 공식 문서 참고!

https://vitejs-kr.github.io/guide/#index-html-and-project-root

 

 

TMI

Vite는 바이트라고 읽는 것이 아니라 비트라고 읽어야 한다고 한다

대충 프랑스어로 빠르다는 뜻

 

Reference

https://vitejs-kr.github.io/guide/#index-html-and-project-root

Vite 이야기(feat. Svelte) | 요즘IT

https://youtu.be/iX3Nu1FcZKA

 

---

번들링 툴에 대한 이해가 필수적인 것을 느껴서 공부를 해야겠다고 생각을 하고있었는데

마침 Vite를 만나게 되어서 간단하게 공부를 해보았다

번들링 툴은 웹팩밖에 몰랐는데 이렇게 툴이 많다는 것도 처음 알았다

다른 번들러에 대해서도 더 공부해보아야지~~~

 

더 읽을거리 

자바스크립트 번들러로 본 조선시대 붕당의 이해

https://yozm.wishket.com/magazine/detail/1261/