programing

장고와 리액트 입수하는 방법JS가 같이 일한다고?

goodsources 2023. 3. 12. 10:44
반응형

장고와 리액트 입수하는 방법JS가 같이 일한다고?

Django는 처음이고 React JS는 더 새로워졌습니다.Angular에 대해 알아봤는데JS와 React JS는 React JS로 결정했습니다.앵글이 점점 튀어나오는 것 같았어각도에도 불구하고 JS의 인기는 최고JS는 시장 점유율을 높이고 있으며, 리액트(React)는JS가 픽업 속도가 빠르다고 합니다.

그 모든 잡동사니는 차치하고, 나는 Udemy에 대한 수업을 듣기 시작했고, 몇 개의 비디오를 본 후 그것이 Django와 얼마나 잘 통합되는지 보는 것이 중요해졌다.그래서 어쩔 수 없이 벽에 부딪혔을 때 어떤 문서가 나와 있는지 몇 시간이고 밤이고 헛수고만 하고 있지 않습니다.

도 없고, 튜토리얼도 없어요.pip우연히 몇 안 되는 하지 않거나 지났습니다.pyreact예를들면.

한 가지 생각은 리액트를 치료해야 한다는 것이었다.JS는 완전히 분리되어 있지만, 원하는 클래스와 ID를 고려하면서렌더링할 JS 컴포넌트.개별 리액트JS 컴포넌트는 단일 ES5 파일로 컴파일 됩니다.단일 파일을 Django 템플릿으로 Import하기만 하면 됩니다.

Django Rest Framework가 관련된 것처럼 들리지만, Django 모델에서 렌더링하면 금방 무너질 것 같습니다.레독스가 이 모든 것에 어떤 영향을 미치는지 알 수 있을 만큼 멀지도 않다.

Django와 ReactJs를 확실하게 사용할 수 있는 사람이 있습니까?

어쨌든 Angular에 대한 설명서와 튜토리얼은 풍부합니다.JS와 Django는 어떤 프런트 엔드 프레임워크든 시작하기 위해 그 경로를 택하는 것이 유혹적입니다.좋은 이유는 아니다.

저는 장고를 사용해 본 경험이 없지만 프런트 엔드부터 백엔드, 프런트 엔드 프레임워크부터 프런트 엔드 프레임워크까지 개념은 동일합니다.

  1. 리액트는 Django REST API를 소비합니다.프론트엔드와 백엔드는 어떤 식으로도 연결되어 있지 않습니다.React는 데이터를 가져오고 설정하기 위해 REST API에 HTTP 요청을 합니다.
  2. React는 Webpack(모듈 번들러)과 Babel(트랜스파일러)의 도움을 받아 Javascript를 번들하여 엔트리 HTML 페이지에 배치되는 단일 파일 또는 여러 파일로 변환합니다.Webpack, Babel, Javascript 및 React and Redux(상태 컨테이너)에 대해 알아봅니다.Django 템플링을 사용하는 것이 아니라 리액트가 프런트 엔드를 렌더링하는 것을 허락할 것으로 생각합니다.
  3. 이 페이지가 렌더링되면 React는 API를 사용하여 데이터를 가져오고 React가 렌더링할 수 있도록 합니다.HTTP 요청, Javascript(ES6), Promise, Middleware 및 React에 대한 이해는 여기에서 필수적입니다.

다음은 웹에서 찾은 몇 가지 유용한 정보입니다(Google 빠른 검색 기준).

이것이 당신을 올바른 방향으로 이끌기를 바랍니다!행운을 빕니다.장고를 전문으로 하는 다른 분들이 제 반응을 더해주셨으면 좋겠습니다.

저도 이제 Django와 React.js를 함께 일하게 되어 당신의 고통을 느낍니다.장고 프로젝트도 몇 개 했고 리액트.js는 장고랑 잘 어울리는 것 같아요.하지만 시작하는 것은 위협적일 수 있습니다.우리는 여기서 거인의 어깨에 서 있습니다;)

제 생각은 이렇습니다. 모든 것이 함께 작동한다는 것입니다(큰 그림, 틀렸다면 누군가 정정해 주세요).

  • 한쪽(백엔드)에 있는 Django와 그 데이터베이스(Postgres를 선호합니다)
  • 외부와의 인터페이스를 제공하는 Django Rest Framework(모바일 앱과 리액트 등)
  • 반대편(프런트 엔드)의 Reactj, Nodej, Webpack, Redux(혹은 MobX?)

장고와 '프런트 엔드' 간의 통신은 Rest 프레임워크를 통해 이루어집니다.Rest 프레임워크에 대한 권한과 권한이 있는지 확인하십시오.

이 시나리오에 적합한 보일러 템플릿을 찾았는데, 개봉 후 바로 사용할 수 있습니다.readme https://github.com/scottwoodall/django-react-template을 팔로우하면 Django Reactjs 프로젝트를 실행할 수 있습니다.이것은 결코 생산을 목적으로 하는 것이 아니라, 어떻게 연결되어 동작하고 있는지를 자세히 알아보기 위한 방법입니다.

