리액트로 풀스택 애플리케이션 구축하기, 프론트엔드와 백엔드 통신 설정

오늘날의 웹 개발에서는 프론트엔드와 백엔드 개발을 통합하여 풀스택 애플리케이션을 만드는 것이 매우 중요합니다.
리액트(React)는 사용자 인터페이스를 구축하는 데 있어 가장 인기 있는 라이브러리 중 하나로,
Node.js와 Express.js와 같은 백엔드 기술과 함께 사용하여 강력한 웹 애플리케이션을 만들 수 있습니다.
이 글에서는 리액트를 사용하여 풀스택 애플리케이션을 구축하는 방법과 프론트엔드와 백엔드 간의 데이터 통신을 설정하는 방법에 대해 안내합니다.

개요

풀스택 애플리케이션이란 프론트엔드와 백엔드를 모두 포함하는 애플리케이션을 의미합니다.
프론트엔드는 사용자가 상호작용하는 부분이고, 백엔드는 데이터를 처리하고 저장하는 서버 측 부분입니다.
이 두 부분 간의 원활한 통신이 풀스택 애플리케이션의 핵심입니다.
본 강좌에서는 리액트 프론트엔드와 Node.js/Express 백엔드를 연동하는 방법을 학습하게 됩니다.

사전 준비 사항

강좌에 앞서 필요한 환경을 설정해야 합니다. 다음과 같은 도구가 필요합니다:

Node.js: JavaScript 런타임(버전 14 이상 권장)
npm 또는 yarn: 패키지 매니저
리액트 앱 생성기(create-react-app)
Postman: API 테스트를 위한 툴(선택 사항)

1. 리액트 애플리케이션 설정하기

리액트 애플리케이션을 생성하기 위해 create-react-app을 사용합니다.
다음 명령어를 실행하여 새 리액트 애플리케이션을 만듭니다:

npx create-react-app my-fullstack-app

애플리케이션 디렉토리로 이동합니다:

cd my-fullstack-app

애플리케이션이 생성되면, 기본 리액트 구조가 생성됩니다.
이제 개발 서버를 시작하여 애플리케이션이 제대로 작동하는지 확인합니다:

npm start

2. 백엔드 설정하기

리액트 프론트엔드와 통신할 Node.js 백엔드를 만듭니다.
새 폴더를 생성하고 그 안에 백엔드 코드를 작성합니다. 아래 명령어로 백엔드를 만들기 위해 새로운 디렉토리를 생성합니다:

mkdir backend && cd backend

이제 Node.js 프로젝트를 초기화합니다:

npm init -y

Express.js를 설치합니다:

npm install express

3. Express 서버 설정

Express 서버를 설정하고 기본 API 엔드포인트를 추가합니다.
express를 사용하여 `server.js` 파일을 생성하십시오:

touch server.js

`server.js` 파일에 다음 코드를 추가합니다:


const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

app.use(express.json());

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

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

서버를 시작하기 위해 다음 명령어를 입력합니다:

node server.js

4. 프론트엔드에서 백엔드 API 호출하기

리액트 애플리케이션에서 axios를 이용하여 API를 호출합니다.
axios를 설치하기 위해 다음 명령어를 실행합니다:

npm install axios

이제 이 라이브러리를 사용하여 백엔드에서 데이터를 가져옵니다.
`src/App.js`를 열고 아래와 같이 코드를 수정합니다:


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

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

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios('/api/data');
            setData(result.data);
        };
        fetchData();
    }, []);

    return (
        
            {data.message}
        
    );
}

export default App;

이제 서버를 다시 시작한 후, 리액트 앱에서 API 요청을 확인할 수 있습니다.
개발 서버를 다시 시작하려면 리액트 앱에서 `npm start`를 실행하세요.

5. CORS 설정하기

만약 리액트 앱과 백엔드 서버가 서로 다른 포트에서 실행되고 있을 경우, CORS 정책 문제로 인해 요청이 차단될 수 있습니다.
이를 해결하기 위해 `cors` 패키지를 설치해야 합니다:

npm install cors

그 후, `server.js`에 위 아래 코드를 추가하여 CORS를 활성화합니다:


const cors = require('cors');
app.use(cors());

6. 데이터베이스와의 연결

애플리케이션이 실제 데이터와 상호작용할 수 있도록 데이터베이스를 설정합니다.
MongoDB 또는 MySQL과 같은 데이터베이스를 사용할 수 있습니다.
이번 예제에서는 MongoDB를 사용한다고 가정하고, 데이터베이스와 연결하는 방법을 설명하겠습니다.

먼저 MongoDB Atlas에 가입하여 클러스터를 생성한 후,
`mongoose` 패키지를 설치합니다:

npm install mongoose

이후, `server.js`에 다음 코드를 추가하여 MongoDB에 연결합니다:


const mongoose = require('mongoose');
const dbURI = 'YOUR_MONGODB_CONNECTION_STRING';

mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('MongoDB connected'))
    .catch(err => console.error(err));

7. 데이터 모델 생성하기

MongoDB의 데이터 구조를 정의하기 위해 모델을 생성합니다.
`models` 폴더를 만들고 `User.js`라는 파일을 생성한 후, 다음 코드를 추가합니다:


const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
    name: String,
    email: String
});

module.exports = mongoose.model('User', UserSchema);

8. 데이터 CRUD 작업 구현하기

이제 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 수행하는 API 엔드포인트를 추가합니다.
`server.js`에 다음 코드를 추가합니다:


app.post('/api/users', async (req, res) => {
    const user = new User(req.body);
    await user.save();
    res.status(201).send(user);
});

app.get('/api/users', async (req, res) => {
    const users = await User.find();
    res.send(users);
});

이러한 엔드포인트를 통해 프론트엔드에서 데이터를 관리할 수 있습니다.
이제 리액트 프론트엔드에서 사용자 등록과 목록을 표시하기 위한 UI를 구현해야 합니다.

9. 프론트엔드에서 사용자 등록 기능 구현하기

사용자 등록 폼을 구현하기 위해 `src/App.js`를 수정합니다:


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

function App() {
    const [users, setUsers] = useState([]);
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');

    useEffect(() => {
        const fetchUsers = async () => {
            const result = await axios('/api/users');
            setUsers(result.data);
        };
        fetchUsers();
    }, []);

    const handleSubmit = async (e) => {
        e.preventDefault();
        await axios.post('/api/users', { name, email });
        setName(''); 
        setEmail('');
        const result = await axios('/api/users');
        setUsers(result.data);
    };

    return (
        
            User Registration
            
                 setName(e.target.value)} 
                    placeholder="Name" 
                    required 
                />
                 setEmail(e.target.value)} 
                    placeholder="Email" 
                    required 
                />
                
            
            User List
            
                {users.map(user => (
                    {user.name} - {user.email}
                ))}
            
        
    );
}

export default App;

결론

이번 강좌에서는 리액트를 사용하여 풀스택 애플리케이션을 구축하는 방법을 배웠습니다.
프론트엔드와 백엔드 간의 통신 설정, 데이터베이스와의 연결, CRUD 작업을 구현한 사례를 통해
실무에서 필요로 하는 기술을 익힐 수 있었습니다.
이렇게 구축한 애플리케이션은 기본적인 사용자 등록 기능을 제공하지만,
이외에도 다양한 CRUD 기능 및 상태 관리 라이브러리(예: Redux)와 같은 고급 기능을 추가하여 확장할 수 있습니다.

리액트와 Node.js를 이용한 풀스택 개발은 지금도 인기가 많은 분야로,
여러분의 개발 역량을 한층 더 높이는 데 큰 도움이 될 것입니다.

개요