목록으로
빌드 도구 Vite
(1) JavaScript를 빌드하는 이유
JavaScript는 브라우저에서 바로 실행될 수 있는 언어입니다. 그렇다면 왜 빌드를 해야 할까요?
1) 모듈 번들링
현대적인 JavaScript 애플리케이션은 여러 개의 모듈로 구성되어 있습니다. 이러한 모듈들은 서로 의존성을 가지며, 복잡한 구조를 형성합니다. 브라우저는 이러한 모듈을 각각 읽어들일 수 있지만, HTTP 요청이 많아지면 로딩 시간이 길어져 애플리케이션 성능이 저하되지요. 빌드 도구는 여러 모듈을 하나의 파일로 번들링하여 HTTP 요청의 수를 줄여줍니다.
2) 최적화
빌드 과정에서 코드를 최적화할 수 있습니다. 여기에는 코드 압축(minification), 불필요한 코드 제거(tree shaking), 그리고 폴리필(polyfill)을 추가하는 작업이 포함됩니다. 폴리필은 웹 브라우저가 지원하지 않는 최신 웹 표준 기능이나 API를, 브라우저에서 사용할 수 있도록 해주는 코드나 플러그인입니다.
3) 최신 JavaScript 문법과 기능 사용
JavaScript는 지속적으로 새로운 기능과 문법이 추가되고 있습니다. 하지만 모든 브라우저가 최신 JavaScript 기능을 지원하는 것은 아닙니다. 빌드 도구는 이러한 최신 기능을 구버전 브라우저에서도 호환되도록 변환(transpile)해주는 역할을 합니다. 예를 들어, ES6(ECMAScript 2015) 이상의 문법을 사용하는 코드를 ES5로 변환하여 모든 브라우저에서 실행될 수 있도록 해주지요.
4) 개발 경험 개선
빌드 도구는 개발 과정에서 생산성을 높이기 위한 다양한 기능을 제공합니다. 예를 들어, 핫 모듈 리플레이스먼트(HMR) 기능을 통해 코드 수정 후 즉시 브라우저에 변경 사항이 반영되도록 할 수 있습니다. 또한 개발 환경과 경험에 도움을 주는 도구를 사용할 수도 있지요.
5) 호환성 유지
다양한 브라우저와 기기에서 동일하게 동작하는 애플리케이션을 만드는 것은 어려운 일입니다. 빌드 도구는 코드의 호환성을 유지하는 데 중요한 역할을 합니다. 예를 들어, CSS 전처리기(Sass, Less 등)나 TypeScript와 같은 도구를 사용하면, 브라우저 호환성을 유지하면서도 더 강력한 기능을 사용할 수 있습니다.
(2) Vite 소개
Vite(비트)는 더 빠르고 효율적으로 개발할 수 있게 해주는 빌드 도구입니다. Vite는 프랑스어로 “빠른”이라는 뜻으로, 그 이름처럼 매우 빠른 빌드 속도를 자랑합니다. Vue.js의 창시자인 에반 유(Evan You)가 만들었는데, Vue.js를 만든 그 Evan You입니다.
1) 빠른 개발 서버 시작
JavaScript 프로젝트가 커질수록 개발 서버를 시작하는 데 걸리는 시간이 길어질 수 있습니다. 기존의 빌드 도구들은 전체 프로젝트를 번들링한 후 서버를 시작하기 때문에 시간이 오래 걸려요. 하지만 Vite는 ES 모듈을 활용하여 필요한 파일만 동적으로 로드하므로 빠르게 동작하지요.
2) 빠른 핫 모듈 리플레이스먼트(HMR)
개발 도중 코드에 변경 사항이 생기면, Vite는 전체 애플리케이션을 다시 빌드하는 대신, 변경된 부분만 빠르게 갱신하여 반영합니다. 이는 개발자가 코드 변경 후 결과를 확인하는 시간을 크게 줄여 주며, 더 빠른 개발 주기를 제공합니다.
3) 최신 브라우저 기능 활용
Vite는 최신 브라우저의 ES 모듈 기능을 활용하여 불필요한 변환 작업을 줄입니다. 이는 JavaScript 코드를 최신 표준에 맞게 실행하고, 번들 크기를 줄이는 데 도움이 됩니다.
4) 간편한 설정
Vite는 설정이 매우 간단합니다. 기본적으로 프로젝트에 필요한 설정이 자동으로 적용되기 때문에, 추가적인 설정 없이도 바로 프로젝트를 시작할 수 있습니다. 고작 Hello World 하나 보려고 이것 저것 설치해서 안 그래도 어려움을 느끼는 입문자에게는 특히 큰 장점이지요.
5) 생산성과 성능
Vite는 프로덕션 빌드에서도 매우 빠릅니다. ESBuild와 Rollup을 조합하여 최적의 빌드를 생성하며 빌드 시간이 단축되고, 결과물의 성능이 개선됩니다.
Vite로 React 프로젝트 생성하기
(1) React 보일러 플레이트로 프로젝트 생성
앞서 pnpm을 설치한 것처럼 Vite를 설치해도 되지만, Vite를 설치하지 않고도 사용할 수 있습니다. 터미널에서 다음 명령어를 실행하세요.
실행하면 다음과 같은 텍스트가 화면에 출력된 후 보일러 플레이트 생성이 끝납니다.
우리는 이름이 hello-world인 프로젝트를 생성했으며, 이 프로젝트의 보일러 플레이트 템플릿은 react입니다. 이에 대한 자세한 내용은 공식 문서 - 시작하기를 참고하세요.
(2) 패키지 설치
hello-world 디렉터리로 이동한 후 pnpm install 명령어를 실행합니다.
다음과 같은 텍스트가 출력되며 종속성(의존성)에 맞춰 필요한 패키지를 설치합니다.
(3) React를 사용한 Hello World 화면 보기
준비 끝났습니다. 개발 서버를 띄워서 React 화면이 잘 나오는지 확인해보겠습니다. 터미널에서 다음 명령어를 실행하세요.
줄여서 pnpm dev를 실행해도 됩니다.
터미널에 개발서버가 출력하는 개발서버 정보가 나오면서 실행합니다. http://localhost:5173이 개발서버에 접속할 수 있는 웹 URL 입니다. 웹 브라우저를 열고 이 URL을 입력해 접속해보세요.
우리가 뭔가 한 게 없는데 화면에 Vite + React 라는 문구가 표시됩니다. 가운데쯤 있는 count is 0이라고 적힌 검정색 버튼을 누르면 숫자가 1씩 증가합니다.
푸딩캠프 뉴스레터를 구독하면 학습과 성장, 기술에 관해 요약된 컨텐츠를 매주 편하게 받아보실 수 있습니다.
목차