CRA 대신 리액트 프로젝트를 생성할 대체 수단 - Vite

2025-04-27 13 분 소요

CRA(Create React App) is deprecated

이 글을 작성하고 있는 시점에서 불과 약 두 달 전, 리액트 공식 블로그에서 한 글이 올라온다. 그건 바로 리액트 프로젝트를 생성할 때 쓰이는 create-react-app , 줄여서 CRA가 이젠 deprecated되고, 그러니 앞으로는 다른 build tool이나 framework를 이용하여 리액트 프로젝트를 생성하라는 내용이었다. 필자는 여태까지 리액트로 공부하거나 프로젝트를 만들 때마다 항상 npx create-react-app 명령어를 사용했었는데, 이제 이것이 deprecated되었으니 리액트 프로젝트를 생성할 다른 대안을 마련해야 하는 것이다. 물론 deprecated된 것이지 사라진 것은 아니다. 그래도 deprecated는 왠만하면 사용하지 말라는 뜻이니 다른 대안을 찾는 게 좋을 것이다.

CRA 등장 이전에는, 리액트 앱에서 JSX와 같은 특정 기능들을 사용하려면 이와 관련된 도구들을 개발자가 일일히 설치했어야 했다고 한다. 그래서 몇몇 곳에서 이를 자동으로 도와주는 툴들이 생겨났다고 한다. 그러나 이 도구들은 리액트의 기능을 새로 추가하기에 어려운 구조였다고 한다. 그래서 이 문제를 해결해주는 CRA가 등장하게 되었다. CRA는 이러한 여러 개의 흩어져 있는 도구들을 하나로 모아 기존의 문제점을 해결하였으며, 그래서 리액트에 새 기능을 추가하는 것이 쉬워졌다고 한다.

그럼에도 CRA가 deprecated된 이유로 다음이 알려져 있다.

리액트 공식 글에 따르면 기존의 CRA에서는 Routing, Data fetching 등의 기능들을 제공하지 않기도 하고, 여러 잠재적 문제점들을 해결해주지 않기에 개발자는 일일이 이들을 해결해줄 각각의 외부 라이브러리들을 찾아 사용해야 한다는 번거로움이 존재하게 된다.
- 이로 인해 리액트 공식 글에서는 Vite, Parcel과 같은 build tool보다는 Next.js와 같은 framework를 사용할 것을 추천하고 있다. framework 사용 시 앱 개발 과정에서 발생할 수 있는 문제들을 미연에 방지해주기도 하는 것 같다.
리액트 프로젝트 생성 시간의 문제 및 의존성 패키지 node_modules의 용량 문제 : CRA로 리액트 프로젝트를 처음 생성 시 생성 시간이 오래 걸리는 편이며, 의존성 패키지인 node_modules 폴더의 용량만 해도 개발자가 아무것도 추가하지 않아도 기본 200mb가 넘어간다.
- 이후에 소개할 Vite를 사용하면 리액트 프로젝트를 더 빨리 생성할 수 있으며, node_modules 폴더의 용량도 거의 4분의 1 가량 줄어든다.
프로젝트 설정 변경의 어려움 : CRA는 프로젝트의 설정을 내부에 숨기는 방식이라 설정 변경에 어려움이 있다고 한다. 반면 다른 build tool, framework들은 이러한 설정을 숨기지 않아 개발자가 원하는대로 프로젝트 설정을 커스텀하기가 쉽다고 한다.
리액트 공식 글에 따르면 CRA를 관리하는 사람들은 거의 없는 반면, 기존의 다른 build tool이나 framework에서 오히려 CRA가 가지고 있는 문제점들을 해결하고 있으므로 CRA를 deprecated했다고 한다.

이러한 CRA를 대체할 수단으로 크게 build tool과 framework로 나뉘는데, 각각 다음과 같이 존재한다고 한다.

Build tool : Vite, Parcel, RSBuild 등
Framework : Next.js, React Router, Expo 등

리액트 프레임워크 쪽으로는 Next.js가 가장 잘 알려져 있는 것 같았다. Next.js는 SSR(Server Side Rendering), SSG (Static Site Generation), Routing, Data Fetching 등 여러 기능들을 제공해준다고 한다. 하지만 그런 만큼 초심자가 배워야할 것들이 많아 배움의 진입장벽이 있다는 게 단점이라고 한다.