제가 제안하고 싶은 작은 변화는 다음과 같습니다.두 번째 단계로 넘어가기 전에 셋업 절차에 따라 백엔드를 셋업하십시오(여기서 Django https://github.com/scottwoodall/django-react-template/blob/master/backend/README.md), 에서는 셋업 요건 파일을 변경합니다).

프로젝트 내의 파일은 /backend/requirements/common.pip에 있습니다.이 파일로 치환해 주세요.

appdirs==1.4.0
Django==1.10.5
django-autofixture==0.12.0
django-extensions==1.6.1
django-filter==1.0.1
djangorestframework==3.5.3
psycopg2==2.6.1

이것은 Django와 그 Rest 프레임워크의 최신 안정 버전을 제공합니다.

도움이 됐으면 좋겠어요.

여기에 나와 있는 어떤 답변보다 미묘한 답변을 원합니다.특히 4년 전 질문 이후 일부 사항이 변경되었으며, 두 개의 다른 애플리케이션으로 설정해야 한다고 주장하는 상위 투표의 답변 중 많은 부분이 정확하지 않기 때문입니다.

다음과 같은 두 가지 주요 아키텍처 옵션이 있습니다.

  1. create-react-app 및 Django REST Framework를 사용하여 완전히 분리된 클라이언트/서버 접근법
  2. 웹 팩을 사용하여 React 빌드 파이프라인을 설정한 다음 컴파일된 파일을 Django 템플릿에 정적 파일로 포함하는 하이브리드 아키텍처입니다.

예를 들어 다음과 같습니다.

옵션 1(클라이언트/서버 아키텍처):

클라이언트/서버 아키텍처

옵션 2(하이브리드 아키텍처):

하이브리드 아키텍처

이 두 가지 중 어느 쪽을 선택할지는 UI의 복잡성뿐만 아니라 팀의 경험에 따라 결정됩니다.첫 번째 옵션은 JS 경험이 많거나 프런트엔드/백엔드 개발자를 분리하거나 전체 애플리케이션을 React 단일 페이지 앱으로 작성하려는 경우에 적합합니다.두 번째 옵션은 일반적으로 Django에 더 익숙하고 앱의 일부에서 React를 사용하면서 빠르게 이동하고 싶다면 더 좋습니다.풀스택 솔로 개발자에게 특히 적합합니다.

"Modern JavaScript for Django Developers" 시리즈에는 아키텍처 선택, JS 빌드를 Django 프로젝트로 통합, 단일 페이지 React 앱 구축 등 더 많은 정보가 포함되어 있습니다.

완전히 공개합니다. 저는 그 시리즈의 작가입니다.

다른 사람이 답한 것처럼, 새로운 프로젝트를 작성할 경우 프런트엔드와 백엔드를 분리하여 임의의 django rest 플러그인을 사용하여 프런트엔드 어플리케이션용 rest api를 생성할 수 있습니다.여긴 이상적인 세상이야

django 템플릿이 이미 배치된 프로젝트가 있는 경우 응용 프로그램을 로드하는 페이지에서 react dom 렌더를 로드해야 합니다.제 경우 이미 django-pipeline을 사용하고 있고 browserify 확장자를 추가했을 뿐입니다.(https://github.com/j0hnsmith/django-pipeline-browserify)

예시와 같이 django-pipeline을 사용하여 앱을 로드했습니다.

PIPELINE = {
    # ...
    'javascript':{
        'browserify': {
            'source_filenames' : (
                'js/entry-point.browserify.js',
            ),
            'output_filename': 'js/entry-point.js',
        },
    }
}

"entry-point.browserify.js"는 템플릿에서 반응 앱을 로드하는 ES6 파일일 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app.js';
import "babel-polyfill";

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import reducers from './reducers/index.js';

const createStoreWithMiddleware = applyMiddleware(
  promise
)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App/>
  </Provider>
  , document.getElementById('my-react-app')
);

이제 django 템플릿에서 앱을 쉽게 로드할 수 있습니다.

{% load pipeline %}

{% comment %} 
`browserify` is a PIPELINE key setup in the settings for django 
 pipeline. See the example above
{% endcomment %}

{% javascript 'browserify' %}

{% comment %} 
the app will be loaded here thanks to the entry point you created 
in PIPELINE settings. The key is the `entry-point.browserify.js` 
responsable to inject with ReactDOM.render() you react app in the div 
below
{% endcomment %}
<div id="my-react-app"></div>

하면 django-pipeline 중에 된다는 장점이 .collectstatic.

첫 번째 접근법은 별도의 Django 앱과 React 앱을 구축하는 것입니다.Django는 Django REST 프레임워크를 사용하여 구축된 API를 제공하고 React는 Axios 클라이언트 또는 브라우저의 fetch API를 사용하여 이러한 API를 소비합니다.개발 및 실가동 중 하나는 Django(REST API)용이고 다른 하나는 React(스태틱 파일 제공)용입니다.

두 번째 접근 방식은 프런트엔드와 백엔드 애플리케이션이 결합되는 방식과는 다릅니다.기본적으로 Django를 사용하여 리액트 프런트엔드를 제공하고 REST API를 공개합니다.따라서 리액트 및 웹 팩을 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'),
        }
}

