[장고/리액트] 리액트와 장고(DRF) 연동하기- (1) 장고 세팅

<알아두면 좋을 배경지식>

• REST API
• Django REST Framework

 

DRF와 리액트 연동 방법을 바로 알고싶다면 이 글을 참고해주세요!!!

[장고/리액트] 리액트와 장고(DRF) 연동하기- (3) CORS 해결, 리액트, 장고 연동

 

---

 

보통 프로젝트는 프론트엔드와 백엔드가 협업하여 진행하는데,

작업이 분리가 되지 않는다면 동시에 작업해야 해서 번거로워질 수 있다.

 

해결책은

백엔드는 API로 프론트엔드에게 데이터를 전달해주고,

프론트엔드는 데이터를 받아서 화면에 뿌려주면 된다!

 

 

리액트와 장고를 이용해서 데이터를 보내고, 화면에 보여준 뒤 삭제까지 가능하게 만들어보자!!🤸‍♀️🤸‍♀️ 얏호!

결과물!

(결과물에 적힌 번호는 신경 안 쓰셔도 됩니다... 신기해서 너무 많은 데이터를 등록하다 보니 100번이 넘어갔네요..)

 

REST API는 HTTP 메소드로 CRUD를 표현하는데, 여기서는 POST, GET, DELETE를 사용해보겠다.

POST로 데이터를 등록 및 전송하고, GET으로 데이터를 조회한다. 그리고 DELETE로 데이터를 삭제한다!

 

---

 

 

장고 개발 환경을 세팅합시다!!

 

- 가상환경 생성

가상 환경의 이름은 myvenv로 했다.

 

가상환경 생성 완료!

 

- 가상환경 실행

. 을 찍고 한 칸 띄우고(중요!) 가상 환경 실행 명령어를 입력해준다.

 

 

- 장고 설치

 

 

- 장고 프로젝트 생성

프로젝트 이름은 drfProject로 해주었다

 

 

 

+ 명령어 ls를 입력하면 현재 경로에 있는 파일들을 확인할 수 있다.

프로젝트가 잘 설치되었다.

 

 

- 앱 생성

앱 생성은 프로젝트 폴더 안에서 진행해주어야 한다.

cd로 경로를 drfProject로 바꿔주자

경로를 바꿨다면, ls로 파일 체크

manage.py가 있는걸 확인했으면 앱 생성을 진행하자

 

이름은 mainApp으로 해주었다.

 

 

 

vscode에서 확인해보면,

프로젝트

ㄴ앱

ㄴ manage.py

가상환경

이런 형태로 생성된 걸 확인할 수 있다!!

 

 

- djangorestframework 설치

장고에서 REST Framework를 사용하기 위해 djangorestframework를 설치해준다.

 

 

- settings.py 설정

장고에게 우리가 mainApp과 framework를 설치했다고 알려주자.

drfProject 안에 settings.py 파일로 들어가서 빨간색 블록 부분을 INSTALLED_APPS에 추가한다.

 

 

 

 

이렇게 기본 설정은 끝났다.

모델 생성과 serializer는 다음 포스팅에.. 계속.... 😉