vite.config.js 파일에 별도의 서버정보를 세팅하면 좋은 점

vite 세팅 이후에 vite.config.js이 생성된다.

• 초기 설정

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
});

• 서버 설정 하기

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
// https://vite.dev/config/
export default defineConfig({
  server: {
    port: 3000,
    open: true,
    host: true,
  },
  plugins: [react()],
});

위처럼 server 설정을 추가하는 이유는 개발 서버의 동작 방식을 조정하기 위해서이다.

server 설정이 필요한 이유

Vite는 기본적으로 개발 서버를 제공하는데, 이를 원하는 환경에 맞게 커스터마이징할 수 있다. 특히, 포트 변경, 자동 브라우저 열기, 네트워크 호스트 설정이 필요할 때 server 옵션을 사용할 수 있다.

추가된 server 옵션 설명

server: {
  port: 3000,    // 개발 서버를 3000번 포트에서 실행 (기본값은 5173)
  open: true,    // 서버 실행 시 브라우저 자동으로 열기
  host: true,    // 외부 네트워크에서도 접근 가능하도록 설정
},

1. port: 3000
   • 기본적으로 Vite는 5173 포트를 사용하지만, 3000으로 변경하면 익숙한 포트에서 실행 가능.
   • 예를 들어, localhost:3000에서 개발 서버를 띄울 수 있음.
2. open: true
   • 개발 서버 실행 시 자동으로 브라우저를 열어줘서, 매번 수동으로 브라우저를 열 필요 없음.
   • npm run dev 또는 yarn dev 실행하면 바로 브라우저에서 확인 가능.
3. host: true
   • 기본적으로 Vite는 localhost에서만 접근할 수 있지만, host: true를 설정하면 같은 네트워크 내의 다른 기기에서도 접근 가능.
   • 예를 들어, 192.168.x.x:3000 같은 로컬 IP로 접속할 수 있어서, 모바일 기기나 다른 컴퓨터에서도 확인 가능.
   • host: "0.0.0.0"과 같은 효과를 가짐.

언제 유용할까?

• 3000 포트에서 실행해야 하는 기존 프로젝트와 통합할 때 (React, Next.js 등은 보통 3000번을 사용)
• 브라우저를 자동으로 열고 싶을 때 (open: true)
• 같은 네트워크 내에서 모바일 기기로 테스트할 때 (host: true)

만약 별도로 서버 설정이 필요 없다면 원래 코드 (server 옵션 없이) 그대로 둬도 문제없이 작동하긴 함