필자의 경우, 아직 리액트에 대한 개념들을 다 정리하지 못한 상태여서 일단은 리액트만 집중 공부하는 것이 좋다고 생각했다. 이 상태에서 Next.js를 택한다면 리액트 말고도 해당 프레임워크의 개념들을 추가로 공부해야만 하는 것이어서 부담이다. 또한 아직까지는 CSR(Client Side Rendering) 방식의 SPA(Single Page Application)를 중점으로 개발하고 싶고 여기에 익숙한 상황이다. 이러한 이유들로 인해 리액트 프로젝트 생성 하나를 위해 Next.js를 사용해야 하는가에 대한 회의감이 들었고, 그래서 필자는 결국 잘 알려진 Vite를 사용하기로 하였다. 물론 나중에 필요하게 되면 Next.js를 사용하게 될지도 모를 일이다.

그래서 이 글에서는 CRA의 대체 수단 중 하나로 Vite에 대해 살펴볼 것이다.

Vite

Vite는 웹 애플리케이션을 위한 프론트엔드 빌드 툴이다. Vite는 프랑스어로 “빠르다(Quick)”를 의미하며, “vit(비트)” 비슷하게 발음한다고 한다(바이트 아니다).

개발 시 개발 결과를 확인하기 위해 localhost로 시작되는 URL를 가지는 개발 서버를 띄우고 개발을 할 것이다. 이 때 기존의 CRA에서는 개발 서버 구동 및 소스 코드의 일부 변경 시 이를 바로 반영하는 그 속도가 상대적으로 느리다고 한다. 반면 Vite는 이에 비해 훨씬 빠른 속도를 자랑한다고 한다.

본래 자바스크립트는 웹 브라우저에서만 작동 가능했다. 하지만 이후 Node.js의 등장으로 서버나 컴퓨터 측에서도 자바스크립트를 파일이라는 모듈로 만들어 작성 및 구동시키는 것이 가능해졌다. 이로 인해 긴 코드를 여러 개의 모듈로 나눠 개발할 수 있게 되었다. 그럼에도 이 자바스크립트의 모듈 기능을 이용하여 프론트엔드 웹 애플리케이션을 제작하고 나면 이러한 소스 모듈들을 바로 브라우저에서 실행할 수는 없었다고 한다. 그래서 브라우저에서 실행 가능한 파일로 변환할 수 있도록 여러 모듈들을 하나 또는 몇몇 개의 파일들로 묶는 작업이 필요했는데, 이러한 작업을 번들링(bundling)이라 하고, 이 번들링을 수행하는 도구를 번들러(bundler)라 부른다. 소스 코드를 브라우저에서 실행 가능한 파일로 변환한다는 점에서 빌드(Build)와 같은 의미라 볼 수 있다. 한 편 자바스크립트 파일 뿐만 아니라 웹 앱을 구성하는 HTML, CSS 및 이미지 등의 리소스들도 모두 번들링의 대상이 된다고 한다. 그래서 결국 프론트엔드 웹 앱 개발자가 자신이 개발한 웹 앱을 배포하기 위해 번들링 과정을 거치게 된다. 현재는 브라우저에서도 자바스크립트의 모듈 시스템 중 하나인 ESM(ECMAScript Module)을 지원하기에 앞서 언급한 방식의 번들링은 필수가 아니게 되었다.

