*(9.0) 리액트.장고.회원가입 Quick Start_ *
10분 만에 토큰 방식 회원가입 구성하기
안녕하세요? 영어쌤 죠니입니다.
이번엔 그 동안의 에러 등등... 아... 힘듭니다.
장고가 이렇게 힘든것인줄은...
어쨌든 쉽진 않지만 빠르게 회원가입 및 토큰 방식 인증을 구성하는 방법을 포스팅을 합니다.
다음의 방법대로 하면 10분만 투자하여 회원가입 및 인증 튜토리얼을 구성해보는 시간이 되겠습니다.
해당 방법은 Traversy Media의 Brad Traversy께서 작성하신
[ Github: Lead_Manager_React_Django ]
[ Youtube: Lead_Manager_React_Django ]
프로젝트 입니다.
작업환경
OS_ Ubuntu 18.04.2 LTS
Python_ Python 3.6.7
(1) Github 에서 Clone 내려받기
- 다음의 코드를 그대로 복사해 shell에 붙여넣어 다운받으세요.
$ git clone https://github.com/bradtraversy/lead_manager_react_django.git- 혹여나 위의 코드를 통해 git clone에 실패하실 경우 아래의 커드로 해 주시면 됩니다.
$ git clone https://github.com/hyunvinci/lead_manager_react_django.git
- 그러면 다음과 같이 lead_manager_react_django 라는 폴더 형식으로 다운받아 집니다.
- 위의 디렉터리(폴더) 내부로 들어갑니다.
$ cd lead_manager_react_django 
(2) Server Side Dependencies_ 서버측 응용 소프트웨어 설치
- (1) Basic REST API(기본 REST api 만들기) 에서와 유사하지만 !!!
- 현재는 파이썬 가상화 모드가 아니므로 pip3를 통해 install(설치)을 진행합니다.
$ pip3 install django djangorestframework django-rest-knox
- 저는 이미 이전에 설치를 했지 때문에 위와 같이 already satisfied가 출력되네요!
(3) 약간의 수정 진행(버전에 따른 문제 해결, 로컬 밖에서도 접속 가능하도록 하기 위함)
a_ /lead_manager_ract_django/leadmanager/leadmanager/settings.py 수정
b_ /lead_manager_react_django/leadmanager/frontend/src/components/layout/Alerts.js 수정
c_ /lead_manager_react_django/leadmanager/accounts/api.py 수정
(4) Frontend Dependencies 설치 진행
- 다음의 명령어로 설치해 주세요.
$ npm install- 결과(성공)
(5) Project Build(프로젝트 빌드하기), Python django migration 해주기
- 다음의 명령어로 React 빌드를 진행해 주세요.
$ npm run dev
$ npm run build- 결과(성공)
- 마지막에 hidden modules 까지 출력되면 다 끝났으니 ctrl+c 로 빠져나옵니다.
- 다음의 명령어로 Python Django Migration을 해 주세요.
$ python3 ./leadmanager/manage.py migrate- 결과(성공)
(6) 장고 서버 작동_ 로컬 및 외부 아이피에서도 접속 가능
- 다음의 명령어로 장고 서버를 작동시켜 주세요.
- 명령어 맨 뒤의 0:8003에서 8003은 그냥 포트 번호이니 원하시는 포트 번호로 지정해 주셔도 됩니다.
$ python3 ./leadmanager/manage.py runserver 0:8003
- 결과
README.md
Lead Manager
Full stack Django/React/Redux app that uses token based authentication with Knox.
Quick Start
# Install dependencies
npm install
# Serve API on localhost:8000
python leadmanager/manage.py runserver
# Run webpack (from root)
npm run dev
# Build for production
npm run build$ tree
다음 포스팅은 이번 과정을 거치며 생겨난 문제에 대하여 기술할 것 입니다.
내용은 다음과 같습니다.
1. 새롭게 업데이트 된 Dependencies(package.json)
2. 오류가 발생했던 지점
입니다.
안녕~~~
