Study Anything 🧐

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

오늘로서 '고양이와 책을' 프로젝트의 서평 작성 관련 기능을 모두 마쳤다! 로그인, 회원 정보, 검색, 서평 작성 의 기능들을 가진 프로젝트였는데 그 중 나는 서평 작성 기능을 맡았고 서평의 CRUD, 즉 작성하고(Create) 불러오고(Read) 수정하고(Update) 삭제하는(Delete) 기능을 모두 구현했다. 장고 프레임워크를 처음 사용해보는거라 잘 할 수 있을까 하는 마음도 들었지만 모르는만큼 열심히 공부하며 프로젝트를 진행하고 나니 끝내고 나서는 뿌듯한 마음이 남는다. 한 달 반의 길다면 길고, 짧다면 짧은 시간동안 프로젝트를 진행하면서 (글은 성공한 경우만 작성하다보니 내용이 많지는 않지만) 각종 시행착오와 오류들을 겪으면서 장고와 리액트에 관해 한 발짝 나아갈 수 있었다. 프론트엔드 툴인 ..

저번 포스트에서는 서평을 작성하고 불러오는(조회하는) 함수를 작성했다. 이번에는 CRUD 중 Update, Delete 기능을 구현하는 PUT, DELETE 함수를 작성해보려고 한다. 기본 구조는 이전에 작성한 포스트에서 확인할 수 있다. (1) app/urls.py 수정 post, get 과 마찬가지로 호출되는 url 을 함수와 연결한다. path('edit/', views.ReviewView.as_view()), path('delete/', views.ReviewView.as_view()) (2) app/views.py 파일에 함수 작성 APIView 클래스를 상속받아 작성한 클래스 안에 put, delete 함수를 작성한다. ... def put(self, request): data = reques..

지난 포스트까지 구현했던 서평 작성 기능들은 장고 기본 기능을 이용해서 구현했다. 그러나 우리 프로젝트가 프론트와 백엔드가 나눠져있기 때문에 프론트와 백엔드를 연결하는 방법을 여러 방면으로 모색했다. 그러면서 최종적으로 장고 레스트 프레임워크 (DRF: Django REST Framework) 라이브러리를 사용하여 프론트인 리액트와 백엔드인 장고를 연결하고자 하였다. 그러던 중 오늘 드디어!! 프론트인 리액트 페이지에서 작성한 서평의 내용을 백엔드인 장고 모델에 저장하고 불러오는 것을 완성해서 그 과정을 간단하게 포스팅해보려고 한다. (1) 장고 : review/urls.py urls.py 파일에서는 장고 서버의 url 들을 views.py 의 함수들과 연결하는 내용을 담고 있다. path('', vie..

이전 포스트에서 리액트와 장고를 연결하는 방법 중에 REST API를 이용해 json 객체를 얻고, 그것을 리액트에서 사용하도록 하는 방법이 있다고 언급했다. 하지만 이후에 계속 회의를 진행하면서 이 방법과 적용할 수 있는 방법을 찾아냈다. 바로 Axios를 활용한 방법인데 Axios란 브라우저, Node.js를 위한 HTTP 비동기 통신 라이브러리이다. Promise API를 사용하며 요청(Request)과 응답(Response)을 json 형태로 변경해준다. 이 때 비동기 방식이란 페이지에 요청(Request)을 보내고 응답(Response)을 받는 행위가 1:1 관계로 이뤄지는 것이 아닌, 페이지를 리로드(Reload)하지 않아도 서버에 계속해서 요청을 보내는 방식이다. Request를 보내기 때문..

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

지금까지 서평 목록들을 리스트로 전체 조회하는 페이지와 글쓰기 페이지를 구현했다. 이번에는 서평 목록에서 하나를 선택했을 때 해당하는 서평의 상세 페이지를 구현하려고 한다. (1) list 파일 보기 파일 > templates/review/list.html ... DB에서 서평 목록을 받아와서 페이지에 띄우는 list.html 코드 중 일부이다. 각각의 서평을 태그로 감싸 해당 내용을 선택하면 서평의 상세 페이지로 이동하도록 구현하려고 한다. 해당 상세페이지의 url 은 "http://기본주소/review/detail/서평Id" 로 설정했다. (2) urls.py 파일 수정 파일 > review/urls.py urlpatterns = [ ... path('detail//', views.detail, na..

서평 작성 파트의 첫번째 단계에서 장고 모델로 서평 DB를 만든 후 그 DB 안의 서평들을 웹페이지에서 조회하는 기능까지 구현했다. 이번엔 그 다음 단계로 작성한 서평을 DB에 등록하도록 하는 기능을 구현했다. 웹페이지에서 서평을 쓴 후 그 내용을 서평 DB에 넣고 전체 목록으로 조회하는 기능이다. (1) 서평 목록을 조회하는 페이지에 글쓰기 페이지로 이동할 수 있는 요소를 추가한다. 파일 > templates/review/list.html ... 글쓰기 ... (2) urls.py 파일에 write 페이지와 관련된 내용을 추가한다. 파일 > review/urls.py urlpatterns = [ ... path('write/', views.write, name='write'), ... ] urls.py..

프로젝트 내용들 중에 서평 작성 파트를 시작했다. 서평 작성 안에도 여러가지 기능들이 있는데, 이번에는 서평의 전체 목록을 조회하는 기능을 수행했다. 서평을 저장할 DB를 만들고 더미 데이터를 넣은 다음, 그 내용들을 새로운 페이지에서 조회하는 과정으로 진행했다. DB를 만들기 위해서 장고의 기본 기능인 모델을 이용했고 모델 조회 기능을 이용해 간단하게 서평 목록을 조회하도록 했다. 다만 아직 프론트와 연결하는 방법을 찾지는 못해서 ui 안에서 목록이 보이는 것이 아니라 UI를 적용하지 않은 HTML 기본 UI에 내용만 보이고, 해당 내용을 클릭하면 새로운 페이지(추후 서평 상세페이지)로 이동하는 것까지 완성했다. 아직 부족한 점이 있어서 코드를 프로젝트 작업단에 바로 올리지 않고 테스트 폴더와 git ..

지난 주에 처음 얘기가 나온 이후 오늘부터 '고양이와 책을' 프로젝트에 참여하게 되었다. 대략적인 프로젝트 개요는 책의 서평 작성을 제공하는 웹사이트 제작으로, 이 프로젝트에서 백엔드 개발자로 참여하게 되었다. 언어는 장고(Django)를 사용할 예정. 장고로는 처음 개발을 해보는 것이라 앞으로 많은 공부가 필요할 것 같다. 중간부터 참여하게 된 것이라 일단 며칠간은 공부와 프로젝트 파악에 힘쓰고 그 다음으로는 서평 작성 기능부터 개발을 시작할 예정이다. 오늘은 회의에 처음 참석하고 간단한 인사와 앞으로의 일정을 공유했다. 프로젝트 카테고리에는 프로젝트 일지처럼 남기고 리뷰할만 한 기능들은 따로 글을 작성한 후에 링크하는 식으로 이을 예정이다.