server 연결도 하고, client도 npm start 해야 해! + 플젝 구조

드디어 예정되었던 아르바이트가 끝이났다! 다시 열심히 개발에 매진해야지!

이번 글은 저번에 봐둔 에러를 정리하려는 글이다.

 

 

⛔ vscode에서 cmd > npm start를 하면 MySQL 연결 성공! 이라는 성공 문구가 뜨는데,
여전히 localhost:3000에서는 사이트에 연결할 수 없다는 문구가 뜬다.

 

 

 

결론

리액트 프로젝트 server랑 client 모두 npm start를 해주어야 한다.

서버와 클라이언트 디렉토리에서 각각 실행해주어야 한다.

 

React 클라이언트 실행하기:

 

1. 새 터미널 창을 열어 dessert-recipe-client 디렉토리로 이동한다

cd E:\dessert-recipe-server\dessert-recipe-client

 

2. 클라이언트를 시작한다

npm start

 

이렇게 하면 React 앱이 3000번 포트에서 실행되고, localhost:3000에서 접근할 수 있다.

∴ 서버와 클라이언트의 포트 번호에 따라 각각 실행해주어야 한다.

 

나의 경우에는 서버는 5000번 포트에서, 클라이언트는 3000번 포트로 지정하였으므로 서버와 클라이언트 디렉토리로 가서 각각 npm start를 외쳐주면 된다.

• 예) dessert-recipe-server에서 npm start를 실행하면 서버가 5000번 포트에서 실행되고, React 클라이언트는 별도로 실행해야 한다.

 

 

원리와 이유

React 애플리케이션과 Express 서버는 각각 별개의 프로세스에서 실행되기 때문에 각각의 디렉토리에서 npm start를 실행해야 한다.

 

1. 서버와 클라이언트의 역할:
   • Express 서버: 데이터베이스와의 연결 및 API 요청을 처리하는 역할을 한다. 즉, 사용자의 요청을 받아서 필요한 데이터를 제공하는 역할을 맡고 있어요.
   • React 클라이언트: 사용자 인터페이스(UI)를 담당하며, 브라우저에서 사용자와 상호작용하는 부분을 처리한다.
2. 포트 번호:
   • 서버: 보통 5000번 포트를 사용함
   • 클라이언트: 보통 3000번 포트를 사용함

이런 구조로 운영하면, 클라이언트(React 앱)는 서버(Express 앱)와 RESTful API를 통해 통신하면서 데이터를 주고받을 수 있다.

각자 다른 포트에서 실행되므로 서로 충돌 없이 작동할 수 있다.

 

 

---

 

 

프로젝트 파일 구조  (구조 변경 있을 수 있음 ➡ 12월 중에 디렉토리 구조 변경함)

 

dessert-recipe-server 안에
dessert-recipe-client, node_modules(client 안에도 있음), routes, package.json, package-lock.json, server.js가 있고.

 

dessert-recipe-server/
├── dessert-recipe-client/
│   ├── node_modules/ (생략)
│   ├── public/

│   │   ├── imgs/ (레시피 사진들)
│   │   ├── index.html
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── src/
│   │   ├── components/
│   │   │   ├── Main/
│   │   │   │   └── Home.js
│   │   │   ├── Recipe/
│   │   │   │   ├── AllRecipe.js
│   │   │   │   ├── CategoryRecipe.js
│   │   │   │   ├── DetailRecipe.js
│   │   │   │   └── RecommRecipe.js
│   │   │   ├── RecipeCRUD/
│   │   │   │   ├── DeleteRecipe.js
│   │   │   │   ├── InsertRecipe.js
│   │   │   │   └── UpdateRecipe.js
│   │   │   ├── Users/
│   │   │   │   ├── CollectUsersInfo.js
│   │   │   │   ├── Login.js (카카오 로그인/회원가입 포함)
│   │   │   │   └── MyPage.js
│   │   ├──  config/
│   │   │   └── dbConfig.js
│   │   ├──  db/
│   │   │   └── database.js

│   │   │   └── mysql 문서들.sql

│   │   ├──  styles/
│   │   │   └── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTest.js
├── .gitignore
├── package.json
├── package-lock.json
└── README.md

 

 

 

✅ 서버 연결 성공

Microsoft Windows [Version 10.0.19045.5011] (c) Microsoft Corporation. All rights reserved. E:\dessert-recipe-server>npm start > dessert-recipe-server@1.0.0 start > node server.js 서버가 5000번 포트에서 실행 중입니다. MySQL 연결 성공!

 

 

npm start를 해도 사이트가 표시되지 않아 당황했었는데, client도 켜주면 되는구나!