기존 CRA에서는 번들링 도구로 Webpack을 사용한다. 개발자가 여러 개의 모듈로 나눠 개발을 완료 하고 개발 서버에서 이를 구동시켜 확인하는 과정에서도 Webpack을 이용하여 번들링한다. 그 덕분에 개발 결과를 브라우저 화면에서 볼 수 있게 된다. 그런데 이러한 번들링 작업에는 몇 가지 문제점이 있다. 요즘에는 간단한 웹 앱이라 하더라도 엄청 많은 개수의 자바스크립트 모듈들이 생기게 되는데, 이러한 모듈들의 수가 많아질 수록, 즉 웹 앱의 규모가 커질수록 번들링하는 시간도 그만큼 오래 걸린다는 것이다. 또한, 개발 환경에서는 소스 코드의 수정이 빈번할텐데, 이러한 소스 코드의 수정이 일어날때마다 모든 모듈들을 하나로 번들링하는 과정을 거치기에 결과적으로 소스 코드 수정 사항이 웹 화면에 반영되는 시간도 오래 걸린다는 문제점이 있다. 개발자가 소스 코드를 수정한 뒤에 굳이 브라우저를 새로고침한다든가 서버를 재구동할 필요없이 런타임에 바로 수정사항을 반영시켜주는 기술인 HMR(Hot Module Replacement)이 있더라도 번들링의 그 특성 때문에 실제로는 반영되는 데에 시간이 오래걸린다고 한다.

하지만 Vite는 개발환경에서는 번들링 대신 ESM을 사용한다. 기존의 번들링 방식 사용 시 소스 코드 일부만 수정해도 모든 모듈들을 번들링 했던 반면, Vite에서는 ESM을 사용하기에 수정된 모듈만 교체한다는 특징을 지닌다. 이 덕분에 개발 환경에서 소스 코드 일부 수정 시 기존 CRA보다 더 빨리 수정 사항을 반영한다고 한다. 이러한 특성은 DOM을 구성하는 일부 노드에 수정 사항 발생 시 DOM 전체를 리렌더링하는 기존 방식이 아닌, Virtual DOM을 이용하여 변경된 사항만 확인하여 그 부분만 리렌더링하는 React와도 비슷한 패턴을 지니고 있다고 볼 수 있겠다.

그렇다고 해서 Vite 사용 시 번들링이라는 개념 자체가 사라진 것은 아니다. Vite에서는 앞서 말한 ESM의 장점을 살리기 위해서 ESM 방식으로 코드를 작성할 것을 권고하고 있다. 하지만 ESM이 아닌 다른 자바스크립트 모듈 시스템 중 하나인 CommonJS 등을 이용할 경우, 앱 빌드 전에 이를 ESM으로 변환시키는 사전 번들링(pre-bundling)이 일어난다고 한다. 그리고 이 사전 번들링에서 Webpack이 아닌 Esbuild라는 번들러를 이용하는데, 이 번들러는 Webpack에 비해 번들 시간이 압도적으로 빠르다고 한다.

그런데 Vite는 실제 사용자들이 사용할 수 있도록 프로덕션 환경에서 배포하기 위한 웹 앱을 빌드할 때에는 번들링을 거친다고 한다. 번들링되지 않은 상태로 특정 모듈을 가져오는 과정에서 브라우저가 HTTP Request로 해당 모듈을 요청하여 가져오는 방식이라 HTTP 네트워크 통신이 사용된다. 그래서 수많은 모듈들로 이루어진 웹 앱의 경우, 매번 HTTP 통신을 통해 모듈을 가져오는 것은 비효율적이며, 네트워크에 부담을 주기에 사용자 입장에서는 페이지가 로드되는 시간이 오래 걸린다고 느껴질 것이다. 이로 인해 실제 상품으로서의 배포에서는 번들링이 필수인 것이며, Vite 사용 시 개발 환경과 프로덕션 환경에서의 앱 빌드 과정이 차이가 나는 이유이기도 하다. 한 가지 사실은 사전 번들링 할 때에는 Esbuild라는 번들러를 사용하지만, 프로덕션용 앱 빌드 시의 번들링에서는 Vite의 추가 기능을 위한 플러그인 API와 호환되지 않는다는 이유로 대신 Rollup이라는 번들러를 사용한다고 한다.

아무튼 간에 이러한 이유들로 인해 결국 Vite는 기존의 CRA와 비교했을 때 개발 서버 구동 및 소스 코드 수정 사항의 반영 속도, 그리고 거기에 더해 리액트 프로젝트 생성 속도가 눈에 띌 만큼 차이가 나는 것이다. 이 덕분에 유명한 웹 앱 빌드 툴이 된 것으로 보인다.

