Django + React/Vue.js를 활용한 풀스택 프로젝트 구축하기

Django + React/Vue.js를 활용한 풀스택 프로젝트 구축하기

1. 소개

현대적인 웹 애플리케이션은 백엔드와 프론트엔드를 분리하여 개발하는 경우가 많습니다. Django는 강력한 백엔드 프레임워크로, React와 Vue.js는 사용자 친화적인 프론트엔드 라이브러리로 널리 사용됩니다. 이번 포스팅에서는 Django와 React 또는 Vue.js를 조합하여 풀스택 웹 애플리케이션을 구축하는 방법을 설명하겠습니다.

2. 프로젝트 개요

이번 프로젝트에서는 사용자가 가입하고 게시물을 작성할 수 있는 간단한 CRUD 웹 애플리케이션을 개발합니다.

• 백엔드: Django + Django REST framework (DRF)
• 프론트엔드: React 또는 Vue.js
• 데이터베이스: PostgreSQL (또는 SQLite)
• API 통신: REST API

3. Django 백엔드 구축

3.1 프로젝트 설정

먼저, Django 프로젝트를 생성하고 REST API를 제공하도록 설정합니다.

mkdir django-react-vue
cd django-react-vue
python -m venv venv
source venv/bin/activate  # Windows에서는 `venv\Scripts\activate`
pip install django djangorestframework django-cors-headers

Django 프로젝트를 생성합니다.

django-admin startproject backend
cd backend
django-admin startapp api

3.2 Django 설정 변경

backend/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'api',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',  # React 개발 서버
    'http://localhost:8080',  # Vue.js 개발 서버
]

3.3 모델 및 API 구현

api/models.py

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

api/serializers.py

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = '__all__'

api/views.py

from rest_framework import viewsets
from .models import Post
from .serializers import PostSerializer

class PostViewSet(viewsets.ModelViewSet):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

api/urls.py

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import PostViewSet

router = DefaultRouter()
router.register(r'posts', PostViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

Django 서버를 실행합니다.

python manage.py migrate
python manage.py runserver

4. React/Vue.js 프론트엔드 개발

4.1 React 프론트엔드 설정

npx create-react-app frontend
cd frontend
npm install axios react-router-dom

frontend/src/App.js

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

function App() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        axios.get('http://127.0.0.1:8000/api/posts/')
            .then(response => {
                setPosts(response.data);
            })
            .catch(error => {
                console.error(error);
            });
    }, []);

    return (
        <div>
            <h1>게시물 목록</h1>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

React 서버를 실행합니다.

npm start

4.2 Vue.js 프론트엔드 설정

vue create frontend
cd frontend
npm install axios vue-router

frontend/src/components/PostList.vue

<template>
    <div>
        <h1>게시물 목록</h1>
        <ul>
            <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            posts: []
        };
    },
    mounted() {
        axios.get('http://127.0.0.1:8000/api/posts/')
            .then(response => {
                this.posts = response.data;
            })
            .catch(error => {
                console.error(error);
            });
    }
};
</script>

Vue.js 서버를 실행합니다.

npm run serve

5. 결론

이제 Django 백엔드와 React 또는 Vue.js 프론트엔드를 결합하여 풀스택 웹 애플리케이션을 구축할 수 있습니다. REST API를 활용하여 데이터를 주고받으며 확장 가능한 아키텍처를 만들 수 있습니다. 향후 배포 시 Docker, AWS, Nginx 등을 활용하여 프로덕션 환경에 배포하는 과정도 추가할 수 있습니다.

이 포스팅이 Django와 프론트엔드 프레임워크를 조합하여 풀스택 프로젝트를 구축하는 데 도움이 되었길 바랍니다.