오늘날의 웹 개발에서는 프론트엔드와 백엔드 개발을 통합하여 풀스택 애플리케이션을 만드는 것이 매우 중요합니다.
리액트(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 
                />
                Register
            
            
User List
            

                {users.map(user => (
                    
{user.name} - {user.email}
                ))}
            
        
    );
}

export default App;
        

결론

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

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

웹 개발에서 사용자 경험은 사용자가 웹 애플리케이션과 상호작용할 때 느끼는 모든 요소를 포함합니다. React는 컴포넌트를 재사용 가능한 단위로 만들어 사용자 인터페이스를 구축하는 데 도움을 줍니다. 그러나 때때로, 여러분은 이미 존재하는 UI 라이브러리와 함께 작업해야 할 필요가 있습니다. 이 글에서는 Material-UI, 즉 MUI라는 외부 라이브러리를 이용하여 React 애플리케이션에서 스타일링과 UI 컴포넌트를 구현하는 방법에 대해 자세히 살펴보겠습니다.

1. Material-UI란?

Material-UI는 Google의 Material Design 가이드라인을 기반으로 하는 React UI 라이브러리입니다. 이 라이브러리는 다양한 컴포넌트와 커스터마이징 가능한 스타일을 제공하여 실제 애플리케이션 개발 시 UI 요소를 쉽게 구현할 수 있도록 도와줍니다. Material-UI의 주요 장점은 다음과 같습니다:

• 재사용 가능한 컴포넌트: MUI는 다양한 UI 컴포넌트를 제공하여 복잡한 사용자 인터페이스를 쉽게 구축할 수 있습니다.
• 스타일링의 간편함: MUI는 CSS-in-JS 방식을 사용하여 컴포넌트를 쉽게 스타일링할 수 있습니다.
• 모바일 우선 디자인: Material-UI는 반응형 디자인을 지원하여 다양한 장치에서 잘 작동합니다.

2. Material-UI 설치하기

Material-UI를 설치하려면 npm 또는 yarn을 사용하세요. 프로젝트 디렉토리에서 다음 명령어를 실행하면 됩니다:

npm install @mui/material @emotion/react @emotion/styled

설치가 완료되면, 여러분의 React 컴포넌트에서 Material-UI를 사용할 준비가 된 것입니다.

3. 기본적인 MUI 버튼 컴포넌트 구현하기

MUI를 사용하여 간단한 버튼을 구현해보겠습니다. 다음의 예제를 살펴보세요:

import React from 'react';
import Button from '@mui/material/Button';

function App() {
    return (
        

            
                MUI 버튼
            
        
    );
}

export default App;
        

위의 코드를 실행하면 “MUI 버튼”이라는 텍스트가 있는 파란색 버튼이 보여질 것입니다. 이것은 MUI의 버튼 컴포넌트를 사용하는 아주 기본적인 예입니다.

4. Material-UI와 함께 데이터 테이블 만들기

이제 Material-UI를 사용하여 데이터 테이블을 구현해 보겠습니다. 데이터 테이블은 정보를 구조화하여 사용자에게 보여줄 수 있는 기능을 제공합니다. MUI의 Table 컴포넌트를 활용하여 간단한 데이터 테이블을 구현해보겠습니다.

import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';

const createData = (name, calories, fat, carbs, protein) => {
    return { name, calories, fat, carbs, protein };
};

const rows = [
    createData('Frozen yogurt', 159, 6.0, 24, 4.0),
    createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
    createData('Eclair', 262, 16.0, 24, 6.0),
    createData('Cupcake', 305, 3.7, 67, 4.3),
    createData('Gingerbread', 356, 16.0, 49, 3.9),
];

function DataTable() {
    return (
        
            
                    
                        디저트(100g당)
                        칼로리
                        지방(g)
                        탄수화물(g)
                        단백질(g)
                    
                
                    {rows.map((row) => (
                        
                            
                                {row.name}
                            
                            {row.calories}
                            {row.fat}
                            {row.carbs}
                            {row.protein}
                        
                    ))}
                
        
    );
}

function App() {
    return (
        

            
재미있는 디저트 데이터 테이블
            
        
    );
}

export default App;
        

위의 코드는 디저트를 나열한 데이터 테이블을 만든 예제입니다. 각 열은 디저트 이름, 칼로리, 지방, 탄수화물, 단백질을 보여줍니다. 데이터는 createData 함수를 사용하여 배열로 생성되었습니다.

5. Material-UI에서 스타일링하기

Material-UI는 다양한 방식으로 스타일링이 가능하여, 여러분의 애플리케이션 디자인을 쉽게 커스터마이즈할 수 있습니다. 예를 들어, 테이블에 CSS 스타일을 적용하는 방법은 다음과 같습니다:

const useStyles = makeStyles({
    table: {
        minWidth: 650,
    },
    header: {
        backgroundColor: '#3f51b5',
        color: 'white',
    },
});

function DataTable() {
    const classes = useStyles();

    return (
        
            
                    
                        디저트(100g당)
                        칼로리
                        지방(g)
                        탄수화물(g)
                        단백질(g)
                    
                
                    {rows.map((row) => (
                        
                            
                                {row.name}
                            
                            {row.calories}
                            {row.fat}
                            {row.carbs}
                            {row.protein}
                        
                    ))}
                
        
    );
}
        

여기서 useStyles를 사용하여 테이블의 스타일을 정의하고, 이를 테이블 컴포넌트에 적용했습니다. 테이블 헤더의 배경색을 바꾸어 사용자에게 더 나은 비주얼을 제공하고, 스타일링을 통해 더 나은 사용자 경험을 만들어줍니다.

6. MUI의 다양한 컴포넌트와 활용하기

Material-UI는 Button, Card, TextField, Icon 등 다양한 컴포넌트를 제공합니다. 여러분의 애플리케이션에서 사용하는 데이터나 기능에 따라서 적절한 컴포넌트를 선택하고 스타일링하여 사용하면 됩니다. 여기서는 Material-UI의 Card 컴포넌트를 예로 들어볼까요?

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

function SimpleCard() {
    return (
        
            
                
                    제목
                
                
                    내용이 여기에 표시됩니다.
                
            
        
    );
}
        

위 예제는 MUI의 Card 컴포넌트를 사용하여 제목과 내용을 갖는 카드를 만드는 방식입니다. 이러한 방식으로 다양한 컴포넌트를 통해 UI를 구성할 수 있습니다.

7. 결론

오늘은 React 애플리케이션에서 Material-UI를 활용하여 UI를 구현하는 방법에 대해 알아보았습니다. Material-UI는 강력한 기능과 다양한 컴포넌트를 통해 개발자가 쉽고 빠르게 멋진 사용자 경험을 제공할 수 있도록 돕습니다. 다양한 UI 요소와 스타일을 커스터마이징하여 여러분의 애플리케이션에 맞게 조정할 수 있다는 점에서 매우 유용한 라이브러리입니다.

앞으로 Material-UI를 통해 훨씬 더 다양한 콘텐츠와 UI를 구현해보세요. 복잡한 웹 애플리케이션을 구축할 때 Material-UI는 분명히 여러분에게 큰 도움이 될 것입니다.