Vite를 이용한 React 프로젝트 설정 및 정적 파일 복사 플러그인 사용 방법

React 프로젝트를 빌드하고 배포하는 과정에서, 종종 특정 파일들을 빌드 디렉토리로 복사해야 할 필요가 있습니다. 예를 들어, 환경 설정 파일이나 기타 정적 파일들이 이에 해당할 수 있습니다. Vite를 이용하면 이러한 작업을 간단하게 처리할 수 있습니다. 이 글에서는 Vite를 이용하여 React 프로젝트를 설정하고, vite-plugin-static-copy를 사용하여 정적 파일을 복사하는 방법에 대해 설명하겠습니다.

Vite란 무엇인가?

Vite는 빠르고 경량화된 프론트엔드 빌드 도구로, 주로 모던 웹 애플리케이션을 위한 도구로 사용됩니다. Vite는 개발 서버의 빠른 시작과 빠른 HMR$Hot Module Replacement$ 기능을 제공하여 개발 생산성을 높여줍니다. 또한, 빌드 시에는 Rollup을 이용하여 최적화된 결과물을 생성합니다.

Vite 프로젝트 설정

Vite를 사용하여 React 프로젝트를 설정하려면, 먼저 Vite와 React 관련 플러그인을 설치해야 합니다. Vite 프로젝트 설정 파일인 vite.config.js 또는 vite.config.ts 파일을 작성하여 설정을 정의할 수 있습니다.

아래는 Vite와 React 플러그인을 설정한 예제 코드입니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { viteStaticCopy } from 'vite-plugin-static-copy';

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    outDir: 'build'  // 빌드 결과물이 생성될 디렉토리 설정
  },
  plugins: [
    react(),  // React 플러그인 설정
    viteStaticCopy({
      targets: [
        { src: "./configs.js", dest: "." }  // 특정 파일을 빌드 디렉토리로 복사하는 설정
      ]
    })
  ]
});

vite-plugin-static-copy 플러그인을 사용하는 이유

프로젝트를 빌드할 때, 정적 파일들을 빌드 디렉토리로 복사해야 할 경우가 종종 있습니다. 예를 들어, 환경 설정 파일, 이미지 파일, 또는 기타 정적 파일들을 빌드 결과물에 포함시켜야 하는 경우가 이에 해당합니다. 처음 해당 작업을 진행하려고 할때 vite-plugin-copy를 사용했습니다.  vite-plugin-copy npm 사이트 에서 보고 진행했으나 안되서 vite-plugin-static-copy로 진행했습니다. 아무 문제 없이 잘 됩니다. 

주요 기능

• 간편한 파일 복사: 복사할 파일 경로와 복사될 디렉토리 경로를 간단하게 설정할 수 있습니다.
• 빌드 통합: Vite 빌드 과정에 통합되어, 추가적인 스크립트나 작업 없이 빌드 시 자동으로 파일을 복사합니다.

설정 방법

1. 플러그인 설치: 먼저, vite-plugin-static-copy를 프로젝트에 설치해야 합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다

npm install vite-plugin-static-copy --save-dev