react 설치 기본포트설정이 5173인가요?

어떤 도구를 사용해 리액트를 설치했느냐에 따라 기본 포트 번호가 다릅니다.

---

1. 왜 5173인가요? (Vite)

최근 제가 안내해 드린 방식인 **Vite(비트)**라는 도구를 사용하면 기본 포트가 **5173**으로 설정됩니다.

• Vite는 차세대 프레임워크 빌드 도구로, 매우 빠른 속도 덕분에 최근 리액트 개발의 표준으로 자리 잡았습니다.

2. 예전에는 3000이었나요? (CRA)

과거에 가장 많이 쓰였던 **CRA(Create React App)**라는 도구는 기본 포트가 **3000**이었습니다.

• 많은 강의나 블로그 글이 예전 기준으로 작성되어 있어 리액트 하면 3000번 포트를 떠올리시는 경우가 많습니다.

---

3. 주요 도구별 기본 포트 요약

도구 (Tool)	기본 포트 (Default Port)	비고
Vite	5173	현재 리액트 공식 문서 권장 방식
CRA	3000	예전 리액트 설치 표준 방식
Next.js	3000	리액트 기반 풀스택 프레임워크

---

4. 포트 번호를 내 마음대로 바꿀 수 있나요?

네, 당연히 가능합니다! 만약 5173 포트가 이미 다른 프로그램에 의해 사용 중이거나, 본인이 원하는 번호가 있다면 설정 파일에서 변경할 수 있습니다.

Vite 기준 변경 방법:

1. 프로젝트 폴더의 vite.config.js 파일을 엽니다.
2. 아래와 같이 server 설정을 추가합니다.

JavaScript

 

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000, // 💡 여기서 원하는 포트 번호로 변경 가능
  }
})

---

💡 팁: 만약 포트가 충돌한다면?

Vite는 똑똑해서 만약 5173 포트를 이미 다른 리액트 프로젝트가 쓰고 있다면, 자동으로 5174, 5175 식으로 번호를 하나씩 올려서 실행해 줍니다. 터미널(콘솔)에 뜨는 주소를 잘 확인하시면 됩니다.

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.