그런 다음 리액트 응용 프로그램을 마운트하는 데 사용할 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>

다음 URL에 합니다.urls.py 하기 위해

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")),

]

서버를 「」라고 「됩니다.webpack-stats.json존재하지 않습니다.이제 React 응용 프로그램에서 통계 파일을 생성할 수 있도록 해야 합니다.

앱 하여 React를 합니다.webpack-bundle-tracker

npm install webpack-bundle-tracker --save

다음 웹 팩 "하다"로 합니다.config/webpack.config.dev.js 후 " " " 를 추가합니다.

var BundleTracker  = require('webpack-bundle-tracker');
//...

module.exports = {

    plugins: [
          new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
    ]
}

그러면 BundleTracker 플러그인이 웹 팩에 추가되고 웹 팩에 플러그인이 생성되도록 지시됩니다.webpack-stats.json상위 폴더에 있습니다.

으로 해 주세요.config/webpack.config.prod.js산용입입니니다

를 다시 하면 React가 실행됩니다.webpack-stats.json생성되고 Django는 이를 소비하여 React dev 서버에 의해 생성된 웹 팩 번들에 대한 정보를 검색할 수 있습니다.

다른 할 일이 좀 있어요.자세한 내용은 이 튜토리얼을 참조하십시오.

백엔드 또는 Django 기반 역할에서 React를 사용하려는 사용자를 위한 메모리액트를 셋업할 수 있는 사람이 없다JS 환경은 첫 번째 시도에서 성공했습니다:)

Owais Lone의 블로그가 있습니다.이 블로그는 http://owaislone.org/blog/webpack-plus-reactjs-and-django/에서 구할 수 있지만 웹 팩 구성의 구문은 매우 최신이 아닙니다.

블로그에 기재되어 있는 순서에 따라서, Web 팩의 설정 파일을 이하의 컨텐츠로 치환하는 것을 추천합니다.하지만 만약 여러분이 장고와 리액트를 모두 처음 접하는 사람이라면, 학습 곡선 때문에 한 번에 하나씩 씹어보세요, 여러분은 아마 좌절할 것입니다.

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    context: __dirname,
    entry: './static/assets/js/index',
    output: {
        path: path.resolve('./static/assets/bundles/'),
        filename: '[name]-[hash].js'
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },


  resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    }
};

인정된 답변은 Django 백엔드와 리액트 프론트엔드를 분리하는 것이 어떤 일이 있어도 올바른 방법이라는 것을 믿게 합니다.실제로 React와 Django를 결합하는 방법이 있으며, 이는 특정 상황에서 더 적합할 수 있습니다.

이 튜토리얼은 이것을 잘 설명합니다.특히:

다음의 패턴(거의 모든 Web 프레임워크에 공통)이 표시됩니다.

- 자체 "프런트 엔드" 장고 앱으로 대응: HTML 템플릿 1개를 로드하여 프론트 엔드를 React가 관리하도록 합니다(난이도: 중간).

- 스탠드아론 API로서의 Django REST + 스탠드아론 SPA로서의 대응 (난이도: 인증에는 JWT가 필요)

· 믹스 앤 매치 : 장고 템플릿 내의 미니 리액트 앱 (난이도: 심플)

몇 년 늦었다는 건 알지만 다음 여정을 위해 내놓을 거예요

GraphQL은 DjangoRESTFramework에 비해 훨씬 쉽고 도움이 되었습니다.또, 응답의 관점에서도 유연성이 높아집니다.원하는 것을 얻을 수 있고, 원하는 것을 얻기 위해 응답을 걸러낼 필요가 없습니다.

서버측에서 Graphene Django를 사용하고 React+Apollo/Relay를 사용할 수 있습니다.그것은 당신의 질문이 아니기 때문에 당신은 그것을 조사할 수 있습니다.

언급URL : https://stackoverflow.com/questions/41867055/how-to-get-django-and-reactjs-to-work-together

반응형

'programing' 카테고리의 다른 글

뷰포트 크기에 따라 조건부로 렌더링합니다.  (0) 2023.03.12
참조가 DOM 요소를 가리킬 때 useEffect의 종속성으로 ref.current를 사용하는 것이 안전합니까?  (0) 2023.03.12
JSON 피드에서 선택한 드롭다운 목록을 AngularJS로 채우려면 어떻게 해야 합니까?  (0) 2023.03.07
Javascript에는 필수 vs .default가 필요합니다.  (0) 2023.03.07
Oracle - SQL 개발자로부터 스크립트를 생성하는 방법  (0) 2023.03.07

'programing'의 다른글

  • 현재글장고와 리액트 입수하는 방법JS가 같이 일한다고?

관련글

댓글

티스토리툴바