이러한 Vite는 빌드 툴이지 프레임워크가 아니기에 React, Vue 등 원하는 프론트엔드 라이브러리를 선택하여 사용할 수 있다. 또한 Vite는 SSR 및 SSG도 지원한다고 한다. 다만 Next.js와 같이 프레임워크는 아니기에 개발자가 원할 경우 CSR 방식을 이용한 SPA로도 웹 앱을 구현할 수 있다는 자유도를 준다.

Vite로 리액트 프로젝트 생성하기

이제 본격적으로 이러한 Vite를 이용하여 리액트 프로젝트를 생성하는 방법에 대해 살펴보도록 하겠다.

Vite 사용 시 18 또는 20 이상의 버전을 가진 Node.js가 미리 설치되어 있어야 한다.

필자의 경우, 워크스페이스 폴더인 “MyReactWorkSpace” 바로 아래에 “first-vite-project”라는 리액트 프로젝트 폴더를 Vite를 이용하여 설치하고자 한다. 이를 위해 터미널 창에서 워크스페이스 폴더에 위치한 상태에서 다음의 명령어를 친다.

npm create vite@latest

코드 1-1.

그러면 다음 사진과 같이 다음으로 진행할 것이냐는 질문이 나오는데, 여기서 “y”를 입력하고 엔터키를 친다.

사진 1-1.

다음 사진과 같이 이번에는 프로젝트 이름을 지어준다. 필자는 “first-vite-project’라 하였다.

사진 1-2.

그러면 이번에는 프레임워크를 선택하라면서 목록이 뜬다. 여기서 원하는 것을 고르면 된다. 필자는 리액트를 사용할 것이기에 React를 골랐다. 참고로 키보드에서 화살표 위아래 버튼을 통해 원하는 선택지로 이동 가능하며, 선택하였다면 엔터키를 입력하면 다음으로 넘어간다.

사진 1-3.

이번에는 variant를 선택한다. 필자는 Javascript를 택하였다.

사진 1-4.

여기까지 완료하면 잠시 뒤 리액트 프로젝트가 생성된다. 필자가 직접 위와 같은 과정을 거쳐 Vite를 이용하여 리액트 프로젝트를 생성해보니 확실히 기존의 CRA보다 훨씬 더 빨랐다.

사진 1-5.

워크스페이스 폴더 내에 방금 만든 프로젝트 폴더가 생성되었으므로 해당 프로젝트로 이동한 후 npm i 를 통해 필요한 의존성 모듈이 설치되도록 하였다. 그러면 잠시 뒤 “node_modules” 폴더가 생성된다. CRA 사용 시에는 기본 200mb의 용량을 차지했었다. 이는 필자가 별도로 의존성을 넣지 않았음에도 그러한 용량을 차지했던 것이다. 빈 프로젝트 폴더에 200mb라는 것은 상당한 용량이라 볼 수 있다. 그러나 Vite를 이용하면 50mb만 차지한다. 거의 4분의 1로 용량이 줄어든 것이다.

이 프로젝트를 개발 서버에서 실행하여 브라우저 화면에서 보고자 한다면 위 사진 1-5에 나와있는 것처럼 npm run dev 명령어를 입력한다(npx vite 라고 해도 같다). 그러면 프롬프트 창에는 다음과 같은 메시지가 뜨고,

사진 1-6.

해당 localhost URL를 브라우저 URL창에 입력하면 다음의 화면을 볼 수 있다.

사진 1-7.

참고로, 맨 처음부터 프로젝트 폴더 이름 및 템플릿을 설정하고자 한다면 다음과 같은 형식의 명령어를 대신하여 사용하면 된다.

# npm v7 이상에서는 `--` 를 반드시 붙여주세요:
npm create vite@latest my-react-app -- --template react

코드 1-2. “my-react-app”이란 프로젝트 폴더 이름과 더불어 react로 프로젝트 생성 시의 명령어. Vite 공식 문서에서 일부 발췌.

여기까지 Vite를 이용한 리액트 프로젝트 생성 및 개발 서버 실행 방법에 대해 살펴보았다.

Vite로 생성한 리액트 프로젝트 폴더 구조 살펴보기

