create-react-app을 통해 만든 React App은 기본적으로 3000번 port를 사용해서 구동되도록 설정되어있다.
하나의 프로젝트를 개발하거나 사용할 때는 괜찮지만,
여러개의 프로젝트를 동시에 실행하거나 개발 환경에 따라 포트를 변경해야 될 경우가 있기 때문에 port 변경하는 방법을 알아보고 사용해보았다.
package.json 파일 수정하여 포트 설정
- React Project 폴더에서
package.json파일을 찾아서 아래와 같이 코드를 수정해 줄 것이다.변경 전 코드
"scripts": { "start": "react-scripts start", },변경 후 코드 (mac os, linux 환경)
"scripts": { "start": "export PORT=3001 &&react-scripts start", },
export port {지정할 port번호}코드를 추가해 주면 된다.윈도우환경에서는
export대신set으로 작성해 주면 된다.
- 지정한 실행어로 리액트 앱을 실행하면 된다.
명령어를 통해 포트 설정
리액트 프로젝트 폴더에서 아래의 명령어를 사용하여 리액트 앱을 실행시킬 수도 있다.
이 방법을 사용하면 앱을 구동할 때 한 번만 적용된다.PORT={지정할 port} npm start
