[React🔗Node.js] Node.js 웹 서버 개발환경 구축

리액트 프로젝트에 Node.js를 연결하려면 우선 express, nodemon, concurrently를 설치한다.
아래부터는 내가 팀원들한테 보여주려고 만든 가이드다. 근데 결국 무쓸모 됐다..🙄

npm install express nodemon concurrently

whale_Market

├── 📁 client *
├── 📁 node_modules

├── 📰 .gitignore

├── 📰 package-lock.json

├── 📰 package.json *

└── 📰 server.js *

— 파일 설명 —

📁 client : 기존 프로젝트 파일(.gitignore, package.json, node_modules을 포함한 모든 파일)이 그대로 들어가 있습니다. npm start를 여기로 들어가서 해주세요.

📰 package.json: express, nodemon, concurrently을 설치하고 리액트와 Node.js가 둘다 돌아가도록 설정해줬습니다.

• Express : Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체입니다.
• nodemon : Node.js에 기반한 웹 어플리케이션을 개발할 때, 파일에 변경사항이 발생했을 때마다, 저절로 어플리케이션이 재실행되도록 도와주는 패키지입니다.
• concurrently : 명령어를 동시에 실행시켜주는 모듈입니다.

📰 server.js:

— 서버 구동 설명 —

📁 whale_Market 터미널에서 node server.js를 입력하면 터미널에 ‘Listening on port 5000’이 뜹니다.

브라우저를 열고 http://localhost:5000에 접속해보시면 ‘Cannot GET /’이 뜰겁니다. 서버가 동작하고 있다는 의미입니다.

http://localhost:5000/api/hello로 다시 들어가보시면 {”message”: “Hello Express!”}를 확인할 수 있습니다.

— 참고한 영상 —