[React] 리액트 실행할 때 포트 변경 하는 방법

웹 프로그램을 진행하기 위해서 사용하는 플랫폼중 하나가 바로 React(리액트)입니다. 이것 저것 테스트를 위해서 React를 두 개를 띄우려 하는 순간부터 문제가 발생합니다. 바로 포트가 겹치는 현상입니다.

 

이번 포스팅에서는 알면 간단한 React(리액트)에서 실행하는 포트를 변경하는 방법에 대해서 알아보겠습니다.

---

React(리액트)란 무엇인가

React(리액트)는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리입니다. 웹 프로그래밍을 하기 위해서 기본적으로 알아야 할 3가지 요소가 바로 Html, Css, Javascript죠. 이때, Html의 요소와 Javascript의 요소를 하나로 묶어서 Javascript로 만들어 사용하는 플랫폼입니다.

 

아래는 리액트를 알아보고 배워볼 수 있는 리액트 홈페이지 주소 입니다.

리액트 홈페이지 주소 : https://ko.reactjs.org

 

리액트를 처음 접하게 되면 굉장히 생소합니다. 컴포넌트라는 기반으로 동작을 하고 있기에 기본 Javascript만의 문법을 포함하여 JSX라는 문법까지 익혀야 하기 때문입니다. 하지만 한번 익혀 놓으면 컴포넌트라는 모듈을 만들고 캡슐화 할 수 있기 때문에 재사용성이 굉장히 편리하다는 장점이 있습니다.

---

React(리액트)에서의 포트

기본적으로 Node.js기반에서 React를 사용할때 발생되는 문제입니다. 리액트의 기본포트는 3000번으로 동작을 하고 있습니다. 그래서 최초에 리액트를 실행시키면 localhost:3000 이라는 포트에서 내가 만든 웹 어플리케이션을 확인할 수 있습니다.

 

문제는 두 번째 다른 웹 어플리케이션을 실행할 때 발생합니다. 동일한 3000번 포트로 프로세스를 동작시킬 수 없기 때문에 리액트는 알아서 다른 포트로 설정할지 사용자에게 물어보고 3000번이 아닌 다른 임의의 포트로 동작을 진행합니다. 즉, 충돌이 발생한다는 것입니다. 그래서 서로다른 리액트 앱을 띄우기 위해서는 각각의 포트를 지정해야할 필요가 있습니다.

 

그럼 다음에서 포트를 변경하는 방법에 대해서 알아보도록 하겠습니다.

---

React(리액트) 포트 변경 방법

리액트에서 포트를 변경하는 방법은 다음과 같이 package.json 파일을 수정하면 됩니다. 운영체제에 따라서 설정하는 문구가 다릅니다.

 

package.json

...

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 },
 
 ...

기본적인 package.json의 설정은 위와 같습니다. scripts 요소에서 start 에 맞는 요소를 실행하면 react-scripts start 라는 명령어가 실행되고 리액트가 실행됩니다. 이 요소가 있기 때문에 우리는 간단히 npm start 라는 명령어를 사용할 수 있는 것입니다. 그럼 포트 변경을 위해서 이 부분을 수정하도록 하겠습니다.

 

Windows 방법

package.json

...

"scripts": {
    "start": "set PORT=9000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 },
 
 ...

Linux 방법

package.json

...

"scripts": {
    "start": "export PORT=9000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 },
 
 ...

 

start 스크립트에서 먼저 PORT라는 부분을 원하는 포트로 수정하고 리액트를 실행하라는 의미입니다. 실행할때마다 이 스크립스트를 가져와서 실행하기 때문에 포트 변경이 가능한 것입니다.

---

저도 처음에 리액트를 접하면서 단순히 웹 UI를 만들기 위해서 사용했지만 Node.js도 익숙치 않고 React도 익숙치 않아서 이리저리 찾아서 진행해 보고 있습니다. 뭐든 처음이 익숙하지 않아서 어려울 뿐, 자주 사용하다 보면 익숙해지고 사용법도 쉽게 다가오게 될것 같습니다.

 

오늘은 React(리액트)에서 포트변경해서 동작시키는 방법을 알아보았습니다. 도움이 되셨으면 좋겠습니다. 이상입니다.