Vite에 대해서

최근 Vite를 경험해볼 수 있는 경험이 있었다. 가장 기본적인 비주얼 스튜디오 코드로 가장 기본적인 웹 사이트를 제작하기 위해 아무 폴더에 html, css, js 파일을 만들어 놓고 만들던 때에서 한단계 더 체계적으로 프로그래밍을 할 수 있게 되는 경험을 받았다...

 Vite는 빌드 도구 및 개발 서버이다. React와 같은 라이브러리가 아니였다. 라이브러리는 일반적으로 코드 조각이나 기능을 재사용하기 위해 사용되는 소프트웨어 모듈을 의미하는 반면, Vite는 웹 어플리케이션을 개발하고 배포하기 위한 개발 도구 중 하나이다.

---

왜 Vite를 쓰고 놀랐는가?

1. 빠른 개발 속도 : Vite는 개발 서버에 HMR(Hot Module Replacement)을 사용하여 코드 변경 시 실시간으로 페이지를 업데이트하며, 빠른 개발 피드백을 제공한다.

(여기서 HMR이 무엇인가? 🤔)

예를 들어 게임에서 캐릭터를 조종하고 있는데, 캐릭터의 무기를 바꾸고 싶을 때마다 게임을 껐다 키면서 바꿔야 한다면 얼마나 번거로울까? 그런데 만약 게임 내에서 영웅의 무기를 실시간으로 바꿀 수 있다면 편리하지 않겠는가?

이것이 HMR의 개념과 비슷하다. 마치 React의 Virtual DOM과 비슷한 원리이다!

 

2. 최적화된 빌드 : Vite는 빌드 시간을 최적화하여 배포 파일을 생성하며, 빠른 로딩 속도를 유지한다.

 

3. ESM(ES Modules)지원 : Vite는 모듈 로딩을 위해 ES Modules을 사용하며, 브라우저가 최신 자바스크립트 모듈 시스템을 지원하는 경우 더 빠르게 로딩이 된다. 

(여기서 ESM이 무엇인가?🤔)

ESM는 EcmaScript Modules의 약자이다. 자바스크립트에서 코드를 모듈 형태로 구조화하는 방법이다...와닿지 않는다.

좀 더 쉽게 설명하면, ESM은 코드를 작은 조각들로 나누어서 필요할 때 가져다 쓸 수 있게 도와주는 거다.😀

예를 들어, 너의 코드가 다양한 기능을 가지고 있는데, 그 중에서 하나만 필요한 상황이 있다고 생각해보자.

ESM 없이 모듈 사용

ESM 이용한 모듈 사용

https://ko.vitejs.dev/

만약 ESM이 없다면 수 많은 모듈 사이에서 성능 병목 현상이 발생되는데, ESM을 사용하면 그 하나의 기능만 불러와서 사용할 수 있다. 그래서 필요한 부분만 효율적으로 사용할 수 있고, 코드가 불필요하게 커지지 않는다.

ESM은 자바스크립트 코드를 각각의 작은 조각(모듈)으로 나눠서 필요한 때에 가져와 사용하게 해주는 편리한 방법이라 생각하면 된다.

 

Vite는 어떻게  작동되는가?

1. ESM 기반 개발 서버 : Vite는 개발 서버에서 브라우저에서 직접 사용 가능한 형태로 모듈을 서빙한다. 이로써 초기 로딩 속도를 향상시킨다.

(흠...조금 더 와닿게 설명을 해보자.🥹)

자, 우리가 웹사이트를 만들 때, 자바스크립트 코드를 작성하잖아? 그 코드를 브라우저에서 실행하려면 그 전에 코드를 어떻게 처리하고 가져와야 할지 생각해야 해. 일반적으로 코드를 처리하는 과정이 필요하고 그 후에 코드를 브라우저에 가져와야 하는데, 이런 과정이 조금 시간이 걸릴 수 있다.

그런데 Vite는 좀 다른 방법을 사용한다. 그냥 웹페이지를 열 때, Vite는 우리가 작성한 코드를 브라우저에서 바로 가져다가 실행할 수 있게 만들어 준다는 것이다!

이렇게 하면 코드를 처리하고 가져오는 단계를 건너뛸 수 있다는 것이다!

와우! 그래서 웹 사이트를 더 빠르게 볼 수 있다는 것이다!

 

2. 레거시 빌드 : 프로덕션 빌드 시, Vite는 모듈을 미리 컴파일하여 빠르게 실행 가능한 형태로 변환한다. 이렇게 변환한 파일들은 브라우저에서 최신 자바스크립트 모듈 시스템을 지원하지 않아도 작동한다.

(레거시 빌드가 어떤 빌드인가..?🤔)

먼저, '레거시(Legacy)'란 단어를 알아보자면, 레거시란 오래된 방식이나 시스템을 의미해. 예를 들어, 아직까지 사용되고 있는 과거의 기술이나 방법들을 레거시라고 할 수 있어. 그래서 레거시 빌드란, 과거에 사용되던 방식으로 프로그램을 빌드하는 것을 말해.이제 Vite의 레거시 빌드를 이해해보자...!프로덕션(실제 서비스)용으로 웹사이트를 만들 때, Vite는 자바스크립트 코드를 미리 처리하고 변환한다. 이렇게 변환된 코드들은 브라우저에서 사용하기에 더 빠르게 만들어주지. 더불어, 이렇게 변환된 코드들은 최신 자바스크립트 기능을 지원하지 않는 오래된 브라우저에서도 잘 작동하는거지.간단히 말하면, Vite의 레거시 빌드는 프로덕션용으로 웹사이트를 더 빠르게 만들어주고, 오래된 브라우저에서도 잘 작동하게 해주는 것이다.

 

Vite를 사용해보자.

1. Vite설치

* NPM : npm create vite@latest* Yarn : yarn create vite* PNPM : pnpm create vite

 

이후에는 프롬프트 창에 출력된 메시지를 따라간다.

 

그 후, 원하는 프로젝트 폴더로 이동하여  npm run dev 명령을 실행하여 프로젝트를 브라우저에서 열 수 있다.

 

프로젝트의 이름이나 사용하려는 템플릿을 직접 지정할 수 있다.예를 들어, Vite + Vue 프로젝트를 만들고 싶다면 다음과 같이 입력할 수 있다.

 

*프로젝트 생성# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, '--'를 반드시 붙여준다
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

https://ko.vitejs.dev/

이렇게 Vite에 대해서 알아보았다. 정말 유용한 개발 도구인 것 같다...