Django와 React를 사용하여 간단한 앱을 만드는 방법

Django와 React를 사용하여 간단한 앱을 만드는 방법

탄탄한 백엔드와 역동적인 프론트엔드를 갖춘 웹 앱을 만들고 싶으신가요? 파이썬 프레임워크인 Django와 자바스크립트 라이브러리인 React를 결합하는 것이 이를 달성하는 훌륭한 방법입니다. Django는 데이터베이스 관리 및 API 생성과 같은 백엔드 작업을 처리하고, React는 반응성이 뛰어나고 상호작용이 가능한 사용자 인터페이스를 생성합니다.

주요 단계:

1. 환경 설정:
   • Django를 위해 Python 3.x를, React를 위해 Node.js를 설치하세요.
   • 가상 환경을 사용하여 파이썬 의존성을 관리하세요.
   • 다음 명령어를 사용하여 설치 상태를 확인하세요: python --version, node --version, 그리고 npm --version.
2. 프로젝트 구성:
   • Django 백엔드와 React 프론트엔드를 위한 별도의 폴더를 만드세요.
   • 다음 명령어를 사용하여 django-admin startproject 를 사용하여 백엔드를 설정하고 npx create-react-app 프론트엔드 초기화를 위해 사용하세요.
3. 백엔드 구축:
   • Django 앱을 생성하고, 모델을 정의하며, 마이그레이션을 생성합니다.
   • Django REST Framework를 사용하여 API 엔드포인트를 구축합니다.
   • 프론트엔드와 백엔드 간의 django-cors-headers 프론트엔드와 백엔드 간의 통신이 가능하도록 설정합니다.
4. 프론트엔드 개발:
   • React 컴포넌트를 사용하여 작업과 사용자 상호작용을 관리합니다.
   • API 요청을 위해 Axios를 설치하고 Django 엔드포인트와 연동합니다.
   • CSS를 사용하여 앱의 사용자 인터페이스를 깔끔하게 디자인합니다.
5. 연동 및 테스트:
   • Django와 localhost:8000 React를 localhost:3000.
   • Postman과 같은 도구를 사용하거나 브라우저에서 직접 API 엔드포인트를 테스트합니다.
   • 원활한 통신을 위해 CORS 설정이 올바르게 되어 있는지 확인하세요.

이 설정을 통해 백엔드와 프론트엔드를 명확하게 분리하여 풀스택 애플리케이션을 효율적으로 구축할 수 있습니다. 다음 단계를 따라 확장 가능하고 상호작용이 가능한 웹 앱을 만들어 보세요.

초보자를 위한 Django 및 React 프로젝트 - 풀스택 노트 앱 만들기

설정 요구 사항 및 설치

Django 및 React 앱 개발을 시작하기 전에, 필요한 도구와 종속성을 갖춘 개발 환경을 설정하는 것이 매우 중요합니다. 이러한 기반을 마련해 두면 개발 과정을 진행하면서 Django 및 React 컴포넌트를 원활하게 생성, 통합 및 테스트할 수 있습니다.

시스템 요구 사항 및 도구

시작하려면 개발 컴퓨터에 Django용 Python 3.x와 React용 Node.js가 설치되어 있어야 합니다. 구체적으로, Django 5.0은 Python 3.x를 필요로 하며, React는 Node.js 버전 12 이상에서 작동합니다.

Python 설치: Python은 공식 웹사이트에서 직접 다운로드하거나 시스템의 패키지 관리자를 사용하여 설치할 수 있습니다. macOS 사용자의 경우 Homebrew를 사용하면 간편하게 설치할 수 있습니다 brew install python. Windows 사용자는 python.org에서 설치 프로그램을 다운로드해야 하며, Linux 사용자는 apt install python3 와 같은 명령어를 사용하여 설치할 수 있습니다.

Node.js 및 npm 설정: Node.js에는 npm(Node Package Manager)이 포함되어 있습니다. npm 버전 6 이상이 필요하며, 버전 7.5.4를 사용하는 것이 안정적입니다. nodejs.org에서 Node.js를 다운로드하면 npm이 자동으로 포함됩니다.

파이썬 가상 환경: 가상 환경을 사용하는 것은 충돌 없이 프로젝트별 종속성을 관리하는 데 핵심입니다. 내장된 venv 모듈이나 pipenv 또는 virtualenvwrapper 와 같은 도구를 사용하여 더 많은 기능을 활용할 수 있습니다. Windows를 사용하는 경우, virtualenvwrapper-win 패키지가 유사한 기능을 제공합니다.

