Aug 3, 2019
DRF(Django Rest Framework) and Vue.js
Part 1. 장고에서 Vue.js 통신 준비하기
1주일 뒤면 내가 소속된 동아리, ‘멋쟁이 사자처럼’에서 중앙 해커톤이 개최된다.
팀원들과 함께 해커톤 준비를 한 달 가까이 해오면서 “청각 장애인 환자의 진료 개선 서비스” 웹앱을 만들고 있는데, Front-end를 Vue.js를 사용하게 되었다.
여러가지 이유가 있는데, 우선 멋사(멋쟁이 사자처럼 약칭)에서 Django 교육은 학기 중에 꽤 많은 시간을 할애해 교육을 해주었으나 Front-end 프레임워크는 별도로 다뤄본 적이 없어 풀스택 욕심도 있고, 이후에 리액트로 넘어가는 것도 감안해서 미리 JS 맛보기로 Vue.js를 선택하게 되었다.
무엇보다 이 글의 작성자도 졸업 프로젝트로 DRF는 다뤄보았으나, 프론트 프레임워크 경험이 없어 ‘언젠가 풀스택이 되겠지’가 ‘오늘이면 안되나?’는 생각에 Vue를 하게 되었다.
서론이 길었다. 리액트의 경우 Django와 연결하는 영상이나 글이 꽤 있어(리액트 사용자가 많다보니) 자료 찾는 게 어렵지 않았는데 Vue.js는 사용자가 리액트보다는 적어 자료 찾는데 꽤 시간이 걸렸다.
우선 Django 설정부터 해보자. Powershell, Git bash등 원하는 콘솔을 키고 가상환경을 설치하자. pipenv, virtualenv 등 가상환경은 원하는 것을 사용하자. (물론 가상환경 설치 전에 파이썬 설치는 필수다.)
python -m venv venv(powershell, venv 기준 가상환경 activate다.)
cd venv/Scripts/
./activate.ps1(Bash)
source venv/Scripts/activate
그리고 가상환경을 키고 Django를 설치, 원하는 폴더에 project, app을 만들자.
pip install djangopython startproject spacd spapython startapp user
아마 그럼 파일 구조가 이렇게 되어 있을 것이다.
사실 이건 정말 기본적인 django 구성이고, 아직 DRF는 사용하지도 않았다. DRF로 넘어가려면 아래와 같이 추가적인 설정이 필요하다.
spa/settings.py# installed app에 다음과 같은 내용들이 추가된다.
'django.contrib.sites',#밑의 pip install을 통째로 복붙한다.
# pip install django-rest-auth django-allauth django-rest-framework django-cors-headers djangorestframework-jwt#pip list를 했을 때 추가되는 것들
django-allauth 0.39.1
django-cors-headers 3.0.2
django-rest-auth 0.9.5
django-rest-framework 0.1.0
djangorestframework 3.10.2
djangorestframework-jwt 1.11.0
여기서 핵심은 Django Cors Headers와 Django Rest Frame work, 그리고 JWT(Json Web Token)이다. 우선 Cross Domain 통신을 위해 Cors header는 반드시 추가되어야 되는 것이고, 사용자 정보를 토큰화하여 프론트와 백엔드가 주고 받기 위해서는 반드시 JWT가 필요하다. 위 모듈들을 모두 설치했다면 다음과 같을 것이다.
중간에 rest_auth.registration는 회원가입, allauth.account, allauth.socialaccount들은 차후 SNS 로그인을 염두해 추가해놓은 것들이다.
spa/settings.py에서 사전에 설정해야될 것이 상당히 많다.
spa/settings.pyMIDDLEWARE = [# 절대 잊지 말자!! middleware 최상단에 corsheaders를 위치시키자.'corsheaders.middleware.CorsMiddleware',...]
사실 왜 그런지 잘 모르겠는데 middleware에 corsheaders.middleware.CorsMiddleware를 최상단에 두지 않으면 차후에 프론트에서 로그인 POST request를 보냈는데 정보를 못가져 오는 경우가 있었다. 그래서 되도록 corsheaders는 최상단에 뒀다.
# spa/settings.py# cors header settingCORS_ORIGIN_ALLOW_ALL = FalseCORS_ORIGIN_WHITELIST = ["http://127.0.0.1:8080"
]CORS_ALLOW_METHODS = ('DELETE','GET','OPTIONS','PATCH','POST','PUT',)CORS_ALLOW_HEADERS = ('accept','accept-encoding','authorization','access-control-request-method','access-control-request-headers','content-type','dnt','origin','user-agent','x-csrftoken','x-requested-with',)
마찬가지로 settings.py에 해당 코드들을 추가한다. 여기서 Cors 관련 설정이 추가되는 것인데, 어떤 포트에서 들어오는 정보만을 인식할 것이냐 (CORS_ORIGIN_WHITELIST), Cors로 요청하는 메소드들은 어떤 것만 response할 것이냐 (CORS_ALLOW_METHODS), 마지막으로 header에 들어오는 정보들은 어떤 것들을 허용할 것이냐 (CORS_ALLOW_HEADERS) 등을 설정해준다.
AUTH_USER_MODEL = "app이름.앱에 있는 유저 모델 class 이름"SITE_ID = 1REST_FRAMEWORK = {'DEFAULT_AUTHENTICATION_CLASSES': ('rest_framework.authentication.TokenAuthentication','rest_framework.authentication.SessionAuthentication','rest_framework_jwt.authentication.JSONWebTokenAuthentication',),'DEFAULT_PERMISSION_CLASSES': ('rest_framework.permissions.IsAuthenticated',),}#JWT_AUTH 설정을 위해 settings.py 맨 위해 import datetime을 추가하자!!JWT_AUTH = {# If the secret is wrong, it will raise a jwt.DecodeError telling you as such. You can still get at the payload by setting the JWT_VERIFY to False.'JWT_VERIFY': True,# You can turn off expiration time verification by setting JWT_VERIFY_EXPIRATION to False.# If set to False, JWTs will last forever meaning a leaked token could be used by an attacker indefinitely.'JWT_VERIFY_EXPIRATION': True,# This is an instance of Python's datetime.timedelta. This will be added to datetime.utcnow() to set the expiration time.# Default is datetime.timedelta(seconds=300)(5 minutes).'JWT_EXPIRATION_DELTA': datetime.timedelta(hours=1),'JWT_ALLOW_REFRESH': True,'JWT_AUTH_HEADER_PREFIX': 'JWT',}REST_USE_JWT = True
일단 이렇게하면 settings.py에서 추가할 설정은 완료됐다. 중간에 여러 시도해보느라 불필요한 설정이 군데군데 남아있으나 프론트와 통신하는데 전혀 지장없다. 그리고 이제 DB 와 superuser 생성이 남았다.
(Bash)python manage.py makemigrationspython manage.py migratepython manage.py createsuperuser
여기까지 하면 기본 Setting이 끝났다. 다음엔 user api 설정, 그리고 url설정 등을 통해 Token이 정상 발급되는지 확인하는 글로 찾아오겠다.
