디스 프로그래머 (This Programmer)

간단한 react JS + Django 어플리케이션 만들기 본문

Python/Django

간단한 react JS + Django 어플리케이션 만들기

디스 프로그래머 2018. 12. 22. 14:50

간단한 react JS + Django 어플리케이션 만들기

일단 프로젝트를 시작하기 전에 서론이 길다. react와 django가 동작하는 방식에 대해선 관심 없고 단지 어떻게 만드는 지에 대해서만 관심있는 사람이라면 이 텍스트블록들은 과감하게 넘겨도 좋다. 하지만 제대로 만들기 위해선 react와 django를 이용한 웹어플리케이션이 어떻게 작동하는지에 대해서 간단하게나마 알아둘 필요가 있다. 그럼 시작하겠다.

react는 Single Page Application을 위해 만들어진 Javascript라이브러리이다. 페이스북에서 만들었는데 딱 페이스북이 어떻게 동작하는지 보면 이 용도를 이해할 수 있다. 페이스북에서 좋아요를 누르고 댓글을 달고 페메를 보내는 건 전부 한 페이지에서 이뤄진다. 넷플릭스 또한 어떤 작품을 누르든 장르 범주를 바꾸지 않는 이상 해당 페이지에서 계속해서 데이터가 바뀌고 DOM구조가 바뀐다. 지속적인 데이터 변화 및 구조가 변경되는 페이지를 전부 ajax와 js, jQuery만으로 구현하면 코드가 어지러워지고 또 이는 유지보수의 어려움을 야기하기 때문에 react가 나온 것이다. 그리고 이 react는 jsx라는 문법을 사용한다. 필수는 아니지만 이를 사용하면 코드 생산성과 퍼포먼스를 높일 수 있다.

 django는 python언어를 기반으로 한 경량 웹프레임워크이다. 더 할 말이 없다. 아무튼 서로 다른 언어로 만들어진 웹프레임워크와 라이브러리가 만나 하나의 서비스로 작동해야 한다.


첫번째 방법


첫번째 방법으로는 django template에서 react가 작동할 수 있게 static파일에 react js를 넣어 라이브러리로 사용하거나 cdns서버에서 라이브러리를 가져오는 방법이다. 이 방법은 서버 스트럭쳐가 간단하지만 react의 기능 사용에 제한이 많아 많이 채택되는 방법은 아니다.



두번째 방법


두번째 방법으로는 frontend를 전부 react로 작성하고 그 데이터는 내부통신망의 django-rest-framework를 이용하여 가져오는 방식이다. 외부에는 front로 작성된 부분만 노출되고 동작이 이뤄질 때마다 내부에 개설된 django-rest-framework 네트워크를 통해 가져온다고 보면 된다. 그래서 비즈니스로직과 프론트엔드 동작을 완전히 분리할 수 있고 react의 기능도 온전히 사용가능할 수 있다. 하지만 서버 설정이 첫번째 방법보다는 복잡하다. django는 uWSGI나 gunicorn을 통해 항상 rest-api request에 응답할 수 있는 상태가 돼야하고 외부에는 react로 만들어진 frontend가 노출돼있어야한다. 사실상 모든 CRUD작업이 django-rest-framework에 의해서 이뤄지므로 GET, POST, PUT, DELETE작업에 대한 인증 작업 및 구분을 제대로 구현해야 한다. 한줄요약하자면 django와 react사이의 내부네트워크를 구성한 다음에 react와 client의 외부네트워크를 구성시켜야 한다. 아 물론 꼭 django와 react사이에 내부네트워크가 존재해야하는 건 아니다. 인증과정과 CRUD동작에 대한 rest api루트가 제대로 설정돼있다면 frontend서버와 backend서버를 완전분리시키는 것도 좋은 방법일 것이다.

 하지만 두번째 방법 사용시 알아야할 것은 여기에서 끝이 아니다. 바로 SEO를 위한 SSR이다. 무슨 말인가 하면 검색엔진최적화(Search Engine Optimization)를 위해서 서버사이드렌더링(Server Side Rendering)이 돼야한다는 말이다. 한 예로 첫번째 방법과 비교해보자. 첫번째 방법은 사이트에 들어가자마자 http리퀘스트에 의해 html페이지가 완성되어 돌아온다. 그렇게 나온 데이터를 검색엔진이 종합하여 노출순위를 지정한다. 하지만 두번째 방법 사용시에는 그냥 http요청만으로는 페이지가 그려서 오지 않는다. 페이지 안에 들어가서 작성돼있는 javaScript들을 자극해야만 해당 정보들이 html태그로 그려져서 출력된다.
 그렇다, 검색엔진은 http요청을 보낸 순간에 그려져있지 않는 비동기데이터들은 종합하지 못한다. 그래서 SSR이라는 기술이 필요한 것이다. http요청을 받았을 때 이미 어느정도는 html태그로 페이지를 그려놓아 검색엔진이 정보를 수집해갈 수 있게 해주는 기술인 것이다. 구글의 검색엔진이 js를 작동하여 종합한 데이터까지 포함시키게 개선할 거라는 얘기는 종종 있다. 구현 된건지, 아니면 개발 중인지는 모르겠다.