설치가 제대로 되었는지 확인하려면 터미널에서 다음 명령어를 실행하세요:

python --version
node --version
npm --version

프로젝트 구조 만들기

백엔드와 프론트엔드 코드를 분리하고 관리하기 위해서는 체계적으로 구성된 프로젝트 구조가 필수적입니다. 먼저 프로젝트의 메인 디렉터리를 생성하세요:

mkdir django-react-app
cd django-react-app

이 디렉터리 내에 두 개의 폴더를 생성하세요. 하나는 Django 백엔드용이고, 다른 하나는 React 프론트엔드용입니다. 이렇게 분리하면 각 부분을 독립적으로 유지 관리하고 배포할 수 있습니다.

프로젝트 디렉터리 내에서 Python 가상 환경을 설정합니다:

python -m venv venv

가상 환경을 활성화하세요:

• macOS/Linux의 경우: source venv/bin/activate
• Windows의 경우: venv\Scripts\activate

이 단계를 통해 프로젝트에 필요한 모든 Python 종속성이 격리됩니다.

필요한 패키지 설치

환경 준비가 완료되었으므로, 이제 Django와 React에 필요한 패키지를 설치할 차례입니다.

Django 백엔드 패키지: 가상 환경이 활성화된 상태에서 pip를 사용하여 Django와 관련 라이브러리를 설치합니다:

pip install django
pip install djangorestframework
pip install django-cors-headers

• Django는 서버 측 로직, 데이터베이스 관리 및 URL 라우팅을 처리합니다.
• Django REST Framework는 RESTful API 구축 과정을 간소화하여 React 프론트엔드용 엔드포인트를 더 쉽게 생성할 수 있게 해줍니다.
• Django-cors-headers는 Cross-Origin Resource Sharing(CORS)을 활성화하며, 이는 포트 3000에서 실행되는 React 프론트엔드와 포트 8000에서 실행되는 Django 백엔드 간의 통신에 필수적입니다.

React 프론트엔드 설정: React 환경을 설정하려면 create-react-app 도구를 사용하세요. 이 명령어는 React 프로젝트를 초기화하고 필요한 모든 종속성을 설치합니다:

npx create-react-app frontend

그러면 필수 패키지, 개발 도구 및 빌드 스크립트가 모두 포함된 frontend 디렉터리에 필수 패키지, 개발 도구 및 빌드 스크립트가 모두 포함된 새로운 React 프로젝트가 생성됩니다.

추가 프론트엔드 패키지: React 프로젝트 설정이 완료되면 frontend 디렉토리로 이동하여 Django API에 HTTP 요청을 보내는 데 사용되는 라이브러리인 Axios를 설치하세요:

cd frontend
npm install axios

이 시점에서 개발 환경은 Python 3.x, Django, Node.js, React 및 필요한 모든 도구가 완벽하게 갖춰진 상태입니다. Python 가상 환경은 백엔드 의존성을 분리해 주며, npm은 JavaScript 패키지를 별도로 관리합니다. 이제 풀스택 애플리케이션 개발을 시작할 준비가 되었습니다!

Django를 활용한 백엔드 구축

데이터베이스 모델, API 엔드포인트, React 프론트엔드 연동을 포함한 Django 백엔드를 설정합니다.

Django 프로젝트 및 앱 생성

먼저 설정, 데이터베이스 구성 및 앱별 옵션을 포함하는 Django 프로젝트를 생성합니다. 이 프로젝트 내에서 사용자 데이터나 콘텐츠 관리와 같은 특정 작업을 위해 설계된 Python 패키지인 Django 앱을 구축하게 됩니다.

프로젝트의 루트 디렉터리(가상 환경이 설정된 위치)로 이동하여 Django 프로젝트를 생성합니다.

django-admin startproject backend .

이 명령어는 별도의 폴더를 생성하지 않고 현재 디렉터리에 직접 프로젝트 파일을 생성합니다. 다음과 같은 새로운 파일들이 생성되는 것을 확인할 수 있습니다. manage.py (Django 명령어 실행용) 및 backend 다음과 같은 파일이 들어 있는 디렉터리가 생성되는 것을 확인할 수 있습니다. settings.py, urls.py, asgi.py, 그리고 wsgi.py.

