DEVOCEAN

안녕하세요. Teus입니다.

이번에 다룰 포스팅은, React Project를 만드는 새로운 방법인 Vite에 대해서 다룹니다.

0. Vite

기존에 React Project를 만들때, 다들 Create React App 을 사용해서 Project를 생성 하셨을 겁니다.

CRA는 의존성 등을 전부 관리해 줘서 편리합니다.

하지만 새로운 Project를 만들거나, React Server를 다시 실행 시키는데 굉장히 무겁게 동작합니다.

Vite같은 경우 React뿐만 아니라 Vue, svelte등을 지원 하면서도

보다 빠르게 동작할 수 있게 Bundle 방식에서 Native ESM 방식으로 구동하게 구현 되어있습니다.

1. Vite로 React Project만들기

Vite의 경우 npm이나 yarn으로 모두 가능합니다.

npm을 사용할 경우, 아래와 같은 커맨드를 사용해서 vite를 사용한 project를 만들 수 있습니다.

 npm create vite@latest

뿐만 아니라 다른 유저가 github에 올려놓은 템플릿을 가지고와서 실행하는것 역시 가능합니다.

여튼 이렇게 vite를 실행시키면, 아래와같이 어떤 project를 사용할지, 어떤 언어를 사용할지 선택할 수 있습니다.

굉장히 빠르게 프로젝트가 생성되게 되고 생성된 프로젝트를 initialize할 수가 있습니다.

cd my_vite_pjt
npm install
npm run dev

사내환경 기준으로 2분 만에 설치가 완료되고, 정상적인 웹페이지를 확인할 수 있습니다.

실제로 Hynix내부에서 활용하던 Project를 CRA -> vite로 변경하면서 보다 생산성 높은 프로젝트 진행이 가능하게 되었습니다.

2. Vite React Project 구조

Vite의 경우, public 폴더 없이 index.html이 project 최 상단에 있습니다.

vite-project
  -node_modules
  -public
  -src
  .gitignore
  eslint.config.js
  index.html
  package-lock.json
  pacakage.json
  README.md
  vite.config.js

그리고, 우리가 수정해야하는 src폴더내에서는 main.jsx 내에서 App.jsx를 import해와서 사용하는 구조를 가지고 있어서,

기존 CRA(Create React App) 사용자 입장에서는 거의 진입장벽 없이 사용이 가능합니다.

//main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

//App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      ...
    </>
  )
}

export default App

3. SSR(Service Side Renderering)

vite는 자체적으로 SSR을 지원해 줍니다.

공식 문서에서 아래 대중적인 프래임워크에 대한 SSR 예제를 준비해 두었기 때문에, 초심자 입장에서는 빠르게 SSR이 뭔지 실험해 볼 수 있는 기능이 유용해 보입니다.

4. 이모저모

FE쪽은 확실히 React라는 프래임워크 하에 천하통일(?)이 된 느낌입니다.

대신, 이 React를 어떻게 사용할 지에 대한 기술들이 계속 변하고 있는것 같네요.

CRA에서 지원되던 기능들은 거의 대부분 지원이 되기 때문에, 한번 Vite의 사용을 고려해보시기 바랍니다!🙃