1. Separating Backend and Frontend Templates
기존 Django 템플릿에서 React 템플릿으로 작업을 하고자 합니다.
그렇다면 왜 굳이 장고에서 템플릿을 사용하면 편한데?!
그 이유는 ……
예를 들면 한명이 장고를 개발 중에 있는데 서비스 유저수가 늘어나게 되어 다른 개발자를 뽑아야 될 경우가 생깁니다.
개발자 대부분 “협업”을 하는데 Backend와 Frontend 작업 시 서로 분리되지 않으면 Frontend와 Backend를 동시에 작업해야 하는 번거러움이 발생된다고 생각됩니다.
그럼 여러개의 언어를 다 알아야 하는 슬픈 상황이 생기는거죠…
“결론”은 Backend는 API로 Frontend 쪽으로 데이터를 전달해 주면되고 Frontend 쪽에서는 데이터 받아서 화면 구성을 해주면 관리 측면이나 개발자 입장에서도 편하다는 겁니다.
위 내용은 개인적인 견해입니다.
자 그럼 강의를 시작하도록 하겠습니다.
Part 1 : Django Setup
우선 장고부터 설치 하시고, 방법은 아래 링크 참조하시면 됩니다.
Part 2 : Django & React Create Projects
# Django Install
$ django-admin startproject djangoreact
$ cd djangoreact# React install
$ npm install -g create-react-app
$ create-react-app frontendPart 3 : Create Django App
$ python manage.py startapp api
$ python manage.py migrate
Part 4 : Install API with DRF(Django REST Framework)
$ pip install django-rest-framework
Part 5 : Django CORS Setup
Django 로 REST Api 를 만들었는데 Front 단이랑 연결을 해야할때
CORS 오류가 발생함으로 설치 및 설정이 필요합니다.
$ pip install django-cors-headers#Setting.py Code
Part 6 : Use Django(React) Template
장고 템플릿을 더 이상 사용하지 않기 때문에 Django Settings.py 파일 내에 Static 경로를 변경하여야 합니다.
위 값 설정 후 python manage.py runserver을 실행해 보면 아직 템플릿이
변경 되지 않은 것을 확인 할 수 있어요…. 띠용….
하지만 장고 템플릿이 나오는 것이 정상입니다.
Part 7 : Django React Template Build
템플릿을 적용하기 위해서는 경로를 명령어로 다시 한번 알려줘야합니다.
우선 django 내에 있는 Manage.py 코드를 변경합니다.
마지막으로 urls.py 수정하면 됩니다.
이제 아래와 같이 명령어를 넣어주시면 Django에서 React Template를 build를 하여 템플릿이 변경 되는 것을 확인 할 수 있습니다.
$ python manage.py runserver react
짜잔 !! 장고 템플릿이 변경되는걸 확인 할 수 있으십니다.
여기까지 오시느라 수고 하셨습니다.
위 내용 입력하는게 귀찬으신 분들은 Github clone으로 받으셔서 테스트 해보시면 됩니다.
주의사항
Github clone 다운로드 받고 나시면 create-react-app 이 설치가 되어 있지 않습니다.
꼭 cd frontend 폴더에 들어가신 후 npm install 명령어를 입력해서 package 설치 후 장고 실행 바랍니다.
$ cd frontend$ npm install$ cd ..$ pip install -r requirements.txt$ python manage.py runserver react
다음 강의는 API를 연결 하는 법에 대해서 알려드리도록 하겠습니다.
궁금한 사항이 있으시면 댓글 달아주세요~~
