강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

ye1n님의 프로필 이미지
ye1n

작성한 질문수

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

node.js와 express.js

포트 구분 관련

작성

·

8

·

수정됨

0

클라이언트를 실행하는 포트와 node를 실행하도록 하는 포트를 다르게 설정하는 이유가 있을까요?

강의를 보면 5500과 3000으로 다르게 사용하고 있어서 localhost:3000 으로 이동해서 동작을 확인하고 있는데 별도로 나누는 이유가 궁금합니다!

답변 2

0

효빈 Hyobin님의 프로필 이미지
효빈 Hyobin
지식공유자

안녕하세요 🙂 질문 감사합니다.

강의 초반에는 VSCode의 익스텐션인 Go Live를 사용해 3000번 포트로 실행하였으나,
이후 SPA 프로젝트를 실행할 때에는 node 서버 코드를 직접 작성하여, 실행까지 하기 때문에 5500번 포트를 사용하는 것입니다 :)

0

안녕하세요, 인프런 AI 인턴입니다. ye1n님.

클라이언트와 서버의 포트를 다르게 설정하는 이유는 주로 개발 환경에서 발생할 수 있는 충돌을 방지하고, 각각의 역할을 명확하게 분리하기 위함입니다. 다음은 이러한 포트 구분의 주요 이유입니다:

  1. 개발 환경의 표준화: 일반적으로 클라이언트는 Live Server 같은 도구를 사용하여 브라우저에 실제 개발 중인 웹 애플리케이션을 띄우고, 서버는 Node.js 서버에서 API 혹은 백엔드 로직을 테스트합니다. 이런 경우, 클라이언트와 서버는 서로 다른 포트에서 실행되어야 충돌을 방지할 수 있습니다. 클라이언트는 흔히 5500 같은 포트를 사용하며, Node.js 서버는 3000 포트를 사용하는데, 이는 개발자 사이에서 굳어진 일반적인 관습입니다.

  2. 확장성: 서로 다른 포트를 사용함으로써 해당 서버 환경이 확장되는 경우에도 쉽게 분리하여 관리할 수 있습니다. 예를 들어, 서버가 마이크로서비스 아키텍처로 확장할 때에도 각각의 서비스가 다른 포트로 구동되도록 할 수 있습니다.

  3. 테스트: 각 포트에서 개별적으로 문제를 식별하고 테스트할 수 있어 더욱 명확한 디버깅이 가능합니다. 클라이언트나 서버에서 문제가 발생할 때 해당 포트에서 접근하여 구체적인 문제를 파악할 수 있습니다.

  4. 프로덕션 준비: 프로덕션 환경에서는 보통 프록시 서버를 사용하여 외부 접근 포트와 내부 서비스 포트를 다르게 설정하게 됩니다. 개발 단계에서도 이러한 구조에 익숙해질 수 있도록 포트를 구분하여 설정하는 것이 좋습니다.

관련된 유사한 질문과 해결 방안에 대한 논의를 원하신다면, Express 초반 오류 해결라는 게시물에서 Express와 포트 설정에 대한 문제를 다루고 있으니 참고하시기 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

ye1n님의 프로필 이미지
ye1n

작성한 질문수

질문하기