React 와 Node 연결

모듈 설치

npm i -S express cors 

npm i nodemon -D

npm i http-proxy-middleware 등등

express : node.js 기반의 서버 구축을 위한 간단한 웹 프레임워크

cors : 다른 도메인에서 API 요청을 허용하기 위한 미들웨어

nodemon : 파일 변경 시 서버를 자동으로 재시작해주는 도구

http-proxy-middleware : 프록시 서버 설정을 위한 미들웨어 , API 요청을 다른 서버로 전달할 때 사

 

 

-S : 프로덕션 환경에서 필요한 모듈을 설치 (dependencies에 추가)

-D : 개발 환경에서만 필요한 모듈을 설치 (devDependencies에 추가)

 

 

전체 폴더

 

 

back 쪽 src 폴더의 server.js 생성

 

const express = require('express');

Express는 Node.js에서 서버를 쉽게 구성할 수 있도록 도와주는 웹 프레임워크 입니다.

 

const app = express();

express()를 호출하면 애플리케이션 인스턴스가 생성됩니다. app 객체는 라우팅,미들웨어 설정 등 모든 서버 관련 동작을 처리하는 역할을 합니다.

 

const cors = require('cors');

app.use(cors());

cors는 Cross-Origin Resource Sharing의 약자로 다른 도메인에서 API 요청을 허용해주는 미들웨어 입니다. 이 코드를 통해 프론트엔드에서 백엔드로 데이터를 요청할때 CORS 문제를 해결할 수 있습니다.

 

const server = require('http').createServer(app);

기본적으로 Express는 HTTP 모듈을 사용하여 서버를 실행합니다. http 모듈을 사용하여 Express 앱(app)을 기반으로 하는 서버를 생성합니다.

 

app.get('/',(req,res)=>{

    // 여기에서 db에서 데이터를 가져옴
    const dbData = ??  데이터베이스에서 가져온 데이터

 

    // 가져온 데이터를 응답으로 보냄
    res.send({message:'hello'})

    // res.send({message:dbData})
})

app.get() 메서드는 라우팅을 설정하는 부분입니다. 루트 경로(/)로 들어오는 get 요청에 대해 서버는 {message : 'hello'}라는 JSON 데이터를 응답으로 보냅니다. 프론트엔드에서 fetch 요청으로 데이터를 받아올 수 있습니다.

 

server.listen(8080, ()=>{
    console.log('')
})

port 8080에서 실행되도록 설정

server.listen()은 해당 포트에서 요청을 대기하는 서버를 시작하고 서버가 실행중임을 나타내는 메세지를 콘솔에 출력

 

 

setupProxy.js 생성

 

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

http-proxy-middleware는 프론트엔드에서 백엔드로 API 요청을 쉽게 프록시 해주는 미들웨어 입니다.

이 코드는 createProxyMiddleware 함수를 불러오고 이 함수는 프록시 서버를 설정하기 위한 미들웨어를 생성합니다.

 

module.exports = function(app){} 

프록시 설정을 적용하는 함수를 모듈로 내보내기 위한 코드

app은 express와 비슷하게 동작하는 React의 미들웨어 설정을 위한 객체로 여기서 프록시 미들웨어를 추가합니다.

app.use( createProxyMiddleware('/',{
target: 'http://localhost:8080/',
changeOrigin: true,
})
);

app.use()는 미들웨어를 추가하는 메서드로 이 경우 createProxyMiddleware()를 사용하여 프록시 미들웨어를 추가하고 있습니다.

'/' 는 경로 설정을 의미합니다. 이 프록시는 모든 경로에 대해 동작하게 됩니다.

target : 'http://localhost:8080/'는 목표 서버를 설정합니다. 프론트엔드에서 요청을 보낼 때 해당 요청이 포트 8080 로 프록시 됩니다.

changeOrigin : true 는 원본 도메인을 변경하도록 설정하는 옵션입니다. 이는 다른 도메인에 요청을 보낼 때 해당 요청이 동일한 출처에서 온 것처럼 동작하도록 보장합니다. 주로 CORS 문제를 해결할 때 유용합니다.

 

 

 

 

front 쪽 app.js 에서 서버의 값을 받아옴

 

 

1. useState 와 useEffect 사용

• useState는 data라는 상태 변수를 정의하고 처음엔 빈 객체로 초기화함
• useEffect는 컴포넌트가 처음 렌더링될 때 한 번 실행됩니다.

2.fetch 요청

• fetch('http://localhost:8080')를 통해 백엔드 서버(포트 8080)으로부터 데이터를 가져옴
• response.json()으로 JSON 응답을 받아 data 상태에 저장합니다.

3. 데이터 렌더링 

• 받아온 데이터에서 message 값을 꺼내 화면에 출력합니다.