다음으로, 특정 기능을 처리할 앱을 생성합니다. 예를 들어, 작업 관리 시스템의 경우:

python manage.py startapp tasks

이렇게 하면 tasks 다음과 같은 필수 파일이 포함된 디렉터리를 생성합니다: models.py, views.py, admin.py와 같은 필수 파일들이 포함된디렉터리와 migrations 폴더가 생성됩니다. "django"나 "test"와 같은 내장 이름과의 이름 충돌을 피해야 합니다.

프로젝트 설정의 INSTALLED_APPS 목록에 추가하여 앱을 등록하십시오. 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',
    'tasks',  # Register your app
]

모델 및 직렬화기 설정

Django 모델을 사용하여 데이터 구조를 정의하세요. 예를 들어, 작업 관리 앱을 위한 간단한 Task 작업 관리 앱을 위한 모델은 tasks/models.py:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

이 모델에는 다음과 같은 필드가 포함됩니다. CharField 짧은 텍스트용, TextField 긴 콘텐츠를 위한 필드, BooleanField 참/거짓 값을 위한 필드, 그리고 DateTimeField 타임스탬프용 등이 포함됩니다. Meta 클래스는 기본 정렬 순서와 같은 옵션을 지정합니다.

마이그레이션을 실행하여 모델을 데이터베이스에 적용하세요:

python manage.py makemigrations tasks
python manage.py migrate

모델 데이터를 JSON으로 변환하려면 Django REST Framework 직렬화기를 사용하십시오. tasks/serializers.py에서, Task 모델에 대한 직렬화기를 정의하세요:

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at']
        read_only_fields = ['created_at', 'updated_at']

Django REST Framework는 ModelSerializer 는 모델을 기반으로 필드와 메서드를 자동으로 생성합니다. 필드를 명시적으로 나열하면 의도치 않게 민감한 데이터가 노출되는 것을 방지할 수 있습니다.

API 엔드포인트 구축

Django REST Framework는 API 생성을 간소화합니다. 표준 CRUD 작업의 경우, ViewSets 를 라우터와 함께 사용하여 깔끔하고 RESTful한 구조를 구현할 수 있습니다.

다음과 같이 tasks/views.py, API 뷰를 생성합니다:

from rest_framework import viewsets
from rest_framework.permissions import AllowAny
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer
    permission_classes = [AllowAny]  # For development only

이 ModelViewSet 는 작업의 열람, 생성, 조회, 수정 및 삭제를 자동으로 처리합니다.

에서 URL 라우팅을 설정합니다: tasks/urls.py:

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

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)

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

다음 URL을 메인 backend/urls.py 파일에 다음 URL을 포함시키세요:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tasks.urls')),
]

CORS 헤더 구성

포트 3000에서 실행 중인 React 프론트엔드가 포트 8000의 Django 백엔드와 통신할 수 있도록 하려면, CORS(Cross-Origin Resource Sharing)를 구성해야 합니다. 이를 구성하지 않으면 브라우저가 보안상의 이유로 크로스 오리진 요청을 차단합니다.

CORS 구성을 포함하도록 backend/settings.py 파일을 수정하여 CORS 설정을 포함시키세요:

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

# CORS settings for development
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React development server
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

빠른 테스트를 위해 CORS_ALLOW_ALL_ORIGINS = True를 사용할 수 있지만, 허용된 출처를 명시하는 것이 더 안전합니다.

API 엔드포인트 테스트

React 프론트엔드를 통합하기 전에 API 엔드포인트를 테스트하여 예상대로 작동하는지 확인하십시오. Django 개발 서버를 시작하십시오:

python manage.py runserver

다음 주소에서 API에 접속하세요: http://127.0.0.1:8000/api/tasks/에서 API에 접속하세요. 브라우저 기반 API를 사용하여 GET 및 POST 요청과 같은 작업을 테스트하세요.

또는 cURL이나 Postman을 사용하여 테스트할 수도 있습니다:

# Test GET request to list tasks
curl -X GET http://127.0.0.1:8000/api/tasks/

# Test POST request to create a task
curl -X POST http://127.0.0.1:8000/api/tasks/ \
  -H "Content-Type: application/json" \
  -d '{"title": "Test Task", "description": "This is a test task"}'

자동화된 테스트를 위해 tasks/tests.py:

