3. [ React + Node.js Exrpess ] 리액트와 익스프레스 연결하기

프로젝트 제작 계기

친구가 concurrently 설정이 되지 않는다고 애를 먹고 있어서 정보 공유차 풀스택 웹 개발을 위한, 백엔드와 프론트엔드의 연결을 실행시켜 놓는 과정을 기록한다. cors 설정 및 프록시, concurrently 설치에 애를 먹는 사람을 위해 프로젝트를 파일로 첨부하였으니 아무나 다운받아 사용해도 괜찮음! 

 

프로젝트 파일 링크 : https://drive.google.com/file/d/1pc476UJHfviBeZltOiG1FI2fGWO2sTbo/view?usp=sharing 

boiler.zip

 

 

1. 프로젝트명으로 [루트] 디렉토리를 만든다.

2. [루트] 디렉토리에서 Shift+우클릭으로 파워쉘 또는 터미널을 관리자 권한으로 열어, npx create-react-app client 로 client 라는 이름의 react 프로젝트를 만든다.

3. [루트] 디렉토리에 [server] 라는 폴더를 생성한다.

4. VsCode로 [server] 폴더를 열고 터미널을 열어 아래의 명령어를 입력해 express를 설치한다.

npm init (entry point:? 라고 되어있는 부분에서 내가 실행시킬 server.js 파일명을 입력한다.) 설치가 완료되면 package.json 파일이 생긴다.

5. server 폴더에서 터미널에 npm install express를 입력한다.

6. server 폴더에서 터미널에 npm install -g nodemon 를 입력한다. (서버의 내용이 수정되면, 자동으로 서버를 재실행해주는 라이브러리이다.)

7. server 폴더에서 터미널에 npm install cors 를 입력한다.

8. server.js파일을 생성해 아래 내용을 작성하고 저장한다.

const express = require('express') const app = express() app.use(express.json()); var cors = require('cors'); app.use(cors()); app.listen(5000,function(){     console.log('서버를 열었습니다.') }) app.get('/api/hello', function(req,res){     res.send('Open with server') })

9. 서버와 프론트를 동시에 실행시키기 위해 Concurrently를 설치한다. [server] 폴더에 있는  package-lock.json, package.json을 [루트] 디렉토리로 옮긴 뒤 [server] 폴더에서 터미널에 npm install concurrently --save 를 입력한다.
10. 방금 [루트] 폴더로 옮긴 package.json의 "scripts"에 아래의 내용을 작성한다.

"scripts": {     "test": "echo \"Error: no test specified\" && exit 1",     "start": "node server/server.js",     "backend": "nodemon server/server.js",     "dev" : "concurrently \"npm run backend\" \"npm run start --prefix client\""   },

11. 리액트를 설치한 [client] 폴더로 이동한다. 

12. proxy 설정을 하기 위해, [client] 폴더에서 터미널에 npm install http-proxy-middleware --save 를 입력한다.

https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually 에 따라 src 폴더에 setupProxy.js 파일을 만들고 아래 내용을 입력한다.

const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) {   app.use(     '/api',     createProxyMiddleware({       target: 'http://localhost:5000',       changeOrigin: true,     })   ); };

13. [client] 폴더에서 터미널에 npm install axios 를 입력한다. (AJAX를 위한 라이브러리이다.)

14. 프론트엔드와 백엔드가 잘 연결되었는지 확인해보기 위해 App.js에 아래 내용을 작성한다. 

import {useEffect} from 'react' import axios from 'axios'

function App() {   useEffect( ()=>{     axios.get('/api/hello')     .then(response => {console.log('서버실행',response)})   },[])

15. [루트] 디렉토리에서 터미널에 npm run dev 를 입력하여 백엔드와 프론트엔드를 동시에 켜고, console 창을 확인해본다.

연결에 성공함