🧐 1. 주제
Vite란?
참고 : vite
Vite? Vite가 뭔데 이렇게 뜨는 걸까. Vite가 뜰 거다라고 몇 개월 전에 듣고 흘린 적이 있는데, 며칠 전에 들은 강의에서 강사님이 'Vite 꼭 쓰세요'라는 말을 듣고 'Vite가 이 정도인가?'라는 생각과 함께 Vite에 대해 큰 흥미를 불러일으켰다.
'Vite'는 프랑스어로 '빠르다'를 의미한다. 아래와 같은 두 가지 콘셉트를 중심으로 하고 있다.
1. 개발 시, Native ES Module을 넘어 더욱 다양한 기능 제공 : HMR(Hot Module Replace)
2. 번들링 시, Rollup 기반의 다양한 빌드 커맨드 사용
이 두가지 특징들로 인해 개발자들이 더욱 빠르고 쉽게 애플리케이션을 개발할 수 있도록 돕는다.
Vite와 Next.js의 장단점에 대해 알려주었다. 가장 큰 차이점으로는 성능이다. Next.js는 Webpack을 기본 번듈러로 사용하여 빠른 HMR을 제공하는 한 편, Vite는 native ES modules을 사용하여 build를 한다. 그래서 개발 환경에서 더 빠른 HMR을 제공하고, build process를 최적화한다. 그리고, Vite는 Vue, React, Svelte 등 다양한 라이브러리 혹은 프레임워크와 함께 사용할 수 있다.
# HMR : hot module Replacement
공식문서도 함께 찾아보았다.
Vite를 이용하여 수행할 미션
1. Vite 초기 세팅하기
2. 페이지 구성
3. 배포
미션 1: Vite 초기 세팅
공식문서 > 가이드를 보고 따라했다.
프레임워크로 React를 선택하였고, SWC라는 것이 나오는데, SWC는 아래와 같고, SWC로 선택해 주면 된다.
# SWC : 자바스크립트 프로젝트의 컴파일과 번들링 모두에 사용될 수 있는, Rust라는 언어로 제작된 빌드 툴입니다. SWC는 Speedy Web Compiler의 약자로, 말 그대로 매우 빠른 웹 컴파일러의 기능을 제공하는 툴입니다.
각 프레임워크 별로 다양한 템플릿을 지원하니, awesom-vite에 들어가서 골라서 사용해도 된다. 나는 vite만을 온전히 느껴보고 싶어서 기본 template을 사용하였다.
폴더 구조는 아래와 같다.
$ yarn을 입력하여 설치하면 node_modules가 설치된다.
이제 package.json의 명령어를 보고 입력하면 된다.
$yarn dev를 입력하면 오른쪽 사진처럼 도메인은 localhost, port는 5173에서 클라이언트가 실행이 된다. react, next.js에서는 항상 3000 port였는데 vite는 5173 port이다. 역시 vite는 달라..
템플릿 사용기
template를 사용해 볼까?
나는 내가 가장 익숙한 'React, Typescript, Tailwindcss, Redux Toolkit, eslint with Vite'템플릿을 다운로드하였다. 방법은, Vite 공식 문서에서 알려주는 awesom-vite에서 원하는 툴로 구성된 템플릿을 골라, README에 적혀있는 데로 하면 된다.
내가 고른 템플릿에서는 아래처럼 친절하게 가이드를 제시해 주었다.
$ i를 하니 모듈들이 설치가 되었다.
RTK의 feature, tailwind의 tailwind.config.js 등 모듈이 설치되어 있을 뿐만 아니라 기본 세팅이 되어 있었다. 이렇게 기본 세팅이 되어있고, 우리는 오로지 '개발'에만 몰두할 수 있게 해 주었다.
미션 2. 페이지 구현하기
Vite에서는 Next.js가 아니기에 React방식으로 pagination을 해야 한다. Next.js에서는 pages폴더 안에 jsx파일을 넣으면 자동으로 라우팅을 해주었는데, Vite에서는 App.tsx에서 라우팅을 직접 해야 한다는 부분이 조금 아쉬웠다.
// pages/begin.tsx
import React from "react";
export default function Begin() {
return <div>안녕하세요</div>;
}// App.tsx
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Test from "./pages/begin";
function App(): JSX.Element {
return (
<BrowserRouter>
<div className="App">
<Routes>
<Route path="/begin" element={<Test />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
라우팅은 기존 React방식과 동일하다.
1. react-router-dom을 install 한다
2. src/pages폴더 안에 페이지 컴포넌트를 생선 한다.
3. <BroswerRouter> 안에 <Routers> 안에 <Router> 태그를 삽입한다. 속성값으로 path와 element를 넘긴다.
미션 3 : 배포하기
참고 : Vite 공식문서
Github pages, Nelify, Vercel, Cloudflare Pages, Google Firebase, Surge, Azure 등 다양한 배포할 수 있는 클라우드가 많았지만, 나는 그중 가장 익숙한 Vercel을 택하였다. vercel 사이트에서 github에 연결하여 마우스로 클릭 몇 번만 하면 정말 쉽고 간편하게 배포할 수 있다. 이번에는 Terminal에서 CLI로 local환경에서 해보았다.
1. $ npm run build
위 코드를 터미널에 입력하면 위 사진처럼 dist 폴더가 생성이 된다. dist폴더를 살펴보면, index.html은 기존 index.html과 동일하고, index-xxx.css와 index-xxx.js는 src안에 있는 css파일과 js파일을 난독화시켜 놓은 파일이다.
# 난독화 : 프로그래밍 언어로 작성된 코드에 대해 읽기 어렵게 만드는 작업
그다음은 이제 배포할 차례이다! (두근두근)
2. $ npm i -g vercel
Vercel CLI를 설치한다. 이때, Mac OS를 사용할 경우 권한 문제로 설치가 안될 수 있다. 에러 해결은 링크에서 확인할 수 있다.
3. $ vercel
vercel을 입력하여 vercel배포를 시작한다. 질문에 맞게 답해주면 되는데, 위와 같이 답변해 주면 된다.
production: ~의 링크를 클릭하면 배포된 서버를 확인할 수 있다. 배포 성공 ~!
변경된 부분이 있어 다시 배포하고 싶다면, $npm build로 build 해주고, $vercel를 입력하면 된다.
🤔 2. 느낀 점 / 배운 점 / 추가로 공부할 것
Vite의 기본적인 것들은 다루어보았다. React와 큰 차이점은 늦기지 못했다. Vite가 빌드와 서버 시작에 속도가 빠르고, HMR(Hot Hodule Replacement)가 빠르다는데, 나는 아직 잘 모르겠다. npm run build(dev 서버 열기)가 '조금 빨라졌네' 이 정도.. ? 최적화된 태그(<Image />, <Link />)와 다양한 메서드(getServerSideProps)를 제공하고, pages폴더 안에 페이지 컴포넌트를 넣으면 알아서 라우팅 해주는 Next.js가 훨씬 편한 것 같다. Next.js와 Vite를 함께 사용하는 방법도 있다는데, 추후에 프로젝트를 하게 된다면 이것도 고려해봐야겠다. 처음 사용해보는 Vite라 상당히 흥미롭고, 설레는 시간이었다.
다음번에는 RNA와 Flutter를 맛보기 해봐야지.
