리액트 개발서버 포트번호 변경: 3000번이 아닌 다른 번호로 설정하기!

리액트를 사용할 때 개발서버의 기본 포트번호인 3000번을 다른 번호로 바꾸는 방법입니다. 가끔 3000번 포트가 이미 다른 프로그램에서 사용 중이거나, 그냥 다른 번호로 바꾸고 싶을 때가 있죠? 이런 상황에서 포트번호를 쉽게 변경할 수 있습니다!

포트번호를 바꾸는 간단한 방법

포트번호를 바꾸는 방법은 몇 가지가 있는데, 그중에서 쉽게 할 수 있는 방법을 소개하겠습니다.

1. package.json 수정하기 (리눅스 환경)

가장 쉬운 방법은 package.json 파일을 살짝 수정하는 거예요. 아래와 같이 scripts 섹션에 start 명령어를 수정해 주세요.

export PORT=53000

사용할 포트번호를 명시하고 원래 있던 react-scripts start 명령어와는 "&&" 기호로 연결해 줍니다. 가장 간단한 방법 중 하나죠. 이렇게 하면 3000번으로 시작하던 서버가 53000번 포트를 사용해서 동작하게 됩니다.

그런데 이 방법은 OS에 따라서 약간씩 명령어가 달라집니다. 제가 여기서 소개한 방법은 리눅스에서 개발을 할 때 해당되는 내용이고 윈도나 맥 등 다른 운영체제라면 방법이 살짝 달라집니다. 그래서 운영체제 가리지 않고 사용할 수 있는 방법을 바로 소개하겠습니다.

2. .env 수정하기

먼저 프로젝트 루트 디렉터리에 ".env" 파일을 만들어 줍니다. 파일 이름이 마침표로 시작해야 합니다. 그리고 파일 내용에는 다음과 같이 써줍니다.

PORT=53000

.env파일을 저장하고 "npm start"해서 개발 서버를 다시 시작합니다. 환경 변수가 변경되면 꼭 서버를 다시 시작해야 합니다.

참고할 만한 리액트 공식 문서

추가로 리액트 공식 문서에서 환경 변수에 대한 내용도 확인해 보세요. 이 링크에서 확인할 수 있어요: React 공식 문서: 환경 변수.

리액트 개발서버의 포트번호를 바꾸는 방법을 알아봤어요! 아주 간단한 설정이지만 가끔 꼭 필요한 순간이 오곤 하죠. 이 팁이 여러분의 개발에 조금이나마 도움이 되었으면 좋겠습니다. Happy coding! 🚀

 

끝!