[졸업 프로젝트] 장고와 리액트 연동하기

www.valentinog.com/blog/drf/

Tutorial: Django REST with React (and a sprinkle of testing)

여기에 있는 내용을 하나씩 따라가고 있다.

 

1. 폴더 생성 > 가상 환경 생성 > 가상 환경 실행 > 장고와 Rest프레임워크 설치

윈도우에서는 source ~/activate 대신 ~/activate.bat을 입력하면 실행된다.

장고와 장고 REST 프레임워크 설치

새 장고 프로젝트 생성

2. 장고 어플리케이션 Building

해당 사이트에서는 leads지만 나는 reacter라고 지었다

reacter/apps.py를 보면 클래스가 하나 있다. 그 이름을 복사한다

django_react/settings.py의 INSTALLED_APPS에 reacter.apps.ReacterConfig를 추가한다

 

3. 장고 모델 생성

reacter/models.py에 Lead모델을 추가한다. 귀찮아서 복붙했다

모델 마이그레이션

 

4. 장고 테스트

커버리지하는건데 간단히 말하자면 얼마나 많은 케이스를 '커버'하는지 확인하는 작업이다. 난 패스

 

**** 막간을 이용한 파이참 가상환경 설정 ****

설정 > Project: django_react > Python Interpreter >의 우측 상단의 톱니 > Add를 누른다

아까 생성한 가상 환경/Scripts/python.exe를 추가해주자

OK를 눌러주면 이렇게 내가 생성한 가상 환경 상에서 돌아간다

 

5. 장고 시리얼라이즈

reacter에 serializers.py를 생성한 다음에 내용을 붙여넣는다

 

6. 장고 컨트롤링

설명에 따르면 장고는 대략 세가지 뷰를 사용한다. 함수 베이스, 클래스 베이스, 제너릭 API.

이 튜토리얼에서는 제너릭 API뷰를 사용한다고 한다.

 

reacter/views.py에 내용을 붙여넣는다

7. 라우팅과 URL 매핑

 

django_react/urls.py에 내용을 추가한다

reacter/urls.py를 새로 생성하고 내용을 추가한다

django_react/settings.py 파일의 INSTALLED_APPS에 'rest_framework'를 추가한다

python manager.py runserver으로 서버를 실행한다. 끄려면 ctrl+c

http://127.0.0.1:8000/api/reacter/ 로 들어가보면 다음과 같이 나온다. 데이터가 없어서 []로 나오는 모습

 

8. 장고와 리액트의 연동

새로운 앱 frontend 추가

mkdir 커맨더가 안돼서 직접 폴더를 만듦

npm이 안 깔려있다. 새 노트북이라서 노드 까는거 까먹음

왼쪽의 LTS는 가장 안정적인 버전, 오른쪽의 Current는 최신 버전이다. 나는 LTS를 다운받았다

잘 설치가 되었다. 

frontend/package.json의 scripts에 추가한다.

리액트와 바벨 설치

frontend에 .babelrc를 생성 후 내용 추가

frontend에 webpack.config.js 생성 후 내용 추가

frontend 내부 파일들

9. 프론트엔드 앱을 완성하기

frontend/views.py 파일 내에 내용 추가

froentend/templates/frontend/index.html 생성 후 내용 추가

django_react/urls.py에 frontend.urls 추가

./frontend/urls.py 생성 후 내용 추가

django_react/settings.py의 INSTALLED_APPS에 frontend 추가

frontent/src/components/App.js 생성 후 내용 추가. 파이참이라 JSX문법이 에러나 뜬다(실제론 상관 x)

frontend/src/index.js 생성 후 내용 추가

npm run dev로 웹팩을 실행한다.

서버를 실행했지만 404에러가 뜬다

frontend/package.json의 dev와 build의 output--path에서 main.js를 빼자. 

다시 웹팩을 실행하고 서버를 돌려보니 잘 된다

지시대로 http://127.0.0.1:8000/api/reacter/에서 새 데이터를 추가했다 스크롤 내려서 이름, 이메일, 메시지를 적고 POST를 누른다

성-공