15분 소요 - 2025년 11월 28일
단계별 안내를 통해 백엔드용 Django와 프론트엔드용 React를 사용하여 풀스택 웹 애플리케이션을 구축하는 방법을 알아보세요.
강력한 백엔드와 동적인 프론트엔드를 갖춘 웹 앱을 만들고 싶으신가요? 파이썬 프레임워크인 장고와 자바스크립트 라이브러리인 리액트를 함께 사용하면 이를 달성할 수 있는 좋은 방법입니다. Django는 데이터베이스 관리 및 API 생성과 같은 백엔드 작업을 처리하고, React는 반응형 대화형 사용자 인터페이스를 생성합니다.
주요 단계:
환경 설정하기:- Django용 Python 3.x와 React용 Node.js를 설치합니다.
파이썬 --버전, 노드 --버전, npm --버전으로 설치를 확인합니다.프로젝트를 정리합니다:- Django 백엔드와 React 프론트엔드를 위한 별도의 폴더를 생성합니다.
django-admin startproject를 사용하고, 프론트엔드 초기화에는 npx create-react-app를 사용합니다.백엔드 빌드:- Django 앱을 만들고, 모델을 정의하고, 마이그레이션을 생성합니다.
django-cors-headers를 구성합니다.프론트엔드 개발:- React 컴포넌트를 사용하여 작업과 사용자 상호작용을 관리하세요.
연결 및 테스트:- 지역 호스트:8000에서 Django를 실행하고 지역 호스트:3000에서 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 설치 파이썬으로 간단하게 설치할 수 있습니다. Windows 사용자는 python.org에서 설치 프로그램을 가져와야 하며, Linux 사용자는 Ubuntu에서 apt install python3 또는 다른 배포판의 경우 유사한 명령어를 사용하여 설치할 수 있습니다.
Node.js 및 npm 설정하기: Node.js는 npm(노드 패키지 관리자)과 함께 번들로 제공됩니다. npm 버전 6 이상이 필요하며, 7.5.4 버전이 가장 안정적입니다. nodejs.org에서 Node.js를 다운로드하면 npm이 자동으로 포함됩니다.
Python 가상 환경: 가상 환경을 사용하는 것은 프로젝트별 종속성을 충돌 없이 관리하기 위한 핵심입니다. 기본 제공되는 venv 모듈을 사용하거나 pipenv 또는 virtualenvwrapper와 같은 도구를 사용하여 더 많은 기능을 사용할 수 있습니다. Windows를 사용하는 경우 가상 환경 래퍼-win 패키지가 유사한 기능을 제공합니다.
설치 여부를 확인하려면 터미널에서 다음 명령을 실행하세요:
python --버전 노드 --버전 npm --버전
백엔드와 프론트엔드 코드를 분리하고 관리하기 위해서는 잘 정리된 프로젝트 구조가 필수적입니다. 프로젝트의 메인 디렉터리를 만드는 것부터 시작하세요:
mkdir django-react-app cd django-react-app
이 디렉토리 안에 두 개의 폴더를 만드세요. 하나는 Django 백엔드용, 다른 하나는 React 프론트엔드용 폴더입니다. 이렇게 분리하면 각 부분을 독립적으로 유지 관리하고 배포할 수 있습니다.
프로젝트 디렉토리 내에서Python 가상 환경을 설정합니다:
python -m venv venv
가상 환경을 활성화합니다:
source venv/bin/activatevenv\Scripts\activate이 단계를 통해 프로젝트의 모든 Python 종속성을 격리할 수 있습니다.
환경이 준비되었으면 이제 Django와 React 모두에 필요한 패키지를 설치할 차례입니다.
Django 백엔드 패키지: 가상 환경이 활성화되어 있는 동안 pip를 사용하여 장고와 지원 라이브러리를 설치합니다:
pip 설치 장고 pip 설치 장고레스트프레임워크 pip 설치 장고-cors-헤더 설치
React 프론트엔드 설정: React 환경을 설정하려면 create-react-app 도구를 사용합니다. 이 명령은 React 프로젝트를 초기화하고 필요한 모든 종속성을 설치합니다:
npx create-react-app frontend
이렇게 하면 필수 패키지, 개발 도구 및 빌드 스크립트가 포함된 새로운 React 프로젝트가 프론트엔드 디렉토리에 생성됩니다.
추가 프론트엔드 패키지: React 프로젝트를 설정한 후, 프론트엔드 디렉토리로 이동하여 Django API에 HTTP 요청을 하기 위한 라이브러리인 Axios를 설치하세요:
cd frontend npm install axios
이 시점에서 개발 환경에는 Python 3.x, Django, Node.js, React 및 필요한 모든 도구가 완벽하게 갖추어져 있습니다. Python 가상 환경은 백엔드 종속성을 격리하고 npm은 JavaScript 패키지를 개별적으로 처리합니다. 이제 풀스택 애플리케이션을 구축할 준비가 되었습니다!
데이터베이스 모델, API 엔드포인트, React 프론트엔드를 위한 통합을 갖춘 Django 백엔드를 설정하세요.
설정, 데이터베이스 구성 및 앱별 옵션이 포함된 장고 프로젝트를 생성하는 것으로 시작하세요. 이 프로젝트 내에서 사용자 데이터 또는 콘텐츠 관리와 같은 특정 작업을 위해 설계된 Python 패키지인 장고 앱을 빌드하게 됩니다.
프로젝트의 루트 디렉토리(가상 환경이 설정된 곳)로 이동하여 Django 프로젝트를 만듭니다:
django-admin 시작 프로젝트 백엔드 .
이 명령은 추가 폴더를 만들지 않고 현재 디렉터리에 직접 프로젝트 파일을 생성합니다. manage.py (장고 명령 실행용)와 같은 새 파일과 settings.py, urls.py, asgi.py, wsgi.py와 같은 파일이 포함된 백엔드 디렉터리가 표시됩니다.
그런 다음 특정 기능을 처리할 앱을 만듭니다. 예를 들어, 작업 관리 시스템:
python manage.py startapp tasks
이렇게 하면 models.py, views.py, admin.py 및 마이그레이션 폴더와 같은 필수 파일이 있는 작업 디렉터리가 생성됩니다. "django" 또는 "test"와 같은 기본 제공 이름과 충돌하는 이름을 지정하지 않도록 주의하세요.
backend/settings.py의 INSTALLED_APPS 목록에 앱을 추가하여 프로젝트 설정에 등록합니다:
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'tasks', # 앱 등록 ]을 입력합니다.
장고 모델로 데이터 구조를 정의하세요. 예를 들어, 작업 관리 앱을 위한 간단한 작업 모델을 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=False) class Meta: ordering = ['-created_at'] def __str__(self): return self.title
이 모델에는 짧은 텍스트를 위한 CharField, 긴 콘텐츠를 위한 TextField, 참/거짓 값을 위한 BooleanField, 타임스탬프를 위한 DateTimeField와 같은 필드가 포함됩니다. 메타 클래스는 기본 순서와 같은 옵션을 지정합니다.
마이그레이션을 실행하여 모델을 데이터베이스에 적용하세요:
python manage.py 마이그레이션 만들기 작업 python manage.py 마이그레이트하기
모델 데이터를 JSON으로 변환하려면 Django REST 프레임워크 직렬화기를 사용하세요. tasks/serializers.py에서 작업 모델에 대한 직렬화기를 정의합니다:
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']
모델 직렬화기는 모델을 기반으로 필드와 메서드를 자동으로 생성합니다. 필드를 명시적으로 나열하면 민감한 데이터가 의도치 않게 노출되는 것을 방지할 수 있습니다.
장고 REST 프레임워크는 API 생성을 간소화합니다. 표준 CRUD 작업의 경우, 라우터와 함께 ViewSet을 사용하여 깔끔한 RESTful 구조를 만드세요.
tasks/views.py에서 API 보기를 생성합니다:
rest_framework에서 보기 집합 가져오기 rest_framework.permissions에서 모든 허용 가져오기 .models에서 Task 가져오기 .serializers에서 TaskSerializer 클래스 TaskViewSet(viewsets.ModelViewSet): 쿼리 집합 = Task.objects.all() serializer_class = TaskSerializer 권한 클래스 = [모든 허용] # 개발용 전용
모델뷰셋은 작업의 목록, 생성, 검색, 업데이트 및 삭제를 자동으로 처리합니다.
tasks/urls.py에서 URL 라우팅을 설정합니다:
django.urls에서 경로 가져오기, rest_framework.routers에서 포함 가져오기 .views에서 DefaultRouter 가져오기 TaskViewSet 가져오기 라우터 = DefaultRouter() 라우터.register(r'tasks', TaskViewSet) urlpatterns = [ 경로('api/', 포함(router.urls)), ]
기본 백엔드/urls.py 파일에 이 URL을 포함하세요:
from django.contrib import admin from django.urls import path, include urlpatterns = [ 경로('admin/', admin.site.urls), 경로('', include('tasks.urls')), ]
포트 3000에서 실행되는 React 프론트엔드가 포트 8000에서 실행되는 Django 백엔드와 통신할 수 있도록 하려면 CORS(교차 출처 리소스 공유)를 구성하세요. 이 설정이 없으면 브라우저는 보안상의 이유로 교차 출처 요청을 차단합니다.
CORS 구성을 포함하도록 backend/settings.py를 업데이트하세요:
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # 상단에 이것을 추가 '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 설정 CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # React 개발 서버 "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True
빠른 테스트를 위해 CORS_ALLOW_ALL_ORIGINS = True를 사용할 수 있지만, 허용된 오리진을 지정하는 것이 더 안전합니다.
React 프론트엔드를 통합하기 전에 API 엔드포인트를 테스트하여 예상대로 작동하는지 확인하세요. Django 개발 서버를 시작합니다:
python manage.py 실행 서버
http://127.0.0.1:8000/api/tasks/ 에서 API에 액세스합니다 . 탐색 가능한 API를 사용하여 GET 및 POST 요청과 같은 작업을 테스트합니다.
또는 cURL 또는 Postman으로 테스트하세요:
# 테스트 GET 요청으로 작업 목록 curl -X GET http://127.0.0.1:8000/api/tasks/ # 테스트 POST 요청으로 작업 생성 curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "테스트 작업", "설명": "이것은 테스트 작업입니다"}'
자동화된 테스트를 위해 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): # 여기에 어설션과 테스트 로직을 추가합니다.
백엔드가 준비되었으므로 이제 React 프론트엔드에 연결할 준비가 되었습니다.
Django 백엔드를 위한 매력적인 인터페이스를 만들기 위해 React를 사용하여 작업 보기부터 새 작업 추가까지 모든 사용자 상호 작용을 관리할 수 있습니다.
먼저 React 앱 만들기를 사용하여 React 프론트엔드를 설정하세요. 프로젝트의 루트 디렉토리(장고 백엔드가 있는 곳)로 이동하여 실행합니다:
npx create-react-app 프론트엔드 CD 프론트엔드
이 명령은 package.json, src/App.js, public/index.html과 같은 필수 파일로 React 앱을 설정합니다. 또한 번들링을 위한 웹팩, 자바스크립트 컴파일을 위한 Babel, 테스트를 위한 개발 서버와 같은 도구도 포함되어 있습니다.
다음으로, Django API에 대한 HTTP 요청을 처리하기 위해 Axios를 설치합니다:
npm 설치 axios
Axios는 JSON 구문 분석을 관리하고 내장된 fetch() 함수보다 더 나은 오류 처리를 제공하여 API 호출을 더 간단하게 만듭니다. 또한 요청 및 응답 인터셉터와 같은 기능도 지원합니다.
이제 폴더 구조는 다음과 같아야 합니다:
프로젝트 루트/ ├── 백엔드/ │ ├── manage.py │ ├── 백엔드/ │ └── 작업/ └── 프론트엔드/ ├── 패키지.json ├── 공개/ └── src/
모든 것이 작동하는지 확인하려면 React 개발 서버를 시작하세요:
npm start
그러면 http://localhost:3000 에서 앱이 시작되고 기본 React 시작 페이지가 표시됩니다. 개발하는 동안 이 서버를 계속 실행하면 변경 사항이 있을 때 자동으로 다시 로드됩니다.
Django API에서 가져온 작업을 표시하는 TaskList 컴포넌트를 만들어 보겠습니다. 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. 첫 번째 작업을 만드세요!</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&t; </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" > 삭제 </버튼 </div> </li> ))} </ul> )} </div> ); }; 기본 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); } finally { setIsSubmitting(false); } }; return ( <form onSubmit={handleSubmit} className="task-form"> <h2<새 작업 추가</h2> <div className="form-group"> <입력 유형="text" placeholder="작업 제목" value={title} onChange={(e) => setTitle(e.target.value)} disabled={isSubmitting} required /> </div> <div className="form-group"<textarea placeholder="작업 설명(선택 사항)" value={description} onChange={(e)=> setDescription(e. target.target.value)} disabled={isSubmitting} rows="3" /> </div> <button type="submit" disabled={isSubmitting || !.title.trim()}> {isSubmitting ? '추가 중...' : '작업 추가'} </button> </form> ); }; 기본 TaskForm 내보내기;
몇 가지 기본 스타일링을 위해 src/App.css 파일을 만들고 추가합니다:
.task-list { margin: 20px 0; } .task-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; 테두리: 1px 솔리드 #ddd; 여백-하단: 10px; 테두리-반경: 5px; } .task-item.completed { background-color: #f0f8f0; 텍스트 장식: 라인-스루; 불투명도: 0.7; } .task-form { 배경: #f9f9f9; 패딩: 20px; 테두리-반경: 5px; 여백-하단: 20px; } .form-group { 여백-하단: 15px; } .form-group 입력, .form-group 텍스트 영역 { 너비: 100%; 패딩: 10px; 테두리: 1px 솔리드 #ddd; 테두리 반경: 3px; } .btn-complete, .btn-undo, .btn-delete { 왼쪽 여백: 10px; 패딩: 5px 10px; 테두리: 없음; 테두리-반경: 3px; 커서: 포인터; } .btn-complete { 배경: #28a745; 색상: 흰색; } .btn-undo { 배경: #ffc107; 색상: 검정; } .btn-delete { 배경: #dc3545; 색상: 흰색; }
useState 및 useEffect와 같은 React 훅을 사용하면 상태를 쉽게 관리하고 Django 백엔드와 상호 작용할 수 있습니다. API 호출을 중앙 집중화하려면 서비스 파일 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); } }; // 작업 추가, 업데이트, 삭제를 위한 추가 메서드는 여기로 이동합니다 }.
이 설정을 통해 React 프론트엔드는 대화형으로 작업을 처리하는 동시에 Django 백엔드와 원활하게 통신할 준비가 되었습니다.
느린 배포나 대역폭 제한에 지치셨나요? FDC 서버는 즉각적인 전용 성능, 글로벌 범위, 모든 규모에 맞게 구축된 유연한 요금제를 제공합니다. 업그레이드할 준비가 되셨나요?
지금 성능 활용하기이제 백엔드와 프론트엔드가 실행 중이므로 다음 단계는 백엔드와 프론트엔드 간의 원활한 통신을 보장하는 것입니다. 여기에는 API 엔드포인트를 설정하고, 요청을 관리하고, 통합 문제를 해결하는 것이 포함됩니다.
React 앱은 Django API 엔드포인트를 찾을 수 있는 위치를 알아야 합니다. 이를 위해 환경별 구성으로 src/services/api.js 파일을 업데이트합니다:
import axios from 'axios'; // 환경에 따라 API 기본 URL을 결정 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초 시간 초과 }); 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('작업을 가져오지 못했습니다. 연결을 확인해 주세요.'); console.error('작업 가져오기 오류:', err); } finally { setLoading(false); } }; const handleAddTask = async (taskData) => { try { const response = await taskAPI.createTask(taskData); setTasks(prevTasks => [...prevTasks, response.data]); } catch (err) { console.error('에러 작업 추가:', err); throw err; // 다시 던져서 TaskForm이 에러를 처리하도록 } }; 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('작업 업데이트 중 오류:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('이 작업을 정말 삭제하시겠습니까?')) { return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId)); } catch (err) { console.error('오류 작업 삭제:', err); } }; if (loading) { return <div className="loading">작업 로딩 중...</div>; } return ( <div className="앱"<header className="앱-헤더"<h1>작업 관리자</h1> </header> <main className="container"> {error && <div className="error-message">{error}</div>} <TaskForm onAddTask={handleAddTask} /> <TaskList tasks={tasks} onToggleComplete={handleToggleComplete} onDeleteTask={handleDeleteTask} /> </main> </div> ); } 내보내기 기본 앱;
이 코드는 작업 생성, 업데이트, 삭제 및 오류 관리를 처리합니다. UI는 원활한 사용자 경험을 위해 즉시 업데이트되며, 변경 사항을 되돌리거나 적절한 메시지를 표시하여 오류를 깔끔하게 관리합니다.
Django와 React를 연결할 때 가장 흔한 장애물 중 하나는 CORS(교차 출처 리소스 공유) 오류를 처리하는 것입니다. 이는 브라우저가 보안상의 이유로 서로 다른 출처 간의 요청을 차단하기 때문에 발생합니다. 개발 중에 React는 일반적으로 localhost:3000에서 실행되는 반면, Django는 localhost:8000에서 실행되어 교차 오리진 시나리오가 생성됩니다.
CORS 문제를 해결하려면 "CORS 헤더 구성하기" 섹션에 설명된 대로 Django 설정에서 CORS 헤더를 구성했는지 확인하세요. 변경한 후 Django 서버를 다시 시작하여 적용하세요.
다음은 몇 가지 일반적인 API 요청 오류와 그 해결 방법입니다:
소유자 필드가 누락되어 Django REST 프레임워크 및 React 프로젝트에서 커뮤니티를 만들 때 400 오류가 발생했습니다. 항상 프론트엔드에서 장고 모델에서 예상하는 모든 필수 필드를 전송하는지 다시 확인하세요.generics.RetrieveUpdateAPIView에서 generics.RetrieveUpdateDestroyAPIView로 업데이트하여 DELETE 요청을 지원하도록 함으로써 해결되었습니다.Django 백엔드와 React 프론트엔드가 연결되었으면 이제 개발 서버를 모두 실행하고 애플리케이션을 테스트할 차례입니다. 여기에는 두 서버를 동시에 실행하고 모든 것이 원활하게 함께 작동하는지 확인하는 작업이 포함됩니다.
Django-React 애플리케이션을 실행하려면 각 서버에 대해 하나씩 두 개의 터미널 창이 필요합니다. 이 설정을 사용하면 백엔드와 프론트엔드가 API 호출을 통해 통신하면서 독립적으로 작동할 수 있습니다.
장고 백엔드 서버를 시작합니다:
첫 번째 터미널 창을 열고 장고 프로젝트의 루트 디렉토리로 이동합니다.
Python 가상 환경을 활성화합니다:
source venv/bin/activate
Django 개발 서버를 시작합니다:
python manage.py 실행 서버
서버는 http://127.0.0.1:8000/ 에서 사용할 수 있습니다.
React 프론트엔드 서버를 시작합니다:
두 번째 터미널 창을 열고 React 프로젝트 디렉토리로 이동합니다:
cd frontend
React 개발 서버를 시작합니다:
npm start
그러면 http://localhost:3000/ 브라우저 창이 자동으로 열립니다.
두 서버가 모두 실행되면 애플리케이션의 기능 테스트를 시작할 수 있습니다.
서버가 실행 중이고 CORS 및 API 엔드포인트가 올바르게 구성되었으면 이제 프론트엔드와 백엔드 간의 데이터 흐름을 검증할 차례입니다.
백엔드 API 검증:
다음을 방문하여 Django API 엔드포인트를 직접 테스트하세요:
http://localhost:8000/api/tasks
여기에는 CREATE 및 READ 작업을 수행할 수 있는 장고 REST 프레임워크의 탐색 가능한 API 인터페이스가 표시되어야 합니다.
다음 주소에서 장고 관리자 인터페이스에 액세스하세요:
http://localhost:8000/admin
수퍼유저 자격 증명으로 로그인하여 작업을 생성, 편집 또는 삭제합니다. 다음을 방문하여 업데이트 및 삭제 작업을 테스트할 수도 있습니다:
http://localhost:8000/api/tasks/{id}
프론트엔드-백엔드 통합 테스트:
http://localhost:3000 에서 React 앱을 열고 올바르게 로드되어 Django 백엔드의 작업이 표시되는지 확인합니다.앱에 필터나 기타 기능이 포함되어 있는 경우 작업을 철저히 테스트하여 작업이 예상대로 표시되는지 확인합니다.
테스트 중에 문제가 발생하면 다음과 같은 몇 가지 일반적인 해결 방법을 시도해 보세요.
API 연결 오류:
두 서버가 각각의 포트에서 실행되고 있는지 확인합니다: Django는 http://localhost:8000, React는 http://localhost:3000.
브라우저 개발자 도구(네트워크 탭)를 사용하여 404 또는 500과 같은 HTTP 상태 코드를 식별합니다.
React 프로젝트의 package.json 파일에서 프록시 설정을 확인합니다:
"proxy": "http://localhost:8000"
변경한 경우 React 서버를 다시 시작하세요.
서버 시작 문제:
Django 서버가 시작되지 않으면 누락된 마이그레이션이 있는지 확인하세요:
파이썬 manage.py 마이그레이션 만들기 파이썬 manage.py 마이그레이션하기
React 서버 문제의 경우, 의존성을 다시 설치해 보세요:
npm install
데이터 흐름 문제:
console.log() 와 같은 디버깅 문을 추가하거나 Django 보기에서 인쇄 문을 추가하여 데이터 흐름을 추적하세요./api/tasks/)를 포함하여 Django URL 패턴과 정확히 일치하는지 다시 확인하세요.Django와 React를 결합한 웹 앱을 만들어 풀스택 개발에 대한 탄탄한 입문 과정을 마쳤습니다. 이 프로젝트에서는 백엔드와 프론트엔드 분리, CRUD 작업 수행, CORS 설정을 사용한 교차 출처 요청 관리와 같은 필수 개념을 강조합니다. 그 과정에서 이 두 가지 강력한 도구 간의 원활한 통합을 가능하게 하는 기술인 Django REST 프레임워크를 사용하여 API를 빌드하고 상태 관리를 위해 React 후크를 사용했습니다.
앱을 한 단계 더 발전시키기
앱의 기능을 확장할 수 있는 여지는 많습니다. 예를 들어, 사용자 데이터 및 API 액세스를 보호하기 위해 장고 REST 프레임워크를 사용하여 JWT 인증을 추가할 수 있습니다. 이를 통해 사용자별 기능과 개인화된 경험을 제공할 수 있습니다.
앱에 실시간 업데이트가 필요한 경우 Django 채널을 사용하여 웹소켓 지원을 활성화하는 것을 고려하세요. 이는 라이브 대시보드, 채팅 시스템 또는 알림과 같은 기능에 적합하며 앱을 더욱 역동적이고 대화형 플랫폼으로 전환할 수 있습니다.
앱이 성장함에 따라 고급 데이터 시각화가 중요해집니다. React의 렌더링 기능과 효율적인 백엔드 데이터 불러오기를 결합하면 복잡한 데이터 세트를 효과적으로 처리하고 표시할 수 있습니다.
프로덕션 준비하기
프로덕션용 앱을 준비할 때는 배포, 보안 및 성능에 집중하세요. 현재 설정은 로컬 개발에는 적합하지만 프로덕션 환경에서는 추가 단계가 필요합니다. 여기에는 환경 변수 설정, 데이터베이스 최적화, 강력한 오류 처리 메커니즘 구현 등이 포함됩니다.
이러한 개선 사항은 API 설계, 컴포넌트 기반 아키텍처, 풀스택 통합 등 이미 개발한 기술을 기반으로 합니다. 이러한 고급 기술을 익히면 엔터프라이즈급 프로젝트를 처리하고 웹 개발자로서 계속 성장할 수 있는 역량을 갖추게 됩니다.
백엔드에는 Django를 사용하고 프론트엔드에는 React를 사용하면 최신 웹 애플리케이션을 개발하는 데 강력한 조화를 이룰 수 있습니다. Django는 백엔드 개발을 간소화하는 도구가 포함된 견고한 프레임워크를 제공하는 반면, React는 동적이고 인터랙티브한 사용자 인터페이스를 구축할 때 빛을 발합니다.
이 조합은 깔끔한 책임 분리를 촉진하여 코드베이스를 체계적으로 유지하고 시간이 지남에 따라 쉽게 확장할 수 있도록 도와줍니다. React의 컴포넌트 기반 구조는 UI 요소의 재사용을 장려하며, Django의 REST 프레임워크는 API 구축 프로세스를 간소화하여 프론트엔드와 백엔드 간의 원활한 통신을 보장합니다. 이 두 가지를 함께 사용하면 애플리케이션 개발에 대한 빠르고 효율적이며 사용자 중심의 접근 방식을 제공합니다.
React 프론트엔드와 Django 백엔드 사이의 CORS 문제를 해결하려면 django-cors-headers 패키지가 편리한 솔루션입니다. 먼저 pip를 사용하여 설치합니다. 그런 다음 settings.py 파일에서 INSTALLED_APPS 목록에 'corsheaders '를 추가합니다. 그런 다음 MIDDLEWARE 목록의 맨 위에 'corsheaders.middleware.CorsMiddleware '를 포함시켜 미들웨어 실행 순서를 올바르게 지정하세요.
개발 중에는 settings.py에서 CORS_ORIGIN_ALLOW_ALL = True로 설정하여 작업을 단순화할 수 있습니다. 이렇게 하면 모든 오리진의 요청이 허용됩니다. 그러나 프로덕션 환경에서는 CORS_ALLOWED_ORIGINS 설정을 사용하여 특정 신뢰할 수 있는 도메인을 정의하는 것이 훨씬 더 안전합니다. 이 접근 방식은 더 엄격한 보안을 유지하는 데 도움이 됩니다.
이 구성을 사용하면 React 앱이 CORS 요구 사항을 준수하면서 Django API와 원활하게 상호 작용할 수 있습니다.
프로덕션 배포를 위해 장고 및 React 앱을 준비하려면 먼저 안전한 설정을 위해 장고 설정을 조정하세요. 여기에는 DEBUG를 False로 설정하고 앱에 액세스할 수 있는 도메인을 제어하기 위해 ALLOWED_HOSTS를 지정하는 것이 포함됩니다. 이러한 변경은 라이브 환경에서 애플리케이션을 보호하는 데 필수적입니다.
다음으로 Django 백엔드 및 정적 파일을 위한 신뢰할 수 있는 호스팅 플랫폼을 선택하세요. 인프라가 프로덕션 수준의 트래픽과 수요를 처리할 수 있도록 구축되었는지 확인하세요. React 프론트엔드의 경우, 적절한 빌드 도구를 사용하여 최적화된 프로덕션 빌드를 생성하세요.
React 앱이 준비되면 Nginx와 같은 웹 서버를 설정하여 React 프론트엔드와 Django 백엔드 모두에 서비스를 제공하세요. 적절한 서버 구성은 앱이 효율적으로 실행되고 사용자에게 원활한 경험을 제공하도록 보장합니다.
앱을 출시하기 전에 프로덕션 환경에서 앱을 철저히 테스트하세요. 이 단계는 문제를 식별하고 해결하여 앱이 출시 후 안정적으로 작동하도록 하는 데 도움이 됩니다.
AI, 자동화, 실시간 분석에 중점을 둔 2025년 전용 서버 및 VPS를 위한 최고의 모니터링 도구를 살펴보세요.
12분 소요 - 2025년 11월 28일
10분 소요 - 2025년 10월 15일
유연한 옵션
글로벌 도달 범위
즉시 배포
유연한 옵션
글로벌 도달 범위
즉시 배포