[Django/React] 장고와 리액트 연동 (1)

[Django/React]  장고와 리액트 연동 (1)

장고와 리액트의 연동은 장고의 REST 프레임워크(DRF, Django Rest Framework)를 사용하여 연동한다.

 

출처 : https://wikidocs.net/197707

프론트엔드(React)가 Django 백엔드로 API 요청을 보내면, 장고는 요청을 서버 사이드 로직에 따라 처리하여

HTTP 응답으로 포장하여 프론트엔드로 보낸다.

 

데이터를 변경해야하는 경우엔 장고는 데이터베이스에서 필요한 작업을 수행한 다음,

프론트엔드로 성공/실패 여부를 확인하는 응답을 보낸다.

 

Django 백엔드에서 응답을 받으면, 프론트엔드는 UI를 업데이트한다.

 

위와 같이 프론트 엔드와 백엔드가 상호 작용을 하기위한 연동을 진행해보자.

 

DRF 설치

API 서버로 사용할 Django Rest Framework를 먼저 설치해준다.

pip install djangorestframework

장고 앱을 생성한다.

python manage.py startapp webApp

앱을 생성한 후의 디렉토리 구조는 다음과 같다.

 

Settings.py 설정

프로젝트 디렉토리의 settings.py에 위에서 생성한 App명과 rest_framework를 등록해준다.

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "webApp",
    "rest_framework"
]

 

Models 생성

App 디렉토리의 models.py 파일에서 모델을 생성하여 등록해준다.

 

장고의 모델은 데이터에 대한 하나의 정보 소스다.

모델은 저장하고 있는 데이터의 필수적인 필드와, 동작(메서드)를 포함하고 있다.

 

일반적으로 각각의 모델은 하나의 데이터베이스 테이블에 매핑된다.

class Review(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    updated = models.DateTimeField(auto_now=True)

제목과, 내용, 업데이트 타임을 모델으로 생성해주었다.

여기서 title, content, updated가 모델의 필드가되고, 속성이 데이터베이스의 column에 매핑된다.

 

마이그레이션

모델 생성 후 마이그레이션으로 DB에 적용 한다.

python manage.py makemigrations
python manage.py migrate

마이그레이션이 완료되었으면 admin 페이지에서 import 후 테이블이 생성되었는지 확인할 수 있다. 

import는 admin.py에서 할 수 있다.

from django.contrib import admin
from .models import Review

admin.site.register(Review)

admin 계정을 생성 후 서버를 실행시켜보자

python manage.py createsuperuser
python manage.py runserver

admin 페이지는 http://localhost:8000/admin 으로 접속이 가능하다.

Reviews라는 테이블이 생성된게 보이고, ADD를 클릭 해보면 models에서 정의한 필드도 확인 할 수 있다. 

 

데이터 반환값을 JSON으로 Serialize(직렬화)하는 과정이 필요한데, 다음 포스팅에서 다뤄보겠다.

 

참고 

https://breathtaking-life.tistory.com/136