프로젝트(1)프론트, 백엔드 통신 방법(feat.django, react)

새롭게 프로젝트를 시작하며 개발전 1주일간 3파트로 프로젝트 사전 준비를 하였다.

(1) 프론트, 백엔드 통신방법

(2) 기술스택 선정, 협업 노하우

(3) token, django user, 소셜로그인

위의 3가지를 사전지식으로 먼저 조사하고 시작하기로 하였다.

RESTAPI

---

API는 데이터베이스와 사용자 인터페이스 즉, 프론트엔드 영역 사이에서 중간다리 역할을 해준다고 생각하면 된다. 백엔드단에서 만든 JSON,XML과 같은 형식의 데이터를 URI에 나타내어 프론트엔드는 URI에 있는 데이터를 가져다 쓰는 역할을 하는것이다. RESTAPI는 HTTP Method(GET, POST, PUT, DELETE)로 표현된 행위와 /accounts/2와 같은 주소를 합쳐 GET accounts/2와 같이 나타내어 프론트엔드가 데이터를 쓰도록 도와준다. 그리고 HTTP응답을 상태코드로 나타내는데

상태 코드	의미
200	클라이언트의 요청을 정상적으로 수행함
201	클라이언트가 어떠한 리소스 생성을 요청, 해당 리소스가 성공적으로 생성됨을 의미
400	클라이언트의 요청이 부적절할때
401	클라이언트가 인증되지 않은 상태에서 리소스를 요청할때
403	유저인증상태와 관계없이 응답하고 싶지 않은 리소스를 요청할때
405	클라이언트가 사용불가능한 리소스를 요청할때(ex.계정, 인증관련)
301	클라이언트가 요청한 리소스에 대한 URI가 변경되었을때
500	서버에 문제가 있을경우

위와 같은 상태코드로 나타낸다.

즉, RESTAPI는 

1.HTTP METHOD

2.데이터 주소

3.상태코드

크게 3가지를 통해 데이터를 표시하고 프론트가 적절하게 사용하게끔 도와주는 역할을 한다.

DjangoRESTFramework가 바로 RESTAPI인것이다.

 

 

프론트와 백엔드 연동방식(REACT-DRF)

---

-연동원리

1. 장고와 데이터베이스를 연결합니다.

2. 장고 ORM을 통해 데이터를 받습니다.

3. 받아온 데이터를 DjangoRESTFramework를 활용해 json객체로 만들어줍니다.

4. json객체를 특정 url에 뿌려줍니다.

5. React에서 fetch를 통해 특정 url로부터 json객체를 받아옵니다.

6. 받아온 데이터를 리액트식 문법으로 가공/사용하여 프론트엔드단을 꾸밉니다.

 

-연동방법

이를 실습으로 연결하는것은 실제 프로젝트를 진행하며 포스팅하기로 하고 8000포트의 django서버, 3000포트의 react서버를 사용하는 두프레임워크를 연결하기위한 사전준비에 대해 다뤄보려한다. 크게 2가지인것 같다.

1. django

- cors 문제를 해결하기 위해 django-cors-header 설치

-setting.py

• INSTALLED_APPS에 ‘corsheaders’ 추가
• MIDDLEWARE에 ‘corsheaders.middleware.CorsMiddleware’ 추가(가장 위에 놓으라는 말도 있고 CommonMiddleware 위나 밑에 놓으라는 말도 있다.)
• CORS_ORIGIN_WHITELIST = [‘http://127.0.0.1:3000’ ,’http://localhost:8000’] 추가

2. react

app/package.json 하단에 proxy를 사용해 localhost:8000의 /api에 접속할수 있도록 해준다.

"proxy": {
	"/api": {
		"target": "http://localhost:8000"
}

위의 2가지 방식중 한가지로 설정을 하면 3000포트에서 8000포트에 있는 데이터를 자유자재로 가져올수 있다.

 

이후부터는 프론트단에서 axios통신을 사용해 fetch로 데이터를 가져와 행위에 맞게 데이터를 사용하면된다.

(프로젝트를 진행하며 계속 추가하도록 할 예정입니다.)

 

 

 

참고

REST API 제대로 알고 사용하기 : NHN Cloud Meetup

 

프로젝트 지식(1) - Django React 연동