종합


많은 사이트들은 두번째 방식을 선호한다. SSR같은 경우에는 어차피 기술로 구현할 수 있을 뿐더러 frontend와 backend의 완전한 분리가 유지보수성 및 작업효율 향상에 지대한 영향을 끼치기 때문이다. backend프로그래머들은 데이터에만 신경쓰면 되고 frontend프로그래머들은 어떻게 보여지는지에 대한 신경만 쓰면 된다. 그래서 서론이 길었지만 한번 django와 react를 이용하여 간단한 어플리케이션을 만들어보겠다.


준비물


  • python3.x
  • django
  • djangorestframework
  • npm
  • yarn

파이썬은 파이썬 공식홈페이지에서 설치할 수 있고 django와 djangorestframework는 진행하는 도중에 venv를 이용해 깔 것이다. npm과 yarn이 설치돼있지 않다면 이 게시물을 참고하길 바란다. 커맨드창에 이런 결과가 나오면 준비가 완료된 것이다. 그리고 모든 과정은 윈도우10에서 진행됐다는 점을 알린다.



django 구축하기


일단 작업 디렉토리를 정하자. 나는 디렉토리 이름을 django-react로 정하였다. 그리고 그 안에 django-react-venv라는 이름으로 가상환경을 설정하자. 가상환경 설정이 끝났으면 backend디렉토리를 생성하고 django를 설치하자. 프로젝트명은 djangoreactapi로 하였다. 명령어로 정리하자면 이렇다. 특히 프로젝트를 시작할 때 뒤의 .을 잊지 말고 새로운 폴더가 아닌 현재 디렉토리에서 프로젝트를 생성할 수 있게 하자. (몇몇 예약어는 프로젝트명으로 사용하라 수 없다.)

C:\~\django-react> python3 -m venv django-react-venv
#가상환경 생성
C:\~\django-react> django-react-venv\Scripts\activate
#가상환경 실행
C:\~\django-react> python -m pip install --upgrade pip
#pip업데이트. 현재는 가상환경 안에 있으므로 그냥 python명령어가 python3를 가리킨다.
C:\~\django-react> pip install django
#django 설치. django-rest-framework는 차후에 설치한다.
C:\~\django-react> mkdir backend
C:\~\django-react> cd backend
C:\~\django-react\backend> django-admin startproject djangoreactapi .

여기까지 진행했을 때의 디렉토리 구조는 이렇다.

이번엔 api로 호출시킬 app을 만들자. manage.py가 있는 backend디렉토리에서 아래 명령어를 실행하면 된다. 나는 api로 호출할 앱의 이름을 post로 하였다.

C:\~\django-react\backend> python manage.py startapp post
#app초기화
C:\~\django-react\backend> python manage.py migrate
#migrate실행. DB를 따로 설정하지 않았기 때문에 sqlite파일이 생성될 것이다.

post앱이 추가되었으니 djangoreactapi/settings.py에 post를 추가하자.

#backend/djangoreactapi/settings.py
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'post', #추가
    
]
...

그리고 django의 개발용 내부 웹서버를 실행해보자.

C:\~\django-react\backend> python manage.py runserver


아주 잘 작동한다. 이제 모델을 정의하고 제대로 app을 활용할 수 있게 하자.

#backend/post/models.py
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()

    def __str__(self):
        """A string representation of the model."""
        return self.title
#backend/post/admin.py
from django.contrib import admin

from .models import Post

