[Django REST Framework]에서 React와의 API 연동

실행 환경

MacOS BigSur - 11.2.1
Python3 - 3.8.2
장고 - 3.1.7
djangorestframework - 3.12.2
npm - 6.14.4
react - 17.0.1
react-dom - 17.0.1
axios - 0.21.1

Django REST Framework (DRF) 시작하기

지금까지 Django만을 이용한 Web 어플리케이션의 작성을 하고 있었습니다만, 프런트 엔드의 고도화를 할 수 없고, DRF를 이용해 React와 조합해 보고 싶다! ! ! 라고 생각했습니다. React에 관해서는 아직 지식이 적습니다만, 우선 DRF로 작성한 API를 React에 건네주는 부분을 구현을 했으므로 그 순서를 메모가 쓰루에 기술합니다.

DRF 계속(백엔드)

마지막 기사 ⇨
htps : // 이 m/카추노 9/있어 ms/52아 756f15207f625f358
에서 커스텀 유저에 의한 DRF 프로젝트 작성은 끝나므로 그 계속부터입니다.
덧붙여서, 디렉토리 구성은 이런 느낌입니다.

my_api
   ├── backend
   │   ├── __init__.py
   │   ├── admin.py
   │   ├── apps.py
   │   ├── migrations
   │   ├── models.py
   │   ├── serializers.py
   │   ├── tests.py
   │   ├── urls.py
   │   └── views.py
   ├── db.sqlite3
   ├── manage.py
   ├── media
   └── my_api
       ├── __init__.py
       ├── asgi.py
       ├── settings.py
       ├── urls.py
       └── wsgi.py

모델

우선 쉽게 Post 모델을 만들었습니다.

models.py

class Post(models.Model):
    title = models.CharField('タイトル', max_length=50)
    text = models.TextField('テキスト')
    created_at = models.DateField('作成日', auto_now_add=True)
    updated_at = models.DateField('更新日', auto_now=True)

    def __str__(self):
        return self.title

보기

views.py

from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from backend import serializers
from .models import Post

class PostAll(APIView):
    def get(self, request):
        try:
            post = Post.objects.all().order_by('-created_at')
            res_list = [
                {
                    'id': p.id,
                    'date': p.created_at,
                    'title': p.title,
                }
                for p in post
            ]
            return Response(res_list)
        except:
            return Response(status=status.HTTP_500_INTERNAL_SERVER_ERROR)

URL 관련

이제 간단한 모델과 뷰를 만들었으므로 URL을 설정합니다.

my_api/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings

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

backend/urls.py

from django.urls import path
from backend import views

urlpatterns = [
    path('', views.PostAll.as_view()),
]

동작 확인

가상 환경 내에서 서버를 시작합니다.

$ python3 manage.py runserver

http://localhost:8000/api/v1/
에 액세스하면, 제대로 API의 동작 확인을 실시할 수 있었습니다.
덧붙여서 데이터는 admin 사이트에서 미리 샘플처럼 몇가지 추가하고 있습니다.

React 프로젝트 작성(프론트)

이전까지와는 다른 터미널을 시작하여 환경 구축, 프로젝트 작성을 실시합니다. 앱 이름이 'frontend'로 설정되었습니다.

$ npx create-react-app
$ cd frontend
$ npm install axios
$ npm install react-router-dom
$ npm start

그러면 Reacr 로고가 표시되는 페이지가 나와서 성공적으로 프로젝트를 만들 수 있다는 것을 알 수 있습니다.
덧붙여서, frontend/src의 디렉토리 구성은 이와 같습니다.

frontend/src
   ├── App.css
   ├── App.js
   ├── App.test.js
   ├── index.css
   ├── index.js
   ├── reportWebVitals.js
   └── setupTests.js

React와 DRF의 협력

그런데, 드디어 DRF와의 제휴를 실시합니다. DRF에서
http://localhost:8000/api/v1/
에서 데이터를 얻을 수 있도록하고 있기 때문에 React 측에서 여기에 Get 요청을 보내도록 구현합니다. axios를 사용하여 간단하게 요청을 구현할 수 있다는 것으로 설치했습니다.

App.js

import React, { Component } from 'react';
import axios from 'axios';

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

    componentDidMount() {
        this.getPosts();
    }

    getPosts() {
        axios
            .get('http://localhost:8000/api/v1/')
            .then(res => {
                this.setState({ posts: res.data });
            })
            .catch(err => {
                console.log(err);
            });
    }

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

export default App;

http://localhost:3000/
에 액세스하면 확실히 DRF로부터 데이터를 받고 있는 것을 알 수 있습니다! !


이번은 DRF와 React의 제휴를 확인할 수 있었던 곳까지입니다.
지금까지 백엔드와 프런트 엔드를 나누어 개발한다고 하는 고도의 개발 경험이 없었기 때문에, DRF와 React가 제휴할 수 있었던 것만으로 매우 기뻤습니다(웃음)
React에 관해서는 아직 지식이 적고, 보자 보이지만 지금부터 개발을 진행해 나가고 싶습니다! !

참고

이하의 페이지가 매우 알기 쉽게, 참고로 했습니다.
- htps : // 이 m/__아니 t__/있어 ms/f5아 5아 64아 05541fc다
- htps : // 코 m / 피요 판만 / ms / 5 fb9c290d452 005782
- htps : // 코 m / 피요 판만 / ms / 0 아 757 아 7b2 d412 07135