장고 10

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

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

서평 작성 (5) - 서평 수정하고 삭제하기 (PUT, 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..

[Django] 한 프로젝트 내에서 다른 앱의 모델 사용하기

프로젝트를 여러 명이 함께 진행하다보니 각 팀원이 서로 다른 앱을 구현하게 되는데, 이 때 다른 앱의 모델 필드를 외래키로 사용하거나 모델 자체를 내 앱에서 사용하는 경우 어떻게 사용하면 되는지에 대한 내용을 다뤄보려고 한다. 편의상 내 앱의 이름은 'myapp', 다른 팀원의 앱 이름은 'yourapp'으로 서술하도록 하겠다. 모델들의 내용은 다음과 같다. # myapp/models.py class Review(models.Model): ... userId = models.ForeignKey(User, on_delete=models.CASCADE) ... # yourapp/models.py class User(models.Model): ... Review 모델에서는 User 모델을 외래키로 사용하지만 ..

스터디/Web 2022.02.09

[Django] 모델 수정하고 삭제하기

프로젝트를 진행하다가 초기에 작성했던 모델 내용을 수정하고, 데이터를 모두 삭제해야 할 이슈가 발생해서 관련 내용을 수행하고 글로 정리해보려고 한다. (1) 모델 수정하기 기존에 작성했던 모델의 내용은 다음과 같다. # app/models.py class Review(models.Model): reviewId = models.IntegerField(primary_key=True)# 삭제할 내용 userId = models.ForeignKey(User, on_delete=models.CASCADE) bookId = models.CharField(max_length=30) reviewTxt = models.TextField() 이 내용에서 서평 제목, 서평 평점, 서평 작성날짜 필드를 추가하고 PK인 rev..

스터디/Web 2022.02.08

서평 작성 (4) - 서평을 DB에 저장하고 불러오기 (POST, GET)

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

[Django] DRF : Serializer 기본 사용법, 유효성 검증

참고 : https://www.django-rest-framework.org/api-guide/serializers/ 장고 레스트 프레임워크(Django REST Framework)를 이용해 REST API 환경을 구축하다보면 Serializer를 거의 필수적으로 사용하게 된다. 하지만 Serializer가 어떤 개념인지 잘 와닿지 않아서 Serializer에 대해 공부하고 알게 된 것들을 정리해보려고 한다. (1) Serializer란? 쿼리셋이나 모델 인스턴스 같은 복잡한 데이터들을 네이티브 파이썬 데이터 타입으로 변환하여 json, xml 등의 컨텐츠 타입으로 쉽게 렌더링할 수 있게 한다. 데이터를 직렬화하는 Serializer는 역직렬화 기능 또한 제공하기 때문에 들어오는 데이터를 검증한 후에 분..

스터디/Web 2022.01.30

[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 객체로 얻을 수 있다. 이 과정을 완료하면 웹페이지에서..

[Django] 모델 만들고 페이지에서 조회하기

참고: https://wikidocs.net/70650 이전 글에서 모델을 만들고 migrate 해서 앱에 적용하는 방법까지 배웠다. 이것을 내 프로젝트에 적용해서 모델을 만들고 데이터를 조회하는 페이지를 만들어보도록 하겠다. (1) 모델 만들기 (models.py 파일 작성) 모델 > User 테이블 속성명 데이터타입 userId (PK) int userEmail varchar(30) userPw varchar(20) userName varchar(20) 모델 > Review 테이블 속성명 데이터타입 reviewId (PK) int userId (FK) int bookId varchar(30) reviewTxt text 다음의 속성을 가진 유저 테이블과 서평 테이블을 생성한다. class User(mo..

스터디/Web 2022.01.13

[Django] 개발환경 구축하기

참고: https://wikidocs.net/72280 장고를 처음 접하다보니 개발 환경이 마련되어있지 않아서 자료를 참고하며 개발 환경을 구축했다. (1) 가상 환경 구축 가상 환경을 만드는 이유는 위 자료에 자세히 설명되어 있다. 간단하게 얘기하자면 여러 프로젝트를 수행하다가 파이썬 버전을 다르게 사용하는 등 차이를 둬야할 때가 있는데 가상 환경에서 프로젝트를 진행하면 이런 경우에 각 환경 별로 대처하기가 쉽다. 본인은 mysite 라는 이름으로 가상 환경을 만들어보았다. C:\venvs\mysite\Scripts> activate cmd 상에서 원하는 폴더로 이동한 후, activate 명령어를 입력하면 가상 환경으로 이동한다. (mysite) C:\venvs\mysite\Scripts> deact..

스터디/Web 2022.01.05