admin.site.register(Post)

여기까지 했으면 migrate으로 변경된 부분을 db에 적용시키고 superuser를 생성하여 제대로 작성됐는지 확인해보자. manage.py가 있는 backend폴더로 돌아가서 migrate를 실행시키고 관리자를 생성했으면 다시 runserver를 통해 제대로 작동하는지 확인해보자.

C:\~\django-react\backend> python manage.py makemigrations
...
C:\~\django-react\backend> python manage.py migrate
...
C:\~\django-react\backend> python manage.py createsuperuser
...
C:\~\django-react\backend> python manage.py runserver

이 과정까지 완료했을 때 localhost에서 돌아가고 있는 웹서버 뒤에 /admin이라는 슬러그를 추가하여 접속하고 createsuperuser로 만든 계정으로 로그인하자. 이 과정까지 잘 이뤄졌으면 아래 모습을 확인할 수 있다.

임시로 여러개의 포스트를 추가하자. UI가 직관적이라 햇갈리진 않을 것이다. Add버튼을 통해 마음 내키는대로 추가하자. 난 이런식으로 추가하였다.

여기까지 했으면 django-rest-framework를 사용할 차례이다.



django-rest-framework 구성하기


아래의 명령어를 통해 django-rest-framework를 설치하자. 사담이지만 DRF는 진짜 사용해보면 해볼수록 멋지고 잘 만든 라이브러리인 것 같다.

C:\~\django-react\backend> pip install djangorestframework

설치가 완료되면 아까처럼 settings.py에 새로운 app이 추가됐다는 것을 알려줘야 한다.

#backend/djangoreactapi/settings.py
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'post',
    'rest_framework', #추가
    
]
...
#이하 추가
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

참고해야할게 DRF는 자동으로 pk값을 index로 지정해서 뿌려준다는 점이다. 이제 api app을 추가하였으니 api루트로 들어왔을 때 데이터를 보낼 수 있게 해야한다. 어떤 형식의 데이터를 보낼지는 post app디렉토리 안의 view.py에서 정해진다. 그리고 중요한게 바로 serializers이다.


django + react 앱은 api요청을 통해 데이터를 주고 받는데 많은 사람들이 아다시피 api요청 및 반환값은 거진 데이터포멧이 JSON(JavaScript Object Notation)으로 되어있다. 그래서 반환값을 JSON으로 직렬화(Serialize)해주는 것이 필요하다. 이때 필요한 것이 DRF의 serializers이다. 만들어져있는 파일이 아니니 직접 만들어 작성해야한다.

#backend/post/serializers.py
from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        fields = (
            'id',
            'title',
            'content',
        )
        model = Post

seializer가 작성되었으면 views.py를 작성하자.

#backend/post/views.py
from django.shortcuts import render
from rest_framework import generics

from .models import Post
from .serializers import PostSerializer

class ListPost(generics.ListCreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

class DetailPost(generics.RetrieveUpdateDestroyAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

이제 데이터를 다듬어서 보내줄 준비는 되었다. 이제 api요청이 왔을 때 Post데이터를 보내야 하니 urls.py를 만들어서 작성하자.

#backend/post/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.ListPost.as_view()),
    path('<int:pk>/', views.DetailPost.as_view()),
]

Post내부의 urls.py를 정의하였으니 이제 루트 디렉토리에서의 urls.py에 이 내용을 반영시켜야 한다.

#backend/djangoreactapi/urls.py
from django.contrib import admin
from django.urls import path, include

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

여기까지 작성되었으면 이제 api요청이 제대로 작동하는지 확인해보자. manage.py가 있는 디렉토리에서 runserver를 실행하여 다시 서버를 띄워보자. 그리고 뒤에 /api슬러그를 붙여 접속해보면 아래 화면을 확인해볼 수 있다.

아까 /admin에서 등록했던 내용들이다. 주소 뒤에 id를 지정해주면 post/urls.py에 선언해놨던 url패턴에 따라서 해당 Post만 조회할 수 있다.

이런식으로 말이다. 여기까지 왔으면 이제 django api서버의 준비는 완료된 것이다. 그리고 마지막으로 script태그 안에서의 api를 통한 데이터의 접근제어를 위해 HTTP 접근제어 규약(CORS : Cross-Origin Resource Sharing)을 추가해야한다. 간단하게 설명하자면 기존의 HTTP요청에서는 imglink태그 등으로 다른 호스트의 css나 이미지파일 등의 리소스를 가져오는 것이 가능한데 script태그로 쌓여진 코드에서의 다른 도메인에 대한 요청은 Same-origin policy에 대한 규약으로 인해 접근이 불가하다. 하지만 아다시피 react는 거의가 script요청에 의해 페이지를 그리는 방식이므로 이제 대한 제약 해제가 필요하다. django로 돌아가고 있는 api서버와 페이지를 그려주는 react서버는 명목상 아예 다른 서버로 구분되기 때문이다.


말만 들으면 굉장히 어렵운 작업일 것 같지만 패키지 하나를 설치하여 추가함으로써 해결할 수 있다.

C:\~\django-react\backend> pip install django-cors-headers
#backend/djangoreactapi/settings.py
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'post',
    'rest_framework',
    'corsheaders', # 추가
]
...
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',     # 추가
    'django.middleware.common.CommonMiddleware', # 추가
    '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_ORIGIN_WHITELIST = (
    'localhost:3000/'
)
#script안에서의 리소스 요청을 허용할 도메인 추가

