[ React ] vite 프로젝트 생성 & vite-plugin-next-router 사용하기

⚡️ vite란?

Vite는 Vue.js 팀에서 개발한 웹 개발 빌드 도구이다. Vite의 주요 목표는 개발 서버와 빌드 시스템을 최적화하여 더 빠른 개발 경험을 제공하는 것이다.

Vite는 기존의 번들러(Bundler)와는 다른 접근 방식을 채택한다. 일반적으로 번들러는 개발자가 작성한 모든 코드를 하나의 번들로 묶어서 제공하는 반면, Vite는 개별 파일 단위로 빌드하여 개발 서버에서 동적으로 제공한다. 이를 통해 초기 로딩 시간을 줄이고 개발 과정에서의 빠른 수정 및 반영을 가능하게 한다.

Vite는 Vue.js를 위한 공식적인 개발 도구로서, Vue.js 애플리케이션 개발을 위한 편리한 기능과 통합을 제공하나, Vite는 단순히 Vue.js를 위한 도구로 제한되지 않고, 다른 프레임워크(React, Preact, Svelte 등)와도 함께 사용할 수 있다.

Vite는 ES 모듈 기반의 개발을 강조하며, 기본적으로 Rollup을 사용하여 번들링한다. 이를 통해 효율적인 번들링과 트리 쉐이킹(Tree Shaking)을 지원하며, 개발 서버에서는 HMR(Hot Module Replacement)을 제공하여 코드 변경을 실시간으로 반영한다.

요약하면, Vite는 빠른 개발 경험과 최적화된 번들링을 제공하는 Vue.js 및 기타 프레임워크용 웹 개발 도구이다.

---

🖥️ vite로 새로운 프로젝트 생성하기

yarn create vite


? Project name: 프로젝트이름
? Select a framework: (Use arrow keys)
❯ vanilla
  vue
  react
  preact
  lit
  svelte

나는 프레임워크로 React를 선택하고,
언어를 선택하는 창에서 TypeScript+swc를 선택했다.
웹에서 실행한 결과를 보기 위해서는

yarn dev

를 터미널에 입력한다.

⚡️ SWC란?

SWC는 "Super-fast WebAssembly Compiler"의 약자로, 웹 어셈블리(WebAssembly)를 위한 매우 빠른 컴파일러이다. SWC는 JavaScript와 TypeScript 코드를 효율적으로 변환하고 번들링하는 데 사용된다.

SWC는 Rust로 작성된 오픈 소스 프로젝트이며, 최신 JavaScript 및 TypeScript 문법을 지원하며 빠른 성능을 제공하며, 일반적으로 Babel과 같은 도구는 JavaScript 코드를 변환할 때 사용되지만, SWC는 이러한 변환 작업을 보다 빠르게 수행한다.

---

🖥️ vite-plugin-next-react-router 사용

공식문서와 GitHub링크를 참고할 것이다.

(무작정 강의만 보고 따라하다가 많이 헤맸다. 버전이 다른 경우 사용방법 자체가 다른 경우가 많으므로 "공식문서"의 중요성을 또 다시 느꼈다.)

npm공식문서 : https://www.npmjs.com/package/vite-plugin-next-react-router
예제포함된 github : https://github.com/zoubingwu/vite-plugin-next-react-router/tree/master/examples/react

1. 설치

yarn add vite-plugin-next-react-router 

2. vite.config.ts 파일 수정

강의에서는

import {reactRouterPlugin} from "vite-plugin-next-react-router";

을 사용하여 import해주었는데,그러면

_'"vite-plugin-next-react-router"' 모듈에 내보낸 멤버 'reactRouterPlugin'이(가) 없습니다. 대신 '"vite-plugin-next-react-router"에서 reactRouterPlugin 가져오기'를 사용하시겠습니까?ts(2614)

이런 오류가 발생한다.

command 버튼 누른 채로 vite-plugin-next-react-router 클릭하면

import { Plugin } from 'vite';

interface Options {
    /**
     * Path to the directory to search for page components.
     * Default value is 'src/pages'.
     */
    pageDir: string;
    /**
     * Valid file extensions for page components.
     * Default value is ['js', 'jsx', 'ts', 'tsx'].
     */
    extensions: string[];
    /**
     * Layout file name.
     * Default value is '_layout'.
     */
    layout?: string;
}
type UserOptions = Partial<Options>;

declare function withReactRouter(userOptions?: UserOptions): Plugin;

export { withReactRouter as default };

가 뜨는데, 이때 export된 것을 보면 withReactRouter로 되어있다.

따라서, 아래와 같이 withReactRouter를 import해야하고,
default로 지정되어 있으므로 중괄호 없이 import 해야한다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import withReactRouter from "vite-plugin-next-react-router";

export default defineConfig({
  plugins: [
    react(),
    withReactRouter({
      pageDir: "src/pages",
      extensions: ["js", "jsx", "ts", "tsx"],
      layout: "_layout",
    }),
  ],
});

옵션은 공식문서에 나와있는 것을 복사했다.

3. _layout.tsx 파일 생성

src/pages에 아래 파일을 넣어준다.

import React, { Suspense } from "react";
import { Outlet } from "react-router-dom";

const Layout: React.FC = () => {
  return (
    <div>
      <Suspense fallback={"loading..."}>
        <Outlet />
      </Suspense>
    </div>
  );
};

export default Layout;

4. pages 폴더 구성

사이트의 메인페이지인 index.tsx 파일이 있고, 상품 id에 따라 상세페이지를 보여줄 것이기 때문에, products 폴더를 추가하고 그 안에 상품목록리스트 페이지인 index.tsx과 상세페이지인 [id].tsx 파일을 생성하였다. ##### src/index.tsx => localhost:5173 ```typescript const MainPage = () => { return ; };

export default MainPage;

##### src/pages/products/index.tsx => localhost:5173/products 
```typescript
const ProductList = () => {
  return <div>상품목록 입니다.</div>;
};

export default ProductList;

src/pages/products/[id].tsx => localhost:5173/products/(id값 1,2,3 ... )

import { useParams } from "react-router-dom";
const ProductDetail = () => {
  let { id } = useParams<"id">();

  return <div>{id}번 상품상세페이지 입니다.</div>;
};

export default ProductDetail;

id 변수를 받아오는 것은 useParams로 받아왔다.
(github의 example/react 의 코드들을 참고)