[React] Node 서버와 React 연동하기
cra
로 이미 리액트 프로젝트 생성 완료- 서버 프로젝트 생성 완료
- 노드 서버/리액트 서버 따로 동작
-> 이 세 가지를 전제두고 글을 작성한다.
Proxy를 사용하는 이유
- 보통은 보안과 성능을 위해 사용
- React에서는 개발시 사용하는 주소와 실제 배포용 주소가 달라져 하드코딩을 하면 바꾸기 번거롭기 때문도 있다.
- proxy 설정을 해주면 base url은 생략하고 코드를 짤 수 있다.
-> 즉, proxy를 설정해놓은 코드 한 줄만 바꾸면 된다.
- proxy 설정을 해주면 base url은 생략하고 코드를 짤 수 있다.
서버와 리액트 연동하기
setupProxy.js
리액트_프로젝트/src
아래에setupProxy.js
파일을 생성한다.npm install http-proxy-middleware
로 모듈을 설치한다.setupProxy.js
내용 작성
const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = (app) => {
app.use(
createProxyMiddleware('/api', {
target: 'http://localhost:5000/', // 노드 서버 주소
changeOrigin: true
})
)
}
- target: axios.get('/api/login')으로 요청 시 앞에 붙을 base url
- changeOrigin: 대상 서버 구성에 따라 호스트 헤더가 변경
여기까지 설정해주면 설정 완료!
+) cra
로 리액트 프로젝트를 생성한 경우, package.json
에 proxy: ~
를 설정해주는 방법도 있다.
간단한 테스트
Node.js로 아주 간단한 서버를 하나 만들어서 테스트를 해볼 수 있다.
1. 노드_프로젝트/index.js
파일을 하나 만든다.
2. npm install cors
로 모듈을 설치한다.
3. index.js
파일 내용 작성
// 노드_프로젝트/index.js
const express = require('express');
const app = express();
const cors = require('cors');
app.use(cors());
app.get('/api', async (req, res) => {
res.send('hello world');
})
app.listen(5000); // React가 3000번 포트를 사용하므로 다른 포트를 지정해주는게 좋다.
- CORS(Corss-Origin Resource Sharing): 자신이 속하지 않은 다른 도메인/프로토콜/포트에 있는 리소스를 요청하는 HTTP의 요청 방식이다.
cors 모듈의 자세한 사용법은 여기서 확인할 수 있다.
npm install axios
로 패키지를 설치한다.리액트_프로젝트/src/App.js
에 테스트 코드를 작성한다.
// 리액트_프로젝트/src/App.js
import axios from "axios";
import {useEffect} from "react";
function App() {
const sendRequest = async() => {
const res = await axios.get('/api');
console.log(res.data);
};
useEffect(()=>{
sendRequest();
});
return (
<div className="App">
</div>
);
}
export default App;
- Node.js와 React 서버를 둘 다 실행 시킨다.
콘솔창에 제대로 찍히는 것을 확인하면 연결 성공!
Author And Source
이 문제에 관하여([React] Node 서버와 React 연동하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dldmswjd322/React-Node-서버와-React-연동하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)