[DJANGO & REACT] 장고와 리액트 연동하기 (4) - 템플릿 변경하기

Part 1 : Django(React) Template 설정 및 사용하기

 흑흑...  아쉽게도 장고 템플릿을 더 이상 사용하지 않기 때문에 Django Settings.py 파일 내에 Static 경로를 변경하여야 합니다.

 하지만 우리에겐 더 멋진 React 템플릿이 있으니 걱정 안하셔도 되겠죠!?

 

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 = [
    os.path.join(BASE_DIR, 'frontend', 'build', 'static'),
]

 

이런식으로 Settings.py 내용을 변경 또는 추가해 주시면 되요.

 

자~ 설정 변경을 했으니 python manage.py runserver 명령어를 통해 실행해 보자구요!

 

헛! 아직 템플릿이 변경 되지 않은 것을 확인 할 수 있어요... 띠용!!

 

하지만 장고 템플릿이 나오는 것이 정상입니다.

 

Part2 : Django React Template Build

 

 본격적으로 React 템플릿을 적용하기 위해서는 경로를 명령어로 다시 한번 알려줘야 합니다. 

 

 아래와 같이 우선 django 내에 있는 manage.py와 urls.py 2개 파일 코드를 변경 해야합니다.

 

#!/usr/bin/env python
"""Django's command-line utility for administrative tasks."""
import os
import sys

def main():
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'djangoreact.settings')
    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        ) from exc


    try:
        if sys.argv[2] == 'react':
            project_root = os.getcwd()
            os.chdir(os.path.join(project_root, "frontend"))
            os.system("npm run build")
            os.chdir(project_root)
            sys.argv.pop(2)
    except IndexError:
        execute_from_command_line(sys.argv)
    else:
        execute_from_command_line(sys.argv)

if __name__ == '__main__':
    main()

<manage.py>

 

from django.contrib import admin
from django.urls import path, include, re_path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    # path('api/', include('api.urls')),
    re_path('.*', TemplateView.as_view(template_name='index.html')),
]

<urls.py>

 

세팅이 완료 되었습니다. 그만하고 싶어요~ 세팅~~

 

이제 끝났으니 걱정안하셔도 됩니다. ㅜ_ㅜ

 

아래와 같이 명령어를 넣어주시면 Django에서 React Template를 build를 하여 템플릿이 변경되는 것을 확인 할 수 있습니다.

$ python manage.py runserver react

템플릿이 변경되다니 감격 입니다! ㅠ_ㅠ

 

여러분은 이제 2개의 프로그램을 연결하셨습니다.

 

너무 너무 고생많으셨어요~~

 

개발 하실땐 react로 개발하시고 다 완료가 되서 배포 하실땐 python manage.py runserver react 로 빌드해서 사용하시면 됩니다.

 

혹시 질문 사항이 있으시면 댓글 부탁드려요~~