리액트 3

프론트와 연결하기 (3) - 이미지 로드 시 404 에러 해결

프론트엔드인 리액트와 백엔드인 장고를 연동할 때 리액트의 build 배포 파일들을 이용해보려고 프로젝트 초기부터 여러 문서들을 찾아보며 고군분투 했었다. 그랬다가 결국 그 방법을 사용하는 것은 멈춰두고 기능들을 먼저 구현하다가 얼마 전에 프로젝트를 모두 끝내고 서버에 등록하려고 다시 시도해보던 상황이었다. ( 자세한 과정은 이전 글 참고 > https://edorrr.tistory.com/18 ) 프로젝트 완성 당시에 배포 버전에서 발생하던 오류는 크게 두 가지였다. [1] 글쓰기를 마친 후 띄우는 서평 확인 페이지와 서평 목록을 볼 수 있는 서평 공간 페이지가 흰 창으로 뜨는 오류 [2] 웹페이지에서 사용하는 이미지 파일들의 404 not found 오류 먼저 첫 번째 오류는 프론트엔드 담당 팀원이 해..

[Django] DRF : REST API를 통해 장고와 리액트 연결하기

장고와 리액트를 연결하는 여러 방법 중 DRF(Django REST Framework)를 활용하는 방법이 있다. REST API 를 통하면 데이터의 CRUD(Create, Read, Update, Delete)를 쉽게 처리할 수 있는데, 이번 포스트에서는 특히 데이터의 Create, 리액트에서 작성한 글을 장고 모델에 등록하는 과정을 다뤄보려고 한다. (리액트와 장고의 설치는 생략하도록 하겠다.) 장고 REST API 를 구축하는 과정은 이전 포스트에서 다루었다. 장고 모델을 json 객체로 추출하기 (DRF) 장고로 프로젝트를 진행하다 보면 프론트와 연동하게 될 때가 있다. 이 방법들은 이전 포스트(link)에서 자세히 설명했고, 이 포스트에서는 그 중 장고에서 만든 모델을 json 객체로 추출해서 접..

스터디/Web 2022.01.29

프론트와 연결하기 (1) - 장고/리액트 연동

우리 프로젝트는 백엔드로 장고(Django)를 사용하고 프론트엔드로 리액트(React)를 사용한다. 때문에 둘을 연동하는 과정이 필요한데, 이번 주제에서는 이 과정을 다뤄보려고 한다. 먼저 우리 프로젝트의 상황을 설명해야 하겠다. 우리 프로젝트는 프론트엔드를 담당하는 팀원과 백엔드를 담당하는 팀원이 나눠져있다. 즉, 한 개발환경에서 리액트와 장고를 동시에 사용하지 않는다. 때문에 리액트와 장고를 연동할 수 있는 방법을 먼저 살펴보자. (1) 장고 -> 리액트 : json 객체로 데이터 보내기 이 방법은 장고와 리액트 연동을 알아볼 때 가장 많이 나왔던 내용이다. 장고의 Django REST Framework(DRF) 를 이용해 장고의 모델을 json 객체로 얻을 수 있다. 이 과정을 완료하면 웹페이지에서..