리액트 강좌: [일기장앱] 배포

리액트는 현재 가장 인기 있는 프론트엔드 라이브러리 중 하나로, 복잡한 사용자 인터페이스를 쉽게 구축할 수 있는 다양한 기능을 제공합니다. 이번 강좌에서는 리액트를 사용하여 간단한 일기장 앱을 만드는 방법과, 이를 실제로 배포하는 방법에 대해 자세히 알아보겠습니다.

1. 프로젝트 개요

우선 일기장 앱의 기본 기능을 살펴보겠습니다. 이 앱은 사용자가 자신의 일기를 작성, 수정, 삭제하고, 작성한 일기를 목록으로 볼 수 있도록 하는 기능을 포함합니다. 기본적인 UI 요소는 다음과 같습니다:

  • 일기 목록 표시
  • 일기 작성 폼
  • 일기 상세 보기
  • 일기 수정 / 삭제 기능

2. 환경 설정

리액트 개발 환경을 설정하기 위해 Create React App을 사용합니다. 터미널을 열고 아래 명령어를 입력하여 새 프로젝트를 생성합니다:

npx create-react-app diary-app

프로젝트 디렉토리로 이동한 후, 필요한 패키지를 설치합니다:

cd diary-app
npm install axios react-router-dom

여기서 axios는 API 호출을 위한 라이브러리이며, react-router-dom는 페이지 간 네비게이션을 위한 라이브러리입니다.

3. 기본 구조 설계

일기장 앱의 기본 구조는 다음과 같이 설계합니다:


src/
|-- components/
|   |-- DiaryList.js
|   |-- DiaryForm.js
|   |-- DiaryDetail.js
|-- App.js
|-- index.js

각 컴포넌트의 역할은 다음과 같습니다:

  • DiaryList.js: 일기 목록을 보여주는 컴포넌트
  • DiaryForm.js: 새로운 일기를 작성하는 폼
  • DiaryDetail.js: 선택한 일기의 상세 내용을 보여주는 페이지

4. 컴포넌트 구현

4.1 DiaryList.js

일기 목록을 표시하는 컴포넌트를 구현해봅시다. API에서 데이터를 가져와 목록을 표시하는 구조입니다:


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

const DiaryList = () => {
    const [diaries, setDiaries] = useState([]);

    useEffect(() => {
        const fetchDiaries = async () => {
            const response = await axios.get('/api/diaries');
            setDiaries(response.data);
        };
        fetchDiaries();
    }, []);

    return (
        

            
내 일기 목록

            
    
                {diaries.map((diary) => (
                    
  • {diary.title}
    • 
                ))}
            

        

    );
};

export default DiaryList;

4.2 DiaryForm.js

일기를 작성하는 폼을 만들어봅시다:


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

const DiaryForm = () => {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        const newDiary = { title, content };
        await axios.post('/api/diaries', newDiary);
        // reset state
        setTitle('');
        setContent('');
    };

    return (
        

             setTitle(e.target.value)}
            />
            

    );
};

export default DiaryForm;

4.3 DiaryDetail.js

일기 상세 보기 페이지를 구현해봅시다:


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

const DiaryDetail = ({ match }) => {
    const [diary, setDiary] = useState({});

    useEffect(() => {
        const fetchDiary = async () => {
            const response = await axios.get(`/api/diaries/${match.params.id}`);
            setDiary(response.data);
        };
        fetchDiary();
    }, [match.params.id]);

    return (
        

            
{diary.title}

            
{diary.content}

        

    );
};

export default DiaryDetail;

5. 라우팅 설정

이제 react-router-dom을 사용하여 페이지 간 라우팅을 설정합니다:


import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import DiaryList from './components/DiaryList';
import DiaryForm from './components/DiaryForm';
import DiaryDetail from './components/DiaryDetail';

const App = () => {
    return (
        
            
                
                
                
            
        
    );
};

export default App;

6. 백엔드 설정

일기장 앱을 배포하기 전에 백엔드를 설정해야 합니다. Express.js를 사용하여 간단한 RESTful API를 만듭니다. 아래 명령어로 새로운 디렉토리를 생성하고 Express를 설치합니다:

mkdir diary-backend && cd diary-backend
npm init -y
npm install express body-parser cors

이제 server.js 파일을 만들고 아래 코드를 추가합니다:


const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const PORT = 5000;

app.use(cors());
app.use(bodyParser.json());

let diaries = [];

app.get('/api/diaries', (req, res) => {
    res.json(diaries);
});

app.post('/api/diaries', (req, res) => {
    const newDiary = { id: diaries.length + 1, ...req.body };
    diaries.push(newDiary);
    res.json(newDiary);
});

app.get('/api/diaries/:id', (req, res) => {
    const diary = diaries.find(d => d.id === parseInt(req.params.id));
    res.json(diary);
});

app.listen(PORT, () => {
    console.log(`서버가 ${PORT} 포트에서 실행 중입니다.`);
});

7. 배포 준비

앱을 배포하기 전에 몇 가지 작업을 수행해야 합니다. 클라이언트 및 서버를 빌드하여 실제 환경에서 실행할 준비를 합니다.

npm run build

이제 클라이언트 빌드가 build/ 디렉토리에 생성되었습니다. 이 디렉토리의 내용을 백엔드 서버에서 제공할 수 있도록 설정합니다.

8. 배포

클라우드 호스팅 서비스를 사용하여 앱을 배포할 수 있습니다. 예를 들어, Heroku를 사용할 수 있습니다.

heroku create diary-app
git add .
git commit -m "Deploying diary app"
git push heroku master

9. 마치며

이렇게 해서 리액트와 Express를 사용하여 일기장 앱을 구축하고 배포하는 방법을 알아보았습니다. 이 과정에서 리액트의 기본 개념부터 시작해 API와의 연동, 배포까지의 전 과정을 학습할 수 있었습니다. 이제 여러분만의 일기장 앱을 구성해보세요!

10. 추가 자료