React + Node.js(express) 연동하기

2022. 9. 26. 11:54

728x90

💡 express
- Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크
- Node.js의 핵심모듈인 http와 connect 컴포넌트를 기반으로 하는 웹 프레임워크

💡 cors(Cross-Origin Resource Sharing) Policy
- 교차 출처 리소스 공유라는 기능으로 실행 중인 웹 어플리케이션이 서로 다른 출처의 리소스에 request할 때, 보안상의 이유로 교차 출처 HTTP 요청을 제한하는 것
- 예를 들어 리액트 서버(http://localhost:3000), 노드 서버(http://localhost:6001)으로 실행될 경우, 브라우저는 다른 서버에 요청을 하게 되는데 이때 CORS 정책의 이유로 에러가 발생한다.

환경세팅

# 순서
1. node 설치
2. 프로젝트 사용할 폴더 생성
3. CRA 이용하여 client 파일 생성
4. 생성한 파일로 이동 후, 터미널에서 yarn start 명령어 실행
5. 정상적인 리액트 화면 확인
6. express 설치
7. server 폴더 및 server.js 파일 생성 & Router 폴더 및 test.js 파일 생성
8. server.js 파일 코드 작성 (포트번호 6001로 변경)
9. test.js 파일 코드 작성
10. 최상단 폴더 위치에서 서버 실행
11. 웹브라우저 접속 확인
12. nodemon과 concurrently 설치
13. 모듈 설치 후, package.json 수정

14. client의 src 폴더에 setupProxy.js 파일 생성
15. http-proxy-middleware 및 axios 설치
16. setupProxy.js 파일 코드 작성
17. test.js와 App.js 파일 내용 수정
18. 실행

1. node 설치

https://nodejs.org/en/

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

2. 프로젝트 사용할 폴더 생성

mkdir autoCommute
cd autoCommute

3. CRA(create-react-app) 이용하여 client 파일 생성

create-react-app client

4. 해당 폴더로 이동하여 터미널에 yarn start 명령어 실행

cd client
yarn start

5. 정상적인 리액트 화면이 나오면 성공

6. express 설치

cd .. // 프로젝트 폴더 위치에서 명령어 실행
yarn add express

7. server 폴더 생성 및 server.js 파일(서버가 실행될 때, 찾아갈 파일) 생성 & Route 폴더와 test.js 파일 생성

8. server.js 파일 코드 작성 (리액트의 포트는 3000이므로 express는 다른 포트 사용(나는 6001 포트))

const express = require('express');
const app = express();
const test = require('./Router/test');

app.use('/api', test);

const port = 6001; // 노드서버가 사용할 포트넘버
app.listen(port, () => console.log(`${port}`));

9. test.js 파일 코드 작성

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.send('hi');
})

module.exports = router;

10. 최상단 폴더 위치에서 명령어 실행

node ./server/server.js

11. 웹브라우저에서 접속 (포트는 아까 9번에서 설정한 번호로)

12. nodemon과 concurrently 설치

- nodemon : 개발시 변경사항을 실시간으로 업데이트 해주기 위함이며 --dev는 개발환경에만 적용하기 위한 모듈

- concurrently : 리액트서버와 노드서버를 동시에 실행시키기위한 모듈

yarn add nodemon --dev
yarn add concurrently

13. 모듈 설치 후, package.json 수정

"scripts": {
    "server" : "cd server && nodemon server",
    "client" : "cd client && yarn start",
    "start" : "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },

client 폴더 안에 있는 package.json이 아닌, client 밖에 있는 package.json에 scripts 부분을 추가한다.

14. client의 src 폴더에 setupProxy.js 파일 생성

15. http-proxy-middleware 및 axios 설치

cd client // client 폴더 위치에서 실행하기 위해
yarn add http-proxy-middleware
yarn add axios

16. setupProxy.js 파일 코드 작성

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    createProxyMiddleware('/api', {
      target: 'http://localhost:6001',
      changeOrigin: true,
    })
  )
}

17. test.js와 App.js 파일 내용 수정

▼ test.js 파일

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.send({ test: 'hi'});
})

module.exports = router;

▼ App.js 파일

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

const App = () => {
  const callApi = async() => {
    axios.get('/api').then(res => console.log(res.data.test));
  }

  useEffect(() => {
    callApi();
  }, []);

  return (
   <>
    test
   </>
  );
}

export default App;

18. 실행