Vite?

Vite는 프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 "비트" 입니다.)

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.

왜 사용하는걸까

기술의 발전으로 인해 웹사이트 파일의 양이 많아지고 복잡해지면서, 두 가지 주요 문제점이 발생했어요,

1.충돌과 오류 : 여러 개발자가 같은 서비스에서 작업할 때 변수나 함수 이름이 중복되어 충돌이 일어날 가능성이 높아져요.

2.속도 이슈 : 대규모 웹사이트는 많은 자바스크립트 파일을 사용하므로, 파일 전송 속도가 느려지고 네트워크 병목현상이 발생할 수 있어요.

이를 해결하기 위해 등장한 번들러는 여러 개의 파일을 하나로 묶어 전송 속도를 개선하고 충돌을 줄이는 역할을 하는데요,

대표적인 번들러로는 Webpack, Parcel, Rollup이 있으며, 이는 가독성과 유지보수를 유지하면서도 성능을 최적화하는 방법이에요.

그럼 무조건 Webpack을 사용하는것이 좋겠네?

Webpack은 오픈 소스 자바스크립트 모듈 번들러로, 여러 개의 자바스크립트 파일을 하나로 압축하고 최적화하는 라이브러리에요.

주된 장점으로는

• 파일 압축 및 최적화 : 여러 개의 자바스크립트 파일을 하나로 묶어 네트워크 비용을 줄이고 로딩 속도를 개선할 수 있습니다.

• 모듈화 개발 : 코드가 모듈 단위로 분리되어 가독성과 유지보수가 용이합니다.

• 브라우저 호환성 : 최신 자바스크립트 문법을 지원하지 않는 브라우저에서도 사용할 수 있도록 코드 변환이 가능합니다.

Webpack의 단점은 프로젝트 규모가 커질수록 빌드 속도가 느려진다는 점인데요,

특히, 파일 수가 많아질수록 Hot Reload 기능을 통해 즉시 반영하는 과정이 매우 느려져, 때로는 빌드가 1분 이상 걸리기도 해 아무래도 1초라도 더 아껴야 하는 상황에선 큰 애로사항이죠

그래서 나온 대안 Vite!

Vite는 빠른 개발 환경을 제공하는 최신 자바스크립트 빌드 도구로, 기존의 번들러들과 비교해 빠른 개발 속도와 최적화를 특징으로 합니다.

• 빠른 개발 속도 : Vite는 ESM(ECMAScript Modules) 방식을 사용해 로컬 개발 시 번들링을 하지 않고 소스 코드를 바로 제공하여 웹팩보다 20~30배 빠른 속도를 자랑합니다. 또한, Hot Module Replacement (HMR)를 지원해 개발 중 실시간으로 변경 사항을 즉시 확인할 수 있습니다.

•. Rollup 기반 프로덕션 최적화 : 프로덕션 빌드에서는 Rollup을 사용해 *트리 쉐이킹(tree-shaking)과 같은 최적화 기술을 적용하여 불필요한 코드를 제거하고, 결과 파일 크기를 최소화해요.

* 트리쉐이킹? : 마치 나무에서 불필요한 가지를 떼어내는 것처럼, 최종 결과물(번들)에서 사용되지 않는 코드를 잘라내어, 파일 크기를 줄이고 성능을 향상시키는 방식

• 다양한 프레임워크 지원 : Vite는 React, Vue, Svelte 등 여러 프레임워크를 지원하며, 커스텀 플러그인으로 다른 프레임워크나 라이브러리와의 호환성도 제공해요.

• 자산 처리 : CSS 모듈, SCSS, Less와 같은 프리프로세서, 이미지 등 다양한 자산을 처리할 수 있어요.

이러한 기능 덕분에 Vite는 빠르고 효율적인 개발 환경을 제공하며, 특히 빠른 빌드와 HMR로 개발자에게 큰 장점을 제공해요.

그럼 Vite 로 React 프로젝트를 만들어보자

1. 버전 별 생성

vscode를 켜서 다음과 같이 입력해주세요

                        npm create vite@latest

                    

만약 특정 버전을 사용해야하는 경우

                        npm create vite@5.4.0

                    

2. 옵션 별 선택

​저는 다음과 같이 하였습니다.

3. 실행해보기

현재 선택된 디렉토리를 변경하기 위해

하단과 같이 입력하거나 해당 프로젝트의 폴더를 열어줍니다

* 저는 test-project라는 이름으로 생성했기 때문에 test-project 폴더로 이동할게요

                        cd test-project

                    

필요한 패키지를 설치하기 위해 다음과 같이 입력합니다.

                        npm i

                    

* 만약 맥 이용자 중 오류가 발생했다면 권한 문제일수있으니 "sudo npm i"를 입력 후 본인 맥 비밀번호를 입력해 설치를 완료해줍니다.

설치가 완료되었다면 다음과 같이 입력해 로컬서버에서 실행해줍니다.

                        npm run dev

                    

http://localhost:5174/ 부분을 다음과 같이 클릭해줍니다.

윈도우 : 컨트롤(ctrl) + 클릭

맥 : 커맨드(command) + 클릭

아래와 같은 화면이 나오면 정상적으로 Vite를 이용한 프로젝트 환경이 갖춰졌습니다!

​​마치며

생각보다 어려운건 많이 없었습니다.

앞으로 프로젝트를 만들때 Vite를 이용해 생성해보세요!