from rest_framework.test import APITestCase
from rest_framework import status
from .models import Task

class TaskAPITestCase(APITestCase):
    def test_create_task(self):
        # Add your assertions and test logic here
        pass

백엔드 구성이 완료되었으므로 이제 React 프론트엔드와 연결할 준비가 되었습니다.

React를 활용한 프론트엔드 구축

Django 백엔드를 위한 매력적인 인터페이스를 만들기 위해, React를 사용하여 작업 보기부터 새 작업 추가에 이르기까지 모든 사용자 상호작용을 관리하게 됩니다.

React 프로젝트 설정

먼저 Create React App을 사용하여 React 프론트엔드를 설정하세요. 프로젝트의 루트 디렉터리(Django 백엔드가 위치한 곳)로 이동하여 다음 명령어를 실행하세요:

npx create-react-app frontend
cd frontend

이 명령어는 다음과 같은 필수 파일을 포함하여 React 앱을 설정합니다. package.json, src/App.js, 및 public/index.html와 같은 필수 파일을 갖춘 React 앱을 설정합니다. 또한 번들링을 위한 webpack, 자바스크립트 컴파일을 위한 Babel, 테스트를 위한 개발 서버와 같은 도구들도 포함됩니다.

다음으로, Django API에 대한 HTTP 요청을 처리하기 위해 Axios를 설치합니다:

npm install axios

Axios는 JSON 파싱을 관리하고 내장된 fetch() 함수보다 더 나은 오류 처리를 제공함으로써 API 호출을 더 간편하게 만들어 줍니다. 또한 요청 및 응답 인터셉터와 같은 기능도 지원합니다.

이제 폴더 구조는 다음과 같아야 합니다:

project-root/
├── backend/
│   ├── manage.py
│   ├── backend/
│   └── tasks/
└── frontend/
    ├── package.json
    ├── public/
    └── src/

모든 것이 정상적으로 작동하는지 확인하려면 React 개발 서버를 시작하세요:

npm start

그러면 앱이 http://localhost:3000에서 앱이 실행되며, 기본 React 환영 페이지가 표시됩니다. 개발 중에는 이 서버를 계속 실행해 두세요. 변경 사항을 적용하면 자동으로 다시 로드됩니다.

React 컴포넌트 만들기

Django API에서 가져온 작업을 표시할 TaskList Django API에서 가져온 작업을 표시하는 컴포넌트를 만들어 봅시다. 다음 코드를 src/components/TaskList.js:

import React from 'react';

