패키지 설치

npm install react-router-dom axios jotai jotai-devtools @tanstack/react-query sass react-hook-form yup @hookform/resolvers js-cookie jwt-decode lucide-react

npm install 

react-router-dom          # 라우팅
axios                     # API 요청

jotai                     # 상태관리
jotai-devtools            # 디버깅 도구
@tanstack/react-query     # 비동기 상태 관리

sass                      # scss 문법

react-hook-form           # 폼 라이브러리
yup                       # 입력값 유효성 검사
@hookform/resolvers       # react-hook-form과 yup을 연결해주는 어댑터

js-cookie                 # 브라우저 쿠키를 쉽게 다루기 위한 유틸리티
jwt-decode                # JWT 토큰을 디코딩하여 정보 추출

lucide-react              # 아이콘 컴포넌트 모음

환경설정

## 터미널 ##

touch .env                      # .env 폴더 생성
touch .env.production           # .env.production 폴더 생성lo

## .env ##

VITE_PORT=5173
VITE_API_URL=http://localhost:8080
VITE_WS_URL=ws://localhost:8080

## .env.production ##

VITE_API_URL=https://api.mycalendar.com       # 도메인 주소

## vite.config.js ##

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

// <https://vite.dev/config/>
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd()); // loadEnv로 현재 모드에 맞는 .env 파일을 읽어옴

  return {
    plugins: [react()], // React 플러그인을 Vite에 등록
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'), // 모듈 import 시 경로 별칭(alias)을 설정
      },
    },
    server: {
		  port: parseInt(env.VITE_PORT) || 5173,
		  proxy: {
		    '/ws': {
		      target: env.VITE_WS_URL || 'ws://localhost:8080',
		      changeOrigin: true,
		      ws: true,
		    },
		    '/api': {
		      target: env.VITE_API_URL || '<http://localhost:8080>',
		      changeOrigin: true,
		      rewrite: (path) => path.replace(/^\\/api/, ''),
		    },
		  },
		},
  };
});