웹개발 기본상식

백엔드, 프론트엔드 포트번호에 대해서...

Irene1988 2025. 4. 20. 14:13
728x90

보통 백엔드와 프론트엔드 프로젝트 구축할 때 포트번호가 별도로 나뉜다.

챗GPT에 너무나 궁금해서..

백엔드와 프론트엔드 포트번호를 동일하게 설정하면 안되는지... 물어봤다.

 

 

"백엔드 포트랑 프론트엔드 포트 똑같이 해도 돼?"

 

🎯 결론부터 말할게

❌ 프론트엔드랑 백엔드는 포트를 똑같이 쓰면 안 돼.

항상 서로 다른 포트를 써야 해.

✨ 이유

  1. 포트는 컴퓨터 안에서 '주소' 같은 거야.
    • 하나의 포트에는 하나의 프로그램만 연결될 수 있어.
    • 예를 들어 3000번 포트에 프론트엔드가 이미 서버를 열었다면,
      거기에 백엔드 서버를 또 띄우려고 하면 충돌나서 에러 터진다.
  2. 프론트와 백엔드는 '다른 프로그램'이야.
    • Next.js 개발서버 (yarn dev)는 자체 HTTP 서버를 연다.
    • Node.js (Express) 서버도 또 다른 HTTP 서버를 연다.
    • 서로 별개의 서버니까 포트를 달리 해야 해.

 

✨ 실제 예시를 보면

역할 포트
프론트엔드 (Next.js) 3000, 3005 등
백엔드 (Node.js Express) 3001, 4000 등

✅ 이렇게 다르게 설정하는 게 정석이다.

📚 추가 설명

만약 프론트(Next.js)와 백엔드(Node.js) 포트를 같이 하고 싶으면,
Next.js 안에 백엔드를 같이 심는 방식(API Routes)을 써야 해.
(Next.js 자체에 API 핸들러를 넣는 거야.)

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ name: 'Hello API' })
}

이런 식으로 하면 Next.js가 프론트+백엔드를 둘 다 맡아버려서 포트가 하나만 필요해.

 

하지만 지금 우리가 하는 거는
Next.js는 프론트 전용, Node.js Express는 백엔드 전용 → 둘이 명확히 나누는 "진짜 풀스택" 구조니까
포트를 다르게 유지하는 게 맞아.

 

✨ 한줄 요약

프론트엔드와 백엔드는 서로 다른 프로그램이니까, 포트는 다르게 써야 한다!
(같이 쓰고 싶으면 Next.js API Routes 같은 특수한 방법 써야 함.)

 

✋ 정리

상황 포트
프론트엔드 개발용 3005
백엔드 개발용 3001

나중에 배포할 때 Nginx 같은 걸 써서 통합 가능

 

(※ 참고로 운영 서버 배포할 때는 Nginx 같은 거 써서 포트를 숨기고 하나처럼 만들어주는 경우가 많아. 지금은 신경 안 써도 돼!)

 

 

 

*위 포스팅은 챗GPT 답변을 토대로 작성되었습니다.

728x90
댓글수0