이제 간단한 react앱을 작성하여 django에서 전송해주는 데이터를 받아보도록 하자.



REACT 앱 작성하기


준비물에서 말했던 yarn을 기반으로 작업할 것이다. 작업 초반에 backend디렉토리를 만들었던 django-react디렉토리로 돌아가서 create-react-app을 통해서 react앱을 작성할 수 있는 환경을 조성할 것이다. 일단 그전에 create-react-app이 필요하다. yarn이나 npm으로 설치할 수 있는 패키지이다. 다음의 명령어를 통해서 설치할 수 있다.

npm install -g create-react-app
#npm을 이용한 방법
yarn global add create-react-app
#yarn을 이용한 방법

create-react-app설치가 완료됐으면 django-react 디렉토리로 이동해 작업하자.

C:\~\django-react> create-react-app frontend

초기화가 완료됐으면 yarn start명령어를 통해 react app이 제대로 작동하는지 확인해보자.

C:\~\django-react> cd frontend
C:\~\django-react\frontend> yarn start

제대로 실행되면 localhost의 3000번 포트에서 react가 실행된 화면이 뜰 것이다.

이렇게 말이다.


이제부터는 frontend요청을 처리할 웹서버와 backend api요청을 처리할 두 개의 웹서버가 작동돼야한다. 아마 이 react앱을 만드는 과정에서 django웹서버가 중지됐을 것이다. 내부 웹서버를 실행하면 cli가 http요청을 출력해주는 형태로 freeze되기 때문이다. venv를 사용하고 있는 커맨드 창에서는 아래의 명령어를 입력하고

C:\~\django-react\backend> python manage.py runserver

새로운 커맨드창을 켜서 아래의 명령어를 입력하자.

C:\~\django-react\frontend> yarn start

그리고 이제는 react앱에서 django가 보내주는 데이터를 받아볼 차례이다. create-react-app 명령어로 생성된 frontend디렉토리에서 src/app.js를 아래와 같이 수정하자.

//frontend/src/app.js
import React, { Component } from 'react';

class App extends Component {
    state = {
        posts: []
    };

    async componentDidMount() {
        try {
            const res = await fetch('http://127.0.0.1:8000/api/');
            const posts = await res.json();
            this.setState({
                posts
            });
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        return (
            <div>
                {this.state.posts.map(item => (
                    <div key={item.id}>
                        <h1>{item.title}</h1>
                        <span>{item.content}</span>
                    </div>
                ))}
            </div>
        );
    }
}

export default App;

조금은 생소한 문법일 것이다. 이에 대해선 jsx를 알아보면 되겠다. 아무튼 이렇게 입력을 끝내면 yarn start로 실행된 웹화면에서 다음과 같은 데이터들을 확인할 수 있다.

django admin페이지에서 내가 임의로 넣었던 데이터들이다. 여기까지 완료됐을 때의 디렉토리 구조는 아래와 같다.


이렇게 django와 react가 연동된 앱을 만들어보았다. django api서버를 내부에 넣어서 때로는 django template으로 만들어진 페이지를 제공하다가 필요할 땐 react로 만들어진 SPA를 제공하거나 혹은 django api서버와 frontend서버를 완전 분리하여 운영하는 것도 방법이겠다.

 

30 Comments
  • 프로필사진 Favicon of https://wed3am.net wed3am 2018.12.25 22:26 신고 정말 좋은 글이네요! 읽지는 않았습니다.
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2018.12.26 11:55 신고 감사합니다!
  • 프로필사진 질문있습니다 2019.05.17 14:11 글 너무 잘 읽었습니다.

