React와 express 연동 및 concurrently package로 React 서버와node 서버 동시 실행 하기(2)

React와 express 연동 및 concurrently package로 React 서버와 node 서버 동시 실행 하기(1) 게시물의 내용의 
다음 step입니다.

 

 

6.  클라이언트 폴더 생성

 

npx create-react-app <파일명>

 

 

위에 명령어를 터미널에 입력하여 client 폴더를 설치합니다. 이때 파일명은 server와 파일명을 구분 짓기 좋게

client로 작명해 줍니다. 설치 완료 하면?

 

 

 

 

이렇게 client 폴더 server 폴더의 경로를 잘 설정하여 설치 완료 했습니다.  

 

 

7.  터미널에  npm install -D concurrently 명령어 입력 후 세팅

 

-D는 devDependencies에 설치한다는 것을 의미합니다.

설치가 잘 됐으면 루트 폴더에 있는 package.json 파일에 접근해서 scripts에 코드를 추가해 줍니다.

 

 

 

 

"server":"nodemon server/server.js",
"client":"npm start --prefix client",
"dev":"concurrently \"npm run server\" \"npm run client\""

 

 

위의 세줄을 그대로 scripts에 추가해 줍니다.

 

8.  실행

 

 

npm run dev

 

 

순서대로 다 완료하셨다면?

터미널에 위에 명령어를 입력해 실행합니다!

실행이 성공적으로 됐다면 터미널에 이렇게 성공했다는 메시지가 뜰 것이고

 

 

 

 

 

브라우저도 아주 잘 뜨는 모습을 확인하실 수 있습니다.

 

9.  address already in use  에러 해결 방법 

 

서버를 실행할 때 간혹 

 

 

 

과 같은 에러가 뜰 것입니다. 이 에러는 포트가 이미 다른 프로세서에서 사용 중이기 때문에 발생하는 오류입니다.

현재 보시는 에러는 9000번 포트가 사용 중이라서 에러가 난 것입니다.

이럴 때는 포트 번호를 바꾸거나 명령어를 통해 해결할 수 있습니다.

명령어를 통한 방법은 터미널에 아래 명령어를 입력하면 활성화된 프로세스들의 리스트를 확인할 수 있습니다.

 

 

 lsof  -i  TCP:<포트번호>

 

 

현재 에러가 발생한 포트번호는 9000번 이므로 터미널에  아래의 명령어를 입력하겠습니다. 

 

 

lsof  -i  TCP:9000

 

 

 

동그라미가 그려진 PID라는 문구와 그 값이 보이시나요?

여기서  PID란!

 Process ID의 줄임말로 운영체제에서 프로세스를 식별하기 위해 부여하는 번호를 의미합니다 

이제 해당 프로세스의 PID를 알아냈으니 종료를 시켜볼까요?

 

터미널에 입력하면 종료시킬 수 있습니다 말 그대로 kill 한다!라고 생각하시면 되겠네요.  터미널에 kill -9 1517을 입력합니다.

 

 

 kill -9 <PID값>

 

 

실행!

 

실행 후 이게 나오면 종료가 잘 된겁니다.

 

프로세스를 종료시켰으니 이제 다시 프로세스를 사용 중인지 검사해 봐야겠죠?

 

 

 

종료가 된것을 한번더 잘확인 했습니다!

 

이제 다시 npm run dev 명령어를 통해 실행해 보겠습니다!

 

아주 성공적!