const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => {
  return (
    <div className="task-list">
      <h2>Your Tasks</h2>
      {tasks.length === 0 ? (
        <p>No tasks available. Create your first task!</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}>
              <div className="task-content">
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <small>Created: {new Date(task.created_at).toLocaleDateString()}</small>
              </div>
              <div className="task-actions">
                <button 
                  onClick={() => onToggleComplete(task.id, !task.completed)}
                  className={task.completed ? 'btn-undo' : 'btn-complete'}
                >
                  {task.completed ? 'Undo' : 'Complete'}
                </button>
                <button 
                  onClick={() => onDeleteTask(task.id)}
                  className="btn-delete"
                >
                  Delete
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TaskList;

다음으로, TaskForm 새로운 작업을 추가하는 컴포넌트를 생성해 봅시다. 다음 코드를 src/components/TaskForm.js:

import React, { useState } from 'react';

const TaskForm = ({ onAddTask }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;

    setIsSubmitting(true);
    try {
      await onAddTask({ title: title.trim(), description: description.trim() });
      setTitle('');
      setDescription('');
    } catch (error) {
      console.error('Error adding task:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <h2>Add New Task</h2>
      <div className="form-group">
        <input
          type="text"
          placeholder="Task title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          disabled={isSubmitting}
          required
        />
      </div>
      <div className="form-group">
        <textarea
          placeholder="Task description (optional)"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={isSubmitting}
          rows="3"
        />
      </div>
      <button type="submit" disabled={isSubmitting || !title.trim()}>
        {isSubmitting ? 'Adding...' : 'Add Task'}
      </button>
    </form>
  );
};

export default TaskForm;

기본적인 스타일을 적용하려면 src/App.css 파일을 생성하고 다음 내용을 추가하세요:

.task-list {
  margin: 20px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
}

.task-item.completed {
  background-color: #f0f8f0;
  text-decoration: line-through;
  opacity: 0.7;
}

.task-form {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.btn-complete, .btn-undo, .btn-delete {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-complete { background: #28a745; color: white; }
.btn-undo { background: #ffc107; color: black; }
.btn-delete { background: #dc3545; color: white; }

상태 관리 및 API 통합

다음과 같은 React 훅을 useState 와 useEffect 와 같은 React 훅을 사용하면 상태를 쉽게 관리하고 Django 백엔드와 상호 작용할 수 있습니다. API 호출을 중앙 집중화하려면 service 파일을 생성하세요 src/services/api.js:

import axios from 'axios';

const API_BASE_URL = 'http://127.0.0.1:8000/api';

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

마지막으로, 모든 것을 src/App.js:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  // Additional methods for adding, updating, and deleting tasks would go here
}

이 설정을 통해 React 프론트엔드는 Django 백엔드와 원활하게 통신하면서 상호작용적인 작업을 처리할 준비가 되었습니다.

Django와 React 연결하기

백엔드와 프론트엔드가 모두 가동되고 있으므로, 다음 단계는 두 시스템 간의 원활한 통신을 보장하는 것입니다. 여기에는 API 엔드포인트 설정, 요청 관리, 그리고 통합 과정에서 발생할 수 있는 문제 해결이 포함됩니다.

React에서 API URL 설정하기

React 앱은 Django API 엔드포인트의 위치를 파악해야 합니다. 이를 위해 src/services/api.js 파일을 환경별 구성으로 업데이트해야 합니다:

import axios from 'axios';

// Determine API base URL based on environment
const getApiBaseUrl = () => {
  if (process.env.NODE_ENV === 'production') {
    return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api';
  }
  return 'http://127.0.0.1:8000/api';
};

const API_BASE_URL = getApiBaseUrl();

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000, // 10 second timeout
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

프로덕션 환경에서는 다음 내용을 포함한 .env 파일을 React 프로젝트 루트에 추가하세요:

REACT_APP_API_URL=https://your-production-domain.com/api

이 설정을 통해 로컬 개발 환경이든 프로덕션 환경에 배포하든 상관없이 React 앱이 Django 백엔드와 원활하게 상호 작용할 수 있습니다. API 엔드포인트가 구성되면 백엔드 데이터를 가져오고 조작할 준비가 완료됩니다.

백엔드에서 데이터 가져오기

API 구성이 완료되면 CRUD 작업을 수행하여 React와 Django 간에 데이터를 관리할 수 있습니다. 이러한 작업을 처리하려면 src/App.js 다음과 같이 수정하여 이러한 작업을 처리하세요:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError('Failed to fetch tasks. Please check your connection.');
      console.error('Error fetching tasks:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddTask = async (taskData) => {
    try {
      const response = await taskAPI.createTask(taskData);
      setTasks(prevTasks => [...prevTasks, response.data]);
    } catch (err) {
      console.error('Error adding task:', err);
      throw err; // Re-throw to let TaskForm handle the error
    }
  };

  const handleToggleComplete = async (taskId, completed) => {
    try {
      const taskToUpdate = tasks.find(task => task.id === taskId);
      const updatedTaskData = { ...taskToUpdate, completed };

      const response = await taskAPI.updateTask(taskId, updatedTaskData);
      setTasks(prevTasks =>
        prevTasks.map(task =>
          task.id === taskId ? response.data : task
        )
      );
    } catch (err) {
      console.error('Error updating task:', err);
    }
  };

  const handleDeleteTask = async (taskId) => {
    if (!window.confirm('Are you sure you want to delete this task?')) {
      return;
    }

    try {
      await taskAPI.deleteTask(taskId);
      setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
    } catch (err) {
      console.error('Error deleting task:', err);
    }
  };

  if (loading) {
    return <div className="loading">Loading tasks...</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="container">
        {error && <div className="error-message">{error}</div>}
        <TaskForm onAddTask={handleAddTask} />
        <TaskList 
          tasks={tasks}
          onToggleComplete={handleToggleComplete}
          onDeleteTask={handleDeleteTask}
        />
      </main>
    </div>
  );
}

export default App;

이 코드는 작업 생성, 업데이트, 삭제 및 오류 처리를 담당합니다. 사용자 경험을 원활하게 하기 위해 UI가 즉시 업데이트되며, 변경 사항을 원상 복구하거나 적절한 메시지를 표시하여 오류를 우아하게 처리합니다.

연결 테스트 및 디버깅

Django와 React를 연동할 때 가장 흔히 발생하는 문제 중 하나는 CORS(Cross-Origin Resource Sharing) 오류 처리입니다. 이러한 오류는 브라우저가 보안상의 이유로 서로 다른 출처 간의 요청을 차단하기 때문에 발생합니다. 개발 단계에서는 React가 일반적으로 localhost:3000에서 실행되는 반면, Django는 localhost:8000에서 실행되므로 크로스 오리진 상황이 발생합니다.

CORS 문제를 해결하려면 “CORS 헤더 구성” 섹션에 설명된 대로 Django 설정에서 CORS 헤더를 구성했는지 확인하십시오. 변경 사항을 적용하려면 Django 서버를 다시 시작하십시오.

다음은 몇 가지 일반적인 API 요청 오류와 그 해결 방법입니다:

• HTTP 400 (Bad Request): 이는 일반적으로 요청 페이로드에 필수 데이터가 누락되었거나 형식이 잘못된 경우를 의미합니다. 예를 들어, 2023년 11월, FintanMi는 Django REST Framework 및 React 프로젝트에서 커뮤니티를 생성할 때 owner 필드가 누락되어 있었기 때문입니다. 프론트엔드가 Django 모델에서 요구하는 모든 필수 필드를 전송하는지 항상 다시 한 번 확인하십시오.
• HTTP 405 (Method Not Allowed): 이 오류는 API 엔드포인트가 사용 중인 HTTP 메서드를 지원하지 않을 때 발생합니다. 예를 들어, FintanMi는 게시물을 삭제하려고 시도할 때 405 오류를 보고했는데, 이는 Django 뷰를 generics.RetrieveUpdateAPIView 로 generics.RetrieveUpdateDestroyAPIView 로 변경하여 DELETE requests를 포함하도록 수정하여 해결되었습니다.

앱 실행 및 테스트

Django 백엔드와 React 프론트엔드가 연결되었으므로, 이제 두 개발 서버를 모두 실행하고 애플리케이션을 테스트할 차례입니다. 이를 위해서는 두 서버를 동시에 실행하고 모든 것이 원활하게 연동되는지 확인해야 합니다.

개발 서버 시작하기

Django-React 애플리케이션을 실행하려면 각 서버마다 하나씩, 총 두 개의 터미널 창이 필요합니다. 이러한 설정을 통해 백엔드와 프론트엔드는 API 호출을 통해 통신하면서도 독립적으로 작동할 수 있습니다.

Django 백엔드 서버 시작:

1. 첫 번째 터미널 창을 열고 Django 프로젝트의 루트 디렉터리로 이동합니다.

2. Python 가상 환경을 활성화합니다:

   source venv/bin/activate
   

3. Django 개발 서버를 시작합니다:

   python manage.py runserver
   

   서버는 다음 주소에서 이용할 수 있습니다. http://127.0.0.1:8000/.

React 프론트엔드 서버 시작:

1. 두 번째 터미널 창을 열고 React 프로젝트 디렉터리로 이동하세요:

   cd frontend
   

2. React 개발 서버를 실행합니다:

   npm start
   

   그러면 자동으로 브라우저 창이 http://localhost:3000/.

두 서버가 모두 실행되면 애플리케이션의 기능을 테스트할 수 있습니다.

전체 앱 기능 테스트

서버가 실행 중이고 CORS 및 API 엔드포인트가 올바르게 구성되었다면, 이제 프론트엔드와 백엔드 간의 데이터 흐름을 검증할 차례입니다.

백엔드 API 검증:

• 다음 주소를 방문하여 Django API 엔드포인트를 직접 테스트해 보세요:

  http://localhost:8000/api/tasks
  

  그러면 Django REST Framework의 탐색 가능한 API 인터페이스가 표시되며, 여기서 CREATE 및 READ 작업을 수행할 수 있습니다.

• 다음 주소에서 Django 관리자 인터페이스에 접속하세요:

  http://localhost:8000/admin
  

  슈퍼유저 자격 증명으로 로그인하여 작업을 생성, 수정 또는 삭제해 보세요. 또한 다음 주소를 방문하여 UPDATE 및 DELETE 작업을 테스트할 수도 있습니다:

  http://localhost:8000/api/tasks/{id}
  

프론트엔드-백엔드 통합 테스트:

• 다음 주소에서 React 앱을 열고 http://localhost:3000 에서 React 앱을 열고, Django 백엔드의 태스크가 올바르게 로드되어 표시되는지 확인하세요.
• React 인터페이스를 통해 각 CRUD 작업을 테스트해 보세요:
  • 새 작업을 추가하고, React UI와 백엔드 양쪽에 모두 표시되는지 확인하세요.
  • 기존 작업을 수정하고 변경 사항이 저장되는지 확인하세요.
  • 작업을 삭제하고 프론트엔드와 데이터베이스 모두에서 제거되었는지 확인하세요.

앱에 필터나 기타 기능이 포함되어 있다면, 작업이 예상대로 표시되는지 확인하기 위해 철저히 테스트하십시오.

흔히 발생하는 문제 해결

테스트 중에 문제가 발생하면, 다음의 일반적인 해결 방법을 시도해 보세요.

API 연결 오류:

• 두 서버가 각각의 포트에서 실행 중인지 확인하십시오: Django는 http://localhost:8000 React는 http://localhost:3000.
• 브라우저 개발자 도구(네트워크 탭)를 사용하여 404나 500과 같은 HTTP 상태 코드를 확인하세요.

• React 프로젝트의 proxy React 프로젝트의 package.json 파일의설정을 확인하세요:

  "proxy": "http://localhost:8000"
  

  설정을 변경한 경우 React 서버를 다시 시작하세요.

서버 시작 문제:

• Django 서버가 시작되지 않으면 누락된 마이그레이션이 있는지 확인하세요:

  python manage.py makemigrations
  python manage.py migrate
  

• React 서버 문제가 발생하면 의존성을 다시 설치해 보세요:

  npm install
  

데이터 흐름 문제:

• 브라우저 개발자 도구를 사용하여 네트워크 요청과 콘솔 오류를 확인해 보세요.
• React 내에서 다음과 같은 디버깅 문구를 추가해 보세요: console.log() React에서와 같이 print Django 뷰에서 다음과 같은 문장을 추가하여 데이터 흐름을 추적해 보세요.
• React 앱의 API URL이 슬래시(/)를 포함하여 Django URL 패턴과 정확히 일치하는지 다시 한 번 확인하십시오(예: /api/tasks/).

요약 및 다음 단계

Django와 React를 결합한 웹 앱을 제작함으로써 풀스택 개발에 대한 탄탄한 기초를 다졌습니다. 이 프로젝트는 백엔드와 프론트엔드의 분리, CRUD 작업 수행, CORS 설정을 활용한 크로스 오리진 요청 관리와 같은 핵심 개념을 강조합니다. 이 과정을 통해 Django REST Framework를 사용하여 API를 구축하고, React 훅을 활용하여 상태를 관리하는 방법을 익혔습니다. 이러한 기술은 이 두 가지 강력한 도구를 원활하게 통합하는 데 도움이 됩니다.

앱을 한 단계 더 발전시키기

앱의 기능을 확장할 여지는 무궁무진합니다. 예를 들어, Django REST Framework를 사용하여 JWT 인증을 추가해 사용자 데이터와 API 액세스를 보호할 수 있습니다. 이를 통해 사용자별 기능과 맞춤형 경험을 제공할 수 있게 됩니다.

앱에 실시간 업데이트가 필요하다면, Django Channels를 사용하여 WebSocket을 지원하도록 고려해 보세요. 이는 실시간 대시보드, 채팅 시스템 또는 알림과 같은 기능에 적합하며, 앱을 더욱 역동적이고 상호작용이 가능한 플랫폼으로 만들어 줍니다.

앱이 성장함에 따라 고급 데이터 시각화의 중요성이 커집니다. React의 렌더링 기능과 효율적인 백엔드 데이터 가져오기를 결합하면 복잡한 데이터 세트를 효과적으로 처리하고 표시할 수 있습니다.

프로덕션 환경 준비

앱을 프로덕션 환경에 준비할 때는 배포, 보안, 성능에 중점을 두어야 합니다. 현재 설정은 로컬 개발에는 적합하지만, 프로덕션 환경에서는 추가적인 단계가 필요합니다. 여기에는 환경 변수 설정, 데이터베이스 최적화, 강력한 오류 처리 메커니즘 구현 등이 포함됩니다.

이러한 개선 사항은 API 설계, 컴포넌트 기반 아키텍처, 풀스택 통합 등 이미 습득한 기술을 바탕으로 이루어집니다. 이러한 고급 기술을 숙달함으로써, 엔터프라이즈급 프로젝트를 수행할 수 있는 역량을 갖추게 되며 웹 개발자로서 지속적으로 성장할 수 있을 것입니다.

자주 묻는 질문

웹 앱을 구축할 때 백엔드에는 Django를, 프론트엔드에는 React를 사용하는 것의 장점은 무엇인가요?

백엔드에 Django를, 프론트엔드에 React를 사용하면 현대적인 웹 애플리케이션을 개발하는 데 있어 강력한 시너지를 창출할 수 있습니다. Django는 백엔드 개발을 효율화하는 다양한 도구가 포함된 견고한 프레임워크를 제공하는 반면, React는 역동적이고 상호작용이 가능한 사용자 인터페이스를 구축하는 데 탁월합니다.

이러한 조합은 역할의 명확한 분리를 촉진하여 코드베이스를 체계적으로 유지하고 시간이 지남에 따라 쉽게 확장할 수 있도록 돕습니다. React의 컴포넌트 기반 구조는 UI 요소의 재사용을 장려하며, Django의 REST Framework는 API 구축 과정을 간소화하여 프론트엔드와 백엔드 간의 원활한 통신을 보장합니다. 이 두 가지는 함께 애플리케이션 개발에 빠르고 효율적이며 사용자 중심의 접근 방식을 제공합니다.

React 프론트엔드를 Django 백엔드에 연결할 때 CORS 문제를 어떻게 해결하나요?

React 프론트엔드와 Django 백엔드 간의 CORS 문제를 해결하려면 django-cors-headers 패키지를 사용하는 것이 유용한 해결책입니다. 먼저 pip을 사용하여 설치하십시오. 그런 다음, settings.py 파일에 'corsheaders' 를 INSTALLED_APPS 목록에 추가합니다. 그 후, 'corsheaders.middleware.CorsMiddleware' 파일 맨 위에 MIDDLEWARE 목록 맨 위에 포함시켜 미들웨어가 올바른 순서로 실행되도록 하세요.

개발 중에는 CORS_ORIGIN_ALLOW_ALL = True 를 settings.py를 설정하여 절차를 간소화할 수 있습니다. 이렇게 하면 어떤 출처에서 온 요청이든 허용됩니다. 그러나 운영 환경에서는 CORS_ALLOWED_ORIGINS 설정을 사용하여 특정 신뢰할 수 있는 도메인을 정의하는 것이 훨씬 더 안전합니다. 이 접근 방식은 보안을 더욱 강화하는 데 도움이 됩니다.

이 구성을 통해 React 앱은 CORS 요구 사항을 준수하면서 Django API와 원활하게 상호 작용할 수 있습니다.

Django 및 React 앱을 프로덕션 배포에 대비하려면 어떻게 해야 하나요?

Django 및 React 앱을 프로덕션 환경에 배포할 준비를 하려면, 먼저 안전한 설정을 위해 Django 설정을 조정하는 것부터 시작하세요. 여기에는 DEBUG 를 False 로 설정하고, ALLOWED_HOSTS 값을 지정하여 앱에 액세스할 수 있는 도메인을 제어하는 작업이 포함됩니다. 이러한 변경 사항은 운영 환경에서 애플리케이션을 보호하는 데 필수적입니다.

다음으로, Django 백엔드와 정적 파일을 호스팅할 신뢰할 수 있는 호스팅 플랫폼을 선택하세요. 인프라가 프로덕션 수준의 트래픽과 수요를 처리할 수 있도록 구축되었는지 확인하십시오. React 프론트엔드의 경우, 적절한 빌드 도구를 사용하여 최적화된 프로덕션 빌드를 생성하세요.

React 앱 준비가 완료되면, Nginx와 같은 웹 서버를 설정하여 React 프론트엔드와 Django 백엔드 모두를 제공하도록 하세요. 적절한 서버 구성은 앱이 효율적으로 실행되도록 보장하며 사용자에게 원활한 경험을 제공합니다.

실제 서비스에 출시하기 전에 프로덕션 환경에서 앱을 철저히 테스트하십시오. 이 단계는 문제를 파악하고 해결하는 데 도움이 되며, 앱이 출시된 후에도 안정적으로 작동하도록 보장합니다.