위와 같이 Vite를 이용하여 생성한 리액트 프로젝트의 폴더 구조는 다음과 같이 생겼다.

사진 2-1. Vite로 생성한 리액트 프로젝트 폴더 내 구성

기존의 CRA를 이용하여 생성한 리액트 프로젝트 폴더의 구조와 비교했을 때 비슷하면서도 다른 점들도 있다.

CRA에서는 index.html 파일이 public 디렉토리에 있던 반면, Vite에서는 프로젝트 폴더의 루트에 바로 위치한 것을 볼 수 있다. Vite 공식 문서에 따르면 이는 추가적인 번들링 과정 없이 index.html 파일이 웹 앱의 진입점이 되게끔 설계한 결과라고 한다.
Vite에서는 루트에 vite.config.js 파일을 생성한다. 이 파일에서 개발자는 원하는대로 프로젝트 설정을 커스터마이징할 수 있으며, Vite는 이 파일의 존재 여부를 통해 해당 폴더가 Vite로 생성된 프로젝트임을 인식할 수 있다고 한다. 그렇기에 만약 프로젝트 루트를 바꾸고자 한다면 해당 설정 파일도 같이 옮겨줘야 한다고 한다.
Main.jsx는 기존 CRA로 리액트 프로젝트를 생성했을 때 존재하던 index.js와 같은 역할을 한다. 즉, 실질적으로 index.html의 root element에 접근하여 파편화된 여러 모듈들을 하나로 합쳐 웹 앱으로 만드는 역할을 한다. 실제로 Main.jsx 내부 코드도 기존의 index.js와 거의 흡사하다.

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>,
)

코드 2-1. Vite를 이용하여 리액트 프로젝트 생성 시의 Main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

코드 2-2. 기존 CRA를 이용하여 리액트 프로젝트 생성 시의 index.js

이 외에는 대부분의 것들이 기존 CRA와 비슷하다. 외부 라이브러리를 추가하고자 할 때에도 npm i <라이브러리명> 형태의 명령어를 이용하면 설치 가능하며, package.json에 그대로 반영된다.

프로젝트 빌드 및 로컬에서 확인해보기

앞서 생성한 리액트 프로젝트에서 우선 npm i axios 를 이용하여 axios 외부 라이브러리를 추가해보았다. 그 다음, src 폴더 내에 components 폴더를 생성한 후, 그 안에 jsx 파일을 만들어 다음과 같은 코드를 작성하였다.

import axios from 'axios';
import { useState, useEffect } from 'react';

const ShowExternalData = () => {

  const [data, setData] = useState({});

  useEffect(() => {

    const fetchData = async () => {
      try {
        const axiosPromise = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
        const resData = axiosPromise.data;
        if (resData != null) {
          setData(resData);
        } else {
          alert("fetching data failed.");
        }
      } catch (e) {
        console.error("데이터 가져오는 도중 에러 발생");
        console.error(e);
      }
    };

    fetchData();
    
  }, []);

  return (
    <div>
      <h3>외부 데이터 가져오기 결과</h3>
      <ul>
        <li>userId : {data.userId}</li>
        <li>postId : {data.id}</li>
        <li>title : {data.title}</li>
        <li>content: {data.body}</li>
      </ul>
    </div>
  );
}

export default ShowExternalData;

코드 3-1. ShowExternalData.jsx

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

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

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>

      <ShowExternalData />  {/* 추가 */}
    </>
  )
}

export default App

코드 3-2. App.jsx

개발 서버에서 실행해본 결과, 외부 데이터를 가져와 페이지에 표시하는 데에 성공하였다.

이렇게 만든 앱을 배포하고자 한다면 먼저 빌드를 해야 하는데, 프롬프트 창에서 다음의 명령어를 입력한다.

npx vite build

// 또는 Node.js 환경에서 npm run build

코드 3-3.

그러면 프로젝트 폴더 루트에 dist라는 폴더가 생성되면서 그 안에 빌드 후의 내용물들이 추가된다.

사진 3-1. 빌드 결과물의 구조

즉 배포 준비가 된 앱의 빌드를 성공시킨 것이다. 만약 이 빌드된 앱을 로컬에서 실행해보고자 한다면 다음의 명령어를 입력한다.

