1. Article Read 응답 받은 데이터 구조 확인 'data Array'에 각 게시글 객체 각 게시글 객체는 다음으로 구성 id title content store/index.js 수정 기존 articles 데이터 삭제 Mutations 정의 응답 받아온 데이터를 state에 저장 2. Article Create views/CreateView.vue 코드 확인 게시글 생성을 위한 form을 제공 v-model.trim을 활용해 사용자 입력 데이터에서 공백 제거 .prevent를 활용해 form의 기본 이벤트 동작 막기 views/CreateView.vue 코드 확인 title, content가 비었다면 alert를 통해 경고창을 띄우고 AJAX 요청을 보내지 않도록 return 시켜 함수를 종료 ..

목차 Cross-Origin Resource Sharing How to set CORS 1. Cross-Origin Resource Sharing What Happened? 브라우저가 요청을 보내고 서버의 응답이 브라우저에 도착 Server의 log는 200(정상) 반환 즉 Server는 정상적으로 응답했지만 브라우저가 막은 것 보안상의 이유로 브라우저는 동일 출처 정책(SOP)에 의해 다른 출처의 리소스와 상호작용 하는 것을 제한 함 SOP(Same - Origin Policy) "동일 출처 정책" 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는 것을 제한하는 보안 방식 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄임 https://developer.m..

목차 Server & Client 1. Server & Client 서버(server)란 ? 클라이언트에게 정보와 서비스를 제공하는 컴퓨터 시스템 서비스 전체를 제공 == Django Web Service 정보를 제공 == DRF API Service 서비스 전체를 제공 == Django Web Service Django를 통해 전달받은 HTML에는 하나의 웹 페이지를 구성할 수 있는 모든 데이터가 포함 즉, 서버에서 모든 내용을 렌더링 하나의 HTML 파일로 제공 정보를 포함한 web 서비스를 구성하는 모든 내용을 서버 측에서 제공 정보를 제공 == DRF API Service Django를 통해 관리하는 정보만을 클라이언트에게 제공 DRF를 사용하여 JSON으로 변환 Client Server가 제공하..

지금까지 배운 내용들을 종합하여 Django에서 만들었던 게시판 만들어보자 구현기능 Index Create Detail Delete 404 컴포넌트 구성 목차 Index Create Detail Delete 404 Not Found 사전 준비 프로젝트 시작 vue create articles cd articles vue add vuex vue add router App.vue는 아래 코드만 남김 (CSS 코드 유지) 1. Index 구현 state 게시글의 필드는 id, 제목, 내용, 생성일자 DB의 AUTO INCREMENT를 표현하기 위해 article_id를 추가로 정의해줌 (다음 article의 id로 사용 예정) IndexView 컴포넌트 및 라우터 작성 state에서 불러온 articles 출..

목차 사전 준비 ModelSerializer Build RESTful API - Article 1. 사전 준비 Postman 설치 https://www.postman.com/downloads/ Postman API를 구축하고 사용하기 위한 플랫폼 API를 빠르게 만들 수 있는 여러 도구 및 기능을 제공 DRF 설치, 등록 및 패키지 목록 업데이트 pip install djangorestframework pip freeze > requirements.txt 2. ModelSerializer ModelSerializer 작성 articles/serializers.py 생성 serializers.py의 위치나 파일명은 자유롭게 작성 가능 ModelSeiralizer 작성 ModelSerializer 클래스는 ..

이전 글에서 알아보았던 JSON 형태로의 서버의 응답 변화와 다양한 방법의 JSON 응답에 대해 알아보자. 목차 Intro Response 1. Intro 서버가 응답하는 것 현재까지의 Django로 작성한 서버는 사용자에게 페이지(html)만 응답하고 있었음 하지만 사실 서버가 응답할 수 있는 것은 페이지뿐만 아니라 다양한 데이터 타입을 응답할 수 있음 이런 과정을 거치게 된다면 사용자에게 보여질 화면은 누가 구성하게 되는 걸까? JSON 데이터를 받아 화면을 구성하여 사용자에게 보여주는 것은 Front-end Framework가 담당할 예정 Front-end Framework는 Vue.js를 사용 Django는 더 이상 Template 부분에 대한 역할 담당 x 2. Response JSON 데이터를..

목차 HTTP 복습 URI REST API 1. HTTP 복습 개념 HyperText Transfer Protocol HTML 문서와 같은 리소스(resource, 자원)들을 가져올 수 있도록 하는 프로토콜(규칙, 약속) 웹에서 이루어지는 모든 데이터 교환의 기초가 된다. 클라이언트와 서버는 아래와 같은 개별적인 메시지 교환에 의해 통신 요청(request) 클라이언트에 의해 전송되는 메시지 응답(response) 서버에서 응답으로 전송되는 메시지 특징 Stateless(무상태) 동일한 연결(connection)에서 연속적으로 수행되는 두 요청 사이에 링크가 없음 즉, 응답을 마치고 연결을 끊는 순간 클라이언트와 서버 간의 통신이 끝나며 상태 정보가 유지되지 않음 이를 해결하기 위해 쿠키와 세션을 사용해..

User 자기 자신과의 M:N 관계 설정을 통하여 팔로우 기능을 구현해보자. 목차 Profile Follow 1. Profile url 및 view 함수 작성 profile 템플릿 작성 Profile 템플릿으로 이동할 수 있는 하이퍼 링크 작성 2. Follow 모델 관계 설정 ManyToManyField 작성 및 Migration 진행 url 및 view 함수 작성 프로필 유저의 팔로잉, 팔로워 수 & 팔로우, 언팔로우 버튼 작성 데코레이터 및 is_authenticated 추가

Article과 User의 M:N 관계 설정을 통한 좋아요 기능을 구현해보자 목차 LIKE - 모델 관계 설정 LIKE 구현 1. LIKE 모델 관계 설정 ManyToManyField 작성 migration 진행 후 에러 확인 like_users 필드 생성 시 자동으로 역참조에는 .article_set 매니저가 생성됨 그러나 이전 N:1(Article-User) 관계에서 이미 해당 매니저를 사용중 user.article_set.all() -> 해당 유저가 작성한 모든 게시글 조회 user가 작성한 글들(user.article_set)과 user가 좋아요를 누른 글(user.article_set)을 구분할 수 없게 됨 user와 관계된 ForeignKey 혹은 ManyToManyField 중 하나에 rel..