React with Django

드디어 둘을 분리하여 만든 후 합치는 날이 왔다.

현대의 Web은 Front단과 Back단을 따로 만드는데 Front단에도 지원하는 서버가 있어 둘을 Webpack으로 통신을 통해 연결해 하나의 것처럼 처리하는 것이다. 주로 Front단은 JS처리를 위해 Vue,React같은 프레임워크로 Node위에서 동작하고 Backend는 Django,PHP등으로 작성되어 DB와 연결되어있다.

 

여기서는 React로 만든 App과 Django로 만든 웹서버API를 연결해보고자 한다. 

 

Backend 설정

#Django 기본설정
>(가상환경을 키고)conda activate venv
pip install django(옵셔널)
pip install djangorestframework
pip install django-cors-headers

이후 코드는 다음의 git레퍼지토리에서 clone해왔다.

https://github.com/csy1204/djangobackend

csy1204/djangobackend

#DB 마이그레이션을 한 후 서버를 킨다.
>(clone해온 djangobackend로 이동한다) cd djangobackend
python manage.py makemigrations
python manage.py migrate
python manage.py runserver

cors-header란

 

 

 

같은 레포지토리 위치에 django의 app과 react의 app을 만드는 것이다.

Frontend 설정

//djangobackend가 있는 위치에서(안x)
npx create-react-app (reactfrontend)
>(리액트앱 폴더로 이동한다)cd (reactfrontend)
npm install axios --save
npm start

*npm 문제가 있을 시 npm audit fix
npm문제 많아 yarn권장된다

 

axios란

axios란 브라우저와 node.js위한 Promise기반 HTTP 클라이언트 
:HTTP통신을 Promise기반-비동기로 처리할수있도록 하는

https://github.com/axios/axios
axios문서에는 node.js환경에서 axios를 쓸때의 예시가 있다.
우리는 react문법으로 작성하였다.
반환할 오브젝트들을 api 주소들 만든다-우린 함수로

 

API작성하기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

동작하기

실행되는것을 볼때는 (djangobackend)에서 python manage.py runserver와
(reactfrontend)에서 npm start로 동시에 켜줘야한다.