    이해가 완벽히 되었고, 도움도 많이 되었습니다.

    하지만 포스팅에 대한 내용을 완성한 뒤에

    한가지 궁금한점이 생겼습니다.

    장고프로젝트의 auth기능은 어떻게 사용해야할까요?

    게시판을 작성할때 보통 유저아이디를 입력해야하는데..

    auth관련한 것도 똑같이 rest api로 주고받으면 되는걸까요?
  • 프로필사진 SamePerson 2019.03.26 13:07 감사합니다~ 좋은 글 읽고가요!
  • 프로필사진 redjango 2019.03.26 16:19 감사합니다 덕분에 성공했습니다.
  • 프로필사진 zzdd1558 2019.04.22 14:01 좋은글 감사합니다
    이번에 django와 react엮어보려고 글찾아보던중에 심플하게 확인해볼수 있는 사이트를 참고하게되었습니다 감사합니다.
  • 프로필사진 ㅇㅇ 2019.05.04 08:07 고마워요 어떻게 해야하는지 끙끙됬는데, 덕분에 살았어요
  • 프로필사진 질문자 2019.05.15 11:02 react의 기능 사용에 제한이 많아 많이 채택되는 방법은 아니라고 하셨는데
    혹시 어떤 제한들이 있는지 알려주실 수 있으신가요?
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.05.15 12:13 신고 가장 단순한 예를 들면 node.js 런타임을 사용하지 않는다는 점입니다. 그냥 문법만 React와 JSX규칙을 따르는 것이지 온전히 js로 컴파일된 형태의 웹 어플리케이션을 구성할 수 없습니다.

    https://soye0n.tistory.com/39

    위 링크에서 확인하실 수 있다시피 문법은 JSX를 따르고 있지만 파일 구성이나 기반이 되는 코드가 보통 html에서 작업하는 것처럼 돼있습니다.

    보통 node진영의 라이브러리를 사용하는 웹어플리케이션들은 작업물을 완성한 뒤에 webpack, babel등을 이용하여 컴파일 과정을 통해 최적화하고 서버에 올려서 사용합니다. 그밖에도 그냥 html에서 script에서 불러오는 형태로 사용한다면 npm이나 yarn같은 패키지매니저를 못 쓴다는 말이기 때문에 React나 기타 node 런타임을 위해서 만들어진 각종 도구들을 사용하기 위해선 더 복잡한 과정을 거쳐야 하며, 파일단위의 컴포넌트 로드가 불가능하기 때문에 재사용에 대한 것들도 의미가 없어집니다. SSR에 대한 처리도 골치아프겠네요...

    개인적으로 스크립트로 로드해서 쓰는 건 딱히 리액트를 쓸 이유가 없다고 생각합니다. 제가 아는 한도에서 말씀드렸지만 이밖에도 더 많은 단점들이 존재할 겁니다. 도움이 되셨길 빕니다!
  • 프로필사진 질문합니다 2019.05.17 14:11 글 너무 잘 읽었습니다.

    이해가 완벽히 되었고, 도움도 많이 되었습니다.

    하지만 포스팅에 대한 내용을 완성한 뒤에

    한가지 궁금한점이 생겼습니다.

    장고프로젝트의 auth기능은 어떻게 사용해야할까요?

    게시판을 작성할때 보통 유저아이디를 입력해야하는데..

    auth관련한 것도 똑같이 rest api로 주고받으면 되는걸까요?

    정리하자면

    이 프로젝트 위에서 장고내장 auth기능을 이용한 로그인기능을 구현하고싶습니다.
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.05.17 20:41 신고 restAPI로만 구성된 어플리케이션에서 유저인증을 구현하는 방법은 바로 oAuth라고 불리우는 기술입니다.

    흔하게 한 플랫폼에서 다른 플랫폼의 아이디로 로그인할 수 있는, 네이버 로그인이나 페이스북 로그인 등 소셜로그인을 예로 들 수 있겠습니다.

