Axios, CORS 설정을 적용한 React, Node.js 프로젝트

React 프로젝트의 설정

 
React는 사용자 인터페이스를 구축하는데 사용되는 자바스크립트 라이브러리이다
Create React App을 이용해 React 프로젝트를 설정해보려 한다
 

1. 프로젝트 폴더 생성 

npx create-react-app my-react-app

 

2. react 개발 서버 실행

npm run start

 
=> 실행되는 것 확인
http://localhost:3000
 
 

Node.js와 React 통신 설정 

axios를 사용하여 프론트엔드에서 백엔드로 데이터를 전송하고 받아오는 API 통신 구현 

Axios : Http 요청을 쉽게 보낼 수 있는 자바스크립트 라이브러리. 
GET, POST, PUT, DELETE 요청을 보내는데 사용되며 React에서 백엔드 API와 통신할 때 유용하다

 

1. Axios 설치

React 프로젝트에서 다음 명령어를 실행

npm install axios

 
 

2. 서버 디렉토리 만들기

2-1. server 폴더와 server.js 파일 생성

server.js 생성

 
2-2. Express 설치
React에서 만들어진 작업물은 클라이언트단에서 동작하는 파일들이다 
여기에 서버 (node.js)를 구축하기 위해 서버 관리모듈 express를 프로젝트 폴더에 설치해야함 

npm install express

 
 

3. API 생성
 

Server.js / 백엔드

const express = require('express');
const app = express();
// cors 미들웨어를 적용
const cors = require('cors');

// CORS 문제 해결을 위한 미들웨어 설정
app.use(cors());

const PORT = 5000;

app.get('/api/data', (req, res) => {
    const data = {
        message: 'Hello from Node.js!'
    };
    res.json(data);
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

=> /api/data 경로에서 JSON 데이터를 반환하는 API 
CORS 해당사항은 5번에 입력 
 

 
4. React에서 Axios로 API 호출하기

> Axios를 사용해 백엔드로부터 데이터를 받아오는 방법을 구현
 
4-1. App.js / 프론트엔드

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        // Axios로 Node.js 서버에 GET 요청 보내기
        axios.get('http://localhost:5000/api/data')
            .then((response) => {
                setData(response.data.message);
            })
            .catch((error) => {
                console.error('Error fetching data:', error);
            });
    }, []);

    return (
        <div>
            <h1>React와 Node.js 통신 설정</h1>
            <p>{data ? data : 'Loading...'}</p>
        </div>
    );
}

export default App;

useEffect를 사용
컴포넌트가 렌더링될 때 Axios로 Node.js 서버에 get 요청을 보내고
서버로부터 데이터를 받아 화면에 출력함 
 
 

5. CORS 

CORS(Cross-Origin Resource Sharing) : 브라우저 보안 정책, 서로 다른 도메인 간의 HTTP 요청을 제한한다
기본적으로 브라우저는 다른 도메인에서 오는 요청을 허용하지 않으며,
이를 해결하기 위해 서버에서 CORS 설정을 해준다

 
5-1. Node.js에서 CORS 설정 해주기
server.js

// cors 미들웨어를 적용
const cors = require('cors');

// CORS 문제 해결을 위한 미들웨어 설정
app.use(cors());

> 모든 도메인에서 들어오는 요청을 허용
 

// React 개발 서버(포트 3000)**에서 들어오는 요청만 허용
app.use(cors({
    origin: 'http://localhost:3000' // 허용 도메인
}));

> React  개발 서버에서 들어오는 요청만 허용
 
5-2. 적용 코드

server.js

// server.js (Node.js 백엔드)
const express = require('express');
const app = express();
// cors 미들웨어를 적용
const cors = require('cors');

// CORS 문제 해결을 위한 미들웨어 설정
app.use(cors());

// React 개발 서버(포트 3000)**에서 들어오는 요청만 허용
/*
app.use(cors({
    origin: 'http://localhost:3000' // 허용할 도메인
}));
*/

const PORT = 5000;

app.get('/api/data', (req, res) => {
    const data = {
        message: 'Hello from Node.js!'
    };
    res.json(data);
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

 
 

6. 실행

npm run start

success