첫 번째 방법은 별도의 Django 및 React 앱을 빌드하는 것입니다. Django는 Django REST 프레임 워크를 사용하여 빌드 된 API를 제공하고 React는 Axios 클라이언트 또는 브라우저의 페치 API를 사용하여 이러한 API를 사용합니다. 개발 및 프로덕션에 Django (REST API) 용 서버와 React (정적 파일 서비스 용) 서버 두 대가 필요합니다 .
두 번째 접근 방식은 프론트 엔드 및 백엔드 앱 이 서로 다른 방식입니다. . 기본적으로 Django를 사용하여 React 프론트 엔드를 제공하고 REST API를 노출합니다. 따라서 React와 Webpack을 Django와 통합해야합니다.이를 수행하기 위해 수행 할 수있는 단계는 다음과 같습니다.
먼저 Django 프로젝트를 생성 한 다음이 프로젝트 디렉토리 안에 React CLI를 사용하여 React 응용 프로그램을 생성하십시오
Django 프로젝트의 경우 pip로 django-webpack-loader 를 설치하십시오 .
pip install django-webpack-loader
그런 다음 설치된 앱에 앱 settings.py을 추가하고 다음 객체를 추가하여 구성하십시오.
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': '',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
그런 다음 React 응용 프로그램을 마운트하는 데 사용되며 Django에서 제공하는 Django 템플릿을 추가하십시오
{ % load render_bundle from webpack_loader % }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Django + React </title>
</head>
<body>
<div id="root">
This is where React will be mounted
</div>
{ % render_bundle 'main' % }
</body>
</html>
그런 다음 urls.py이 템플릿을 제공하기 위해 URL을 추가하십시오.
from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView
urlpatterns = [
url(r'^', TemplateView.as_view(template_name="main.html")),
]
이 시점에서 Django 및 React 서버를 모두 시작하면 webpack-stats.json존재하지 않는다는 Django 오류가 발생 합니다. 따라서 React 애플리케이션이 통계 파일을 생성 할 수 있도록해야합니다.
계속해서 React 앱 내부를 탐색 한 다음 설치하십시오. webpack-bundle-tracker
npm install webpack-bundle-tracker --save
그런 다음 Webpack 구성을 꺼내고 config/webpack.config.dev.js추가하십시오.
var BundleTracker = require('webpack-bundle-tracker');
//...
module.exports = {
plugins: [
new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
]
}
이것은 Webpack 에 BundleTracker 플러그인을 추가 하고 생성하도록 지시합니다.webpack-stats.json 되고 상위 폴더 .
config/webpack.config.prod.js프로덕션 에서도 동일한 작업을 수행해야합니다 .
이제 React 서버를 다시 실행하면 React 서버 webpack-stats.json가 생성되고 Django는 React dev 서버가 생성 한 Webpack 번들에 대한 정보를 찾기 위해 서버를 사용할 수 있습니다.
다른 것들이 있습니다. 이 자습서 에서 자세한 정보를 찾을 수 있습니다 .