    원리를 간단하게 설명해드리자면 로그인하려는 페이지에서 아이디와 패스워드를 restAPI루트를 통해 백엔드 서버로 전송하고 해당 값이 정확하면 일종의 토큰을 발급합니다. 이후로는 각 플랫폼의 처리방식에 따라 다른데 해당 토큰을 세션이나 쿠키 등으로 저장하고 인증이 필요한 액션이 있을 때마다 해당 토큰이 변조되지 않았나 검사하는 식으로 어플리케이션의 작동이 이뤄집니다.

    https://showerbugs.github.io/2017-11-16/OAuth-%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

    이 글이 가장 쉽고 직관적으로 설명돼있네요. django도 프레임워크인만큼 oauth에 대한 부분도 구현이 돼있는데요. django oauth toolkit이라는 파이썬 패키지가 있습니다. 해당 부분에 대해선 아래의
    https://django-oauth-toolkit.readthedocs.io/en/latest/
    을 참고하시면 될 것 같습니다.

    간단하게 설명하자면 프론트로 구성된 페이지에서 django로 oAuth를 위한 토큰발행을 통해 로그인을 구현한다고 보시면 이해가 쉬우실 겁니다.

    음 인터넷 쇼핑몰을 예로 들자면 11번가를 프론트만으로 이뤄진 몰딩, 거기에서 할 수 있는 네이버 로그인이 제가 말한 oAuth기능이고 네이버 서버가 토큰을 발행하는, django로 이뤄진 백엔드 서버라고 생각하시면 간단합니다.

    나중에 이부분에 대해서도 강의를 쓸 예정이니 잘 봐주셨으면 좋겠습니다!


  • 프로필사진 추가질문입니다 2019.05.17 16:49 class ListPost(generics.ListCreateAPIView):

    # 이부분에 로직을 작성하면 되나요??
    # 여러가지 조건들이라던가... 유효서검사라던가..

    queryset = Post.objects.all()
    serializer_class = PostSerializer

