프론트와 연결하기 (1) - 장고/리액트 연동

우리 프로젝트는 백엔드로 장고(Django)를 사용하고 프론트엔드로 리액트(React)를 사용한다.

때문에 둘을 연동하는 과정이 필요한데, 이번 주제에서는 이 과정을 다뤄보려고 한다.

 

먼저 우리 프로젝트의 상황을 설명해야 하겠다.

우리 프로젝트는 프론트엔드를 담당하는 팀원과 백엔드를 담당하는 팀원이 나눠져있다.

즉, 한 개발환경에서 리액트와 장고를 동시에 사용하지 않는다.

때문에 리액트와 장고를 연동할 수 있는 방법을 먼저 살펴보자.

 

 

 

(1) 장고 -> 리액트 : json 객체로 데이터 보내기

이 방법은 장고와 리액트 연동을 알아볼 때 가장 많이 나왔던 내용이다.

장고의 Django REST Framework(DRF) 를 이용해 장고의 모델을 json 객체로 얻을 수 있다.

이 과정을 완료하면 웹페이지에서 다음과 같은 페이지를 만날 수 있다.

 

장고 모델 json 객체로 GET 하기

이렇게 얻은 url 을 통해 리액트에서 api 로 장고의 모델을 사용하는 방식이다.

그러나 이 방법은 로컬에서 수행할 경우 서로 떨어져 작업하는 프론트와 백을 연결하기에 어려움이 있었다.

그래서 여러 자료를 찾던 중에 두번째 방법을 발견했다.

 

이 방법을 진행한 과정은 다음 글에 자세하게 기록해놓았다.

https://edorrr.tistory.com/19

장고 모델을 json 객체로 추출하기 (DRF)

 

 

 

 

(2) 리액트 -> 장고 : build 배포파일로 장고에 프론트 요소 적용하기

이 방법은 말 그대로 리액트로 작성한 내용을 build 시켜서 생성된 배포 파일을 장고의 별도 폴더에 저장하고,

그 폴더를 template 으로 활용해 장고에서 프론트 요소를 사용하는 방법이다.

 

장고 프로젝트에 build 폴더 추가

 

 

--- 22/03/01 추가

build 배포 파일을 옮겼으면 이제 장고에서 이 파일들을 사용하기 위한 기본 세팅을 해야 한다.

 

 

장고의 템플릿 파일 대신 리액트의 빌드 배포 파일을 사용하는 것이기 때문에 TEMPLATES 부분의 DIRS 에 빌드 파일들이 있는 경로를 설정해준다.

그 다음으로는 각종 static 파일들을 사용하기 위해 STATICFILES_DIRS 파트를 생성해 준 후 마찬가지로 경로를 설정해준다.

# Proj/config/settings.py

import os
...
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 리액트 빌드파일 사용
        'DIRS': [ os.path.join(BASE_DIR, 'frontend', 'build'), ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATICFILES_DIRS = [
    # 리액트 static 파일 연결
    os.path.join(BASE_DIR, 'frontend', 'build', 'static')
]

 

 

다음으로는 url 을 설정해준다. 리액트와 연결해 사용하는 것이기 때문에 페이지의 이동은 리액트가 담당하고 장고에서는 초기 페이지만 리액트의 index 파일과 연결해주면 된다.

# Proj/config/urls.py

...
from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')),
    ... # 기존 작성 부분들
]

 

 

장고에서 이렇게 기본 설정을 끝낸 후 서버를 작동시켜(장고 서버를 작동했다) 확인해보니 static 파일 로드을 제외한 대부분의 기능들이 잘 작동하는 것을 발견했다.

다만 리액트에서 처음 빌드를 진행한 후 서버에서 작동해봤을 때 일부 기능들이 작동하지 않았는데 그 부분들은 장고와 연결한 후에도 여전히 잘 작동하지 않았다. (리액트 개발서버에서는 잘 작동했다.)

 

원래는 이 방법을 개발이 끝나기 전에 시도했다가 다른 방법을 사용하게 되면서 고려하지 않게 되었는데 개발이 모두 끝난 후 서버에 올리려고 하다 보니 프론트엔드인 리액트 파일들을 장고에 함께 넣어서 서버에 등록해야 해서 다시 시도해보았다.

여전히 static 파일을 불러오지 못하는 문제나 페이지 이동에 문제가 있는데 아무래도 더 완벽한 연결을 위해서는 몇 가지의 수정이 더 필요할 듯 싶다.

---

 

 

 

그러나 우리 프로젝트에서 static 파일들을 이용하는 데에 어려움이 나타났고 (404 not found 오류 발생)

리액트의 기능을 완벽하게 사용할 수 없어서 많이 사용하는 방법은 아니라고 한다.

그러나 우리 프로젝트처럼 프론트 로컬과 백 로컬이 나눠진 상황에서 시도해볼만 한 방법으로,

아직 완벽하게 프로젝트에 적용하진 못했지만 앞으로의 글에서 해결하는 과정을 다뤄볼 예정이다.

--- 추가

결국 static 파일을 불러오는 것이 해결되지 않아서 다른 방법을 사용하기로 했다.

---