npx serve -s dist  // dist 폴더를 문서(document) 루트로 인식시킨다. 

코드 3-4.

그러면 콘솔창에는 다음의 메시지가 보인다.

PS C:\react\MyReactWorkSpace\first-vite-project> npx serve -s dist
Need to install the following packages:
serve@14.2.4
Ok to proceed? (y) y

   ┌──────────────────────────────────────────┐
   │                                          │
   │   Serving!                               │
   │                                          │
   │   - Local:    http://localhost:3000      │
   │   - Network:  http://192.168.0.15:3000   │
   │                                          │
   │   Copied local address to clipboard!     │
   │                                          │
   └──────────────────────────────────────────┘

 HTTP  2025. 4. 27. 오전 12:54:43 ::1 GET /
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 Returned 200 in 23 ms
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 GET /assets/index-Cpy_JmFL.js
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 GET /assets/index-D8b4DHJx.css
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 Returned 200 in 5 ms
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 Returned 200 in 10 ms
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 GET /vite.svg
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 Returned 200 in 5 ms
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 GET /assets/react-CHdo91hT.svg
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 Returned 200 in 3 ms
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 GET /vite.svg
 HTTP  2025. 4. 27. 오전 12:54:43 ::1 Returned 304 in 1 ms

코드 3-5.

브라우저에서 http://localhost:3000 을 URL 창에 입력하면 다음과 같이 빌드된 앱의 결과물을 확인할 수 있게 된다.

사진 3-2.

참고로 npx serve 를 이용하지 않아도 빌드된 앱을 로컬 서버에서 바로 볼 수 있는 기능이 Vite에 있다. npx vite preview 명령어를 대신 사용하면 빌드된 앱을 로컬 서버에서 실행시켜 미리 볼 수 있다.

PS C:\react\MyReactWorkSpace\first-vite-project> npx vite preview
  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

코드 3-6. npx vite preview 실행 후의 콘솔창

글을 마치며…

이 글에서는 리액트 프로젝트 생성에 사용되었던 기존의 CRA가 deprecated 되었다는 것을 소개하였다. 그리고 그에 대한 대안 중 하나로 필자는 Vite를 선택하였고, Vite에 대한 개요 및 이를 이용하여 리액트 프로젝트를 생성하는 방법을 살펴보았다. 이렇게 생성된 리액트 프로젝트 폴더 내 구조가 기존 CRA의 것과 비교하여 몇 가지 다르다는 것도 보았다. 그리고 Vite를 이용하여 생성된 리액트 프로젝트를 개발 서버에서 실행하는 방법, 앱으로 빌드하는 방법과 빌드된 앱을 로컬 환경에서 미리 확인하는 방법도 소개하였다.

확실히 기존 CRA에 비해 Vite를 쓰니 리액트 프로젝트 생성 속도가 훨씬 빨랐고, 종속성 패키지인 node_modules 폴더의 용량도 가벼워진 것을 확인할 수 있었다. 뿐만 아니라 리액트 외에 Vue, Typescript와 같은 다른 프론트엔드 프레임워크 또는 도구들도 사용할 수 있다는 범용성과 더불어 Vite 자체는 프레임워크가 아니라서 리액트만 안다면 별도의 지식을 필요로 하지 않고도 바로 개발에 진입할 수 있다는 것도 매력적이었다. 앞으로 별다른 이유가 없다면 리액트에 대한 개념들을 공부하고 정리하거나 웹 앱을 만들 때 Vite를 기반으로 개발할 것이다.

References

[1] 리액트 공식 문서 - react 프로젝트 생성을 위한 프레임워크들 소개

새로운 React 앱 만들기 – React

[2] 리액트 공식 문서 - react 프로젝트 생성을 위해 사용할 빌드 툴들 소개 (vite 포함)

처음부터 React 앱 만들기 – React

[3] Vite 공식 사이트

Vite

[4] HMR (Hot Module Replacement) 개념

HMR 이해하기

[5] HMR (Hot Module Replacement) 개념

Hot Module Replacement (aka. Hot Reload)

[6] vite 관련 내용