    class DetailePost(generics.RetrieveUpdateDestroyAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer


  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.05.17 21:04 신고 예 정확하십니다! 하지만 Post class가 작성돼있는 backend/post/models.py파일을 보면 아시다시피 Post class는 django에서 만들어져있는 models.Model을 상속받고 있는걸 확인할 수 있습니다.

    class ListPost에서 직접 로직을 작성하셔도 괜찮습니다만 첨언해드리자면 Post.objects.all()이라는, django Model에서 상속받은 함수를 사용하고 있는걸 볼 수 있는데 django에서 완성된 함수들을 이용해 복잡한 로직을 직접 짜지 않고 원하시는 대로 모델들을 불러올 수 있습니다.

    https://docs.djangoproject.com/en/2.2/topics/db/models/

    이 페이지에서 해당 부분에 대한 자세한 내용을 확인하실 수 있으며 쿼리조건에 대한 부분은 페이지 내에서

    .get(

    으로 검색해보면 알 수 있습니다. 한 예를 들어 이 페이지에서는

    Membership.objects.get(group=beatles, person=ringo)

    라는 조건을 통해 Membership으로 등록된 DB테이블에서 group이 beatles이고 사람이 ringo인 데이터만 찾습니다.

    Post.objects.all()
    과 비슷한 모습이죠? 이런식으로 구현하시면 됩니다!
  • 프로필사진 리액트 초보 2019.06.15 18:30 감사합니다. 알기 쉽게 설명해 주셔서
    리액트와 연동이 한방에 해결되었습니다.

    제환경에서는 sttings 에서
    CORS_ORIGIN_WHITELIST = (
    'localhost:3000/'
    )
    이부분이 서버 구동시 오류나

    CORS_ORIGIN_WHITELIST = ['http://localhost:3000']

    이렇게 수정했더니 오류없이 서버가 올라왔네요
    감사합니다.
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.06.15 23:13 신고 댓글남겨주셔서 감사합니다. 같은 부분에서 오류나는 다른 분들도 많은 도움이 될 것 같습니다. 감사합니다
  • 프로필사진 리액트공부중 2019.07.08 03:30 해당 부분은 튜플이나 리스트 둘다 사용 가능합니다.
    에러가 나는 이유는 튜플의 목록이 1개 일 경우 쉼표를 반드시 포함해야 하기 때문이죠.
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.07.08 12:20 신고 아~ 맞네요. 파이썬은 리스트나 튜플의 요소가 하나이면 해당 요소의 자료형으로 변수를 인식합니다. 감사합니다.
  • 프로필사진 nopsled 2019.08.19 23:40 Django+react의 경우 SSR을 어떻게 하시나요? 백엔드와 프론트 나누신것 같은데.
    제 경우엔 flask jinja2로 랜더링 후에 컴파일된 react.js로 랜더링 하는 식으로 사용중인데 SSR을 어떻게 해야할지 모르겠네요ㅜㅜ
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.08.20 10:29 신고 저같은 경우엔 next.js라는 라우팅, ssr전용 라이브러리를 사용하고 있습니다!
  • 프로필사진 ohohoi 2019.08.26 15:40 글 잘 읽었습니다. 혹시 react를 사용해서 frontend에 form을 만들어서 제목과 내용을 입력받은 후 제출 버튼을 누르면 서버에 글을 을리게 하려면 어떻게 해야할까요?
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.08.27 11:05 신고 일단 form형식의 데이터를 보내는 데에는 문제가 없지만 해당 데이터를 받아 데이터베이스에 저장하는 과정에서 backend로직 구성이 필요합니다.

    django-rest-framework에서 사용할 restapi루트를 구성하는 부분(backend/post/urls.py)에서 현재 는 보시다시피 ListPost.as_view()나 DetailPost.as_view()등 해당 자료를 조회하는 함수를 사용하고 있는데, 이곳에서 글 업데이트 기능을 지원하는 새로운 루트 구성과 함께 새로운 로직 구현이 필요합니다.

    django프레임워크 공식홈페이지에서 지원하는 튜토리얼을 한번 해보시면 어느정도 감이 오실 것 같습니다.

    https://docs.djangoproject.com/ko/2.2/intro/tutorial01/

    한국어로도 자세히 설명돼있습니다. 감사합니다!
  • 프로필사진 Favicon of https://senticoding.tistory.com 우미__ 2019.09.13 17:46 신고 티스토리의 코딩글이 이렇게나 댓글이 많을 수가 있는지요!!
    너무 잘 읽었습니다.
    맨날 Bootstrap이랑 Django 를 이용해서만 Django에서 바로 Front 작업까지 했었는데, Django랑 React를 함께 이용하는 법을 알아갑니다. ㅎㅎ
    그래도 역시나 django api서버를 두고 front end도 서버를 두고 하는 것이었군요.
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.09.15 14:19 신고 저도 이렇게 많은 분들이 관심가져주실 지는 몰랐네요.. 하하.
    사람들의 관심이 이렇게 많은 것을 확인하였으니 나중에는 강의도 한번 써볼까 생각 중입니다. 댓글 남겨주셔서 감사합니다!
  • 프로필사진 리액트팬 2019.09.25 23:39 CORS_ORIGIN_WHITELIST = ['http://localhost:3000/']
    서버에서 오류가 생겼는데 이 부분을 어떻게 설정해야 할지 도움주시면 감사하겠습니다.
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.09.26 00:35 신고 어떤 이유인지는 모르겠는데 위에도 비슷한 질문의 있었습니다.

    이분께서는

    CORS_ORIGIN_WHITELIST = (
    'localhost:3000/'
    )

    로 했을 때 오류가 나셔서 대괄호로 바꾸셨는데, 한번 해당 부분을 소괄호로 바꿔보시면 작동할 수도 있을 것 같습니다!
  • 프로필사진 정지우 2019.10.27 16:22 감사합니다~
    ['https://localhost:3000'] 로 수정하니까 되네용
  • 프로필사진 hjhj22 2019.11.08 18:35 좋은 글 감사합니다! 리액트와 장고 프로젝트 중인데 개념 이해하고 적용하는데 큰 도움이 되었어요ㅎㅎㅎ
  • 프로필사진 감동... 2019.12.10 22:28 좋은글 정말 감사드립니다
  • 프로필사진 jobadan 2019.12.29 18:32 감사합니다. 도움 많이 됐습니다.
  • 프로필사진 링고 2020.08.03 23:46 감사합니다 정말 복많이 받으세요!!
댓글쓰기 폼