[장고] 리액트 연동하기 (이해편)
1. 장고 프로젝트 설정
먼저, 장고 프로젝트를 설정하는 방법을 안내합니다. 이를 통해 백엔드 서버의 기반을 구축합니다.
가상 환경 설정 및 장고 설치
장고 프로젝트를 설정하기 위해서는 먼저 가상 환경을 설정하고, 장고를 설치해야 합니다. 가상 환경을 사용하면 프로젝트마다 독립된 패키지 환경을 유지할 수 있습니다.
python -m venv myenv
source myenv/bin/activate # 윈도우의 경우: myenv\\Scripts\\activate
pip install django
위 명령어를 실행하면 myenv
라는 이름의 가상 환경이 생성되고 활성화됩니다. 이후, pip install django
를 통해 장고를 설치합니다.
장고 프로젝트 생성
장고 설치가 완료되면, 프로젝트와 애플리케이션을 생성합니다.
django-admin startproject myproject
cd myproject
django-admin startapp myapp
위 명령어를 통해 myproject
라는 이름의 장고 프로젝트와 myapp
이라는 애플리케이션이 생성됩니다.
settings.py
설정
이제 생성한 애플리케이션을 장고 프로젝트에 추가합니다. 이를 위해 settings.py
파일을 열고 INSTALLED_APPS
에 myapp
을 추가합니다.
INSTALLED_APPS = [
...
'myapp',
]
INSTALLED_APPS
리스트에 myapp
을 추가했기 때문에 장고가 이 애플리케이션을 인식합니다.
2. 리액트 프로젝트 설정
장고 프로젝트의 루트 디렉토리에서 리액트 프로젝트를 생성합니다. 리액트는 프론트엔드 프레임워크로, 사용자 인터페이스를 구축하는 데 사용됩니다.
리액트 설치
리액트 프로젝트를 설정하기 위해 다음 명령어를 사용합니다.
npx create-react-app frontend
cd frontend
npm start
이 명령어를 실행하면 frontend
라는 이름의 리액트 프로젝트가 생성되고, 개발 서버가 실행됩니다.
3. 장고와 리액트 통합
장고와 리액트를 통합하기 위해 필요한 설정을 진행합니다.
장고 설정 파일 수정
리액트의 정적 파일을 장고에서 서빙하기 위해 settings.py
파일에 정적 파일 경로를 추가합니다.
import os
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'frontend/build/static'),
]
이 코드는 파이썬에서 os
모듈을 사용하여 STATICFILES_DIRS
라는 리스트를 정의합니다. 이 리스트는 Django 설정에서 정적 파일의 디렉토리를 지정하는 데 사용됩니다. 각 부분의 역할을 간략히 설명하면 다음과 같습니다:
import os
: 파이썬의os
모듈을 임포트합니다. 이 모듈은 운영 체제와 상호 작용할 수 있는 여러 가지 기능을 제공합니다.STATICFILES_DIRS = [...]
: Django의 설정 파일에서 정적 파일의 추가 디렉토리를 지정하기 위한 리스트를 정의합니다.os.path.join(BASE_DIR, 'frontend/build/static')
:os.path.join
함수를 사용하여BASE_DIR
경로와 'frontend/build/static' 경로를 결합하여 정적 파일의 절대 경로를 만듭니다.
이 설정은 Django 프로젝트의 기본 디렉토리(BASE_DIR
) 내의 frontend/build/static
디렉토리에 있는 정적 파일을 Django가 인식할 수 있도록 합니다. 이는 주로 리액트(React)와 같은 프론트엔드 빌드 도구를 사용하여 정적 파일을 생성한 경우에 유용합니다.
장고 뷰 설정
리액트 앱을 서빙하기 위한 장고 뷰를 설정합니다. myapp/views.py
파일을 수정하여 다음과 같이 작성합니다.
myapp/views.py
파일을 수정하여 리액트 앱을 서빙하는 뷰를 만듭니다.
from django.shortcuts import render
def index(request):
return render(request, 'index.html')
이 뷰는 index.html
템플릿을 렌더링하여 리액트 앱을 보여줍니다.
URL 설정
myapp
의 URL 설정을 위해 myapp/urls.py
파일을 생성하고 다음과 같이 수정합니다.
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
또한, myproject/urls.py
파일을 수정하여 myapp
의 URL을 포함합니다.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('myapp.urls')),
]
이 설정을 통해 기본 URL로 접속할 때 myapp
의 뷰가 호출됩니다.
템플릿 설정
리액트의 빌드 파일을 템플릿으로 사용하기 위해 장고의 템플릿 디렉토리를 설정합니다. settings.py
파일에 다음 내용을 추가합니다.
TEMPLATES = [
{
...
'DIRS': [os.path.join(BASE_DIR, 'frontend/build')],
...
},
]
이 설정을 통해 장고가 리액트 빌드 파일을 템플릿으로 인식하게 됩니다.
4. 리액트 빌드
리액트 앱을 빌드하고, 빌드 파일을 장고 프로젝트에 포함시킵니다.
cd frontend
npm run build
위 명령어를 실행하면 frontend/build
디렉토리에 빌드된 파일들이 생성됩니다. 이 파일들이 장고에서 사용될 것입니다.
5. 장고 서버 실행
마지막으로, 장고 서버를 실행하여 통합된 애플리케이션을 확인합니다.
python manage.py runserver
이제 브라우저에서 http://127.0.0.1:8000
에 접속하면 리액트 앱이 표시됩니다.
이 기본 설정을 통해 장고와 리액트를 연동할 수 있습니다. 이후에는 API를 통해 백엔드와 프론트엔드 간의 데이터를 주고받는 작업을 진행하면 됩니다. 이를 위해 Django REST framework
를 사용하는 것도 좋은 방법입니다.
위의 설명을 통해 장고와 리액트를 통합하는 과정을 자세히 이해할 수 있습니다. 각 단계에서 필요한 명령어와 설정 파일을 수정하는 방법을 명확하게 안내하였습니다.