React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(5)

Node.js와 React 통신 설정: Axios 사용과 CORS 문제 해결

이번 강의에서는 Node.js와 React 간의 통신을 설정하는 방법을 다룹니다. Axios를 사용하여 프론트엔드에서 백엔드로 데이터를 전송하고 받아오는 API 통신을 구현합니다. 또한 CORS 문제를 해결하는 방법도 설명합니다.

Axios 사용과 CORS 문제 해결

---

1. Axios를 사용한 API 통신 설정

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

1.1 Axios 설치

먼저, Axios를 설치해야 합니다. React 프로젝트의 루트 폴더에서 다음 명령어를 실행하여 설치합니다.

npm install axios

 

1.2 Node.js 서버에서 API 생성

Node.js에서 간단한 API를 생성합니다. 예시로, /api/data 경로에서 데이터를 반환하는 API를 만들겠습니다.

// server.js (Node.js 백엔드)
const express = require('express');
const app = express();
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}`);
});

위 코드는 Express를 사용해 /api/data 경로에서 JSON 데이터를 반환하는 간단한 API를 구현한 것입니다.

1.3 React에서 Axios로 API 호출

이제 React에서 Axios를 사용하여 백엔드로부터 데이터를 받아오는 방법을 구현해보겠습니다.

1. App.js에서 Axios를 사용해 API 호출을 작성합니다.

// App.js (React 프론트엔드)
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 요청을 보내고, 서버로부터 데이터를 받아와 화면에 출력합니다.

---

2. CORS 문제 해결

2.1 CORS란?

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

2.2 Node.js에서 CORS 설정

Node.js에서 CORS 문제를 해결하기 위해 cors 미들웨어를 사용합니다. 위의 server.js 코드에서 이미 cors 미들웨어를 적용했습니다.

const cors = require('cors');

// CORS 미들웨어 설정
app.use(cors());

이 코드는 모든 도메인에서 들어오는 요청을 허용합니다. 특정 도메인만 허용하고 싶다면, 다음과 같이 설정할 수 있습니다:

app.use(cors({
    origin: 'http://localhost:3000' // 허용할 도메인
}));

이렇게 설정하면 **React 개발 서버(포트 3000)**에서 들어오는 요청만 허용됩니다.

---

3. 프로젝트 구조

통신이 제대로 설정되었다면, React와 Node.js의 통신이 원활하게 이루어질 것입니다. 프로젝트 구조는 다음과 같이 설정할 수 있습니다:

my-app/
│
├── client/         // React 프론트엔드
│   ├── src/
│   │   ├── App.js
│   └── ...
│
└── server/         // Node.js 백엔드
    ├── server.js
    └── ...

프론트엔드와 백엔드를 별도로 구분하여 작업할 수 있으며, 두 서버 간 통신이 CORS 설정을 통해 안전하게 이루어집니다.

---

결론

이번 강의에서는 Axios를 사용하여 React와 Node.js 간의 통신을 설정하는 방법을 배웠습니다. 또한, CORS 문제를 해결하는 방법도 함께 다루었습니다. 이러한 통신 설정을 통해 프론트엔드와 백엔드가 데이터를 주고받으며 상호작용할 수 있게 되었습니다.