vite.config.mjs

Vite 설정 파일(vite.config.mjs)은 ES 모듈 형식을 사용하여 작성되었습니다. 이 파일은 React 프로젝트를 위한 다양한 설정을 정의합니다. React 플러그인과 경로 별칭, 개발 및 미리보기 서버 설정 등을 포함하고 있으며, 이러한 설정을 통해 개발 경험을 개선하고 빌드 프로세스를 효율화합니다.

import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import jsconfigPaths from 'vite-jsconfig-paths';

import 구문:

path: Node.js의 경로 모듈로, 파일 및 디렉토리 경로 조작에 사용됩니다.
defineConfig: Vite의 설정을 정의하는 함수입니다. 이 함수는 설정 객체를 매개변수로 받아 Vite 설정을 정의합니다.
react: Vite의 React 플러그인으로, React 프로젝트에서 필수적인 기능을 제공합니다.
jsconfigPaths: Vite 플러그인으로, jsconfig.json 또는 tsconfig.json 파일의 경로 매핑을 지원합니다.

plugins: [react(), jsconfigPaths()],

plugins:

react(): React를 위한 Vite 플러그인을 활성화합니다.
jsconfigPaths(): jsconfig.json 또는 tsconfig.json의 경로 매핑을 활성화합니다.

 base: '/free',

base: '/free': 빌드된 자산의 기본 경로를 설정합니다. 여기서는 /free로 설정되어 있습니다. 환경 변수에 접근할 수 없어서 하드코딩되어 있습니다.

define: {
    global: 'window'
  },

define:

global: 'window': global 변수를 window로 정의합니다. 이는 브라우저 환경에서 Node.js의 global을 모방합니다.

  resolve: {
    alias: [
      {
        find: /^~(.+)/,
        replacement: path.join(process.cwd(), 'node_modules/$1')
      },
      {
        find: /^src(.+)/,
        replacement: path.join(process.cwd(), 'src/$1')
      }
    ]
  },

resolve:

alias: 모듈 경로 별칭을 설정하여, 긴 경로를 짧고 읽기 쉽게 만듭니다.
find: /^~(.+)/: ~로 시작하는 경로를 node_modules 디렉토리로 매핑합니다.
find: /^src(.+)/: src로 시작하는 경로를 src 디렉토리로 매핑합니다.

  server: {
    // this ensures that the browser opens upon server start
    open: true,
    // this sets a default port to 3000
    port: 3000
  },

server:

open: true: 개발 서버가 시작될 때 브라우저를 자동으로 엽니다.
port: 3000: 개발 서버의 기본 포트를 3000으로 설정합니다.

preview: {
    // this ensures that the browser opens upon preview start
    open: true,
    // this sets a default port to 3000
    port: 3000
  }
});

preview:

open: true: 미리보기 서버가 시작될 때 브라우저를 자동으로 엽니다.
port: 3000: 미리보기 서버의 기본 포트를 3000으로 설정합니다.