이번 포스팅에서는 DRF의 Authentication & Permissions 공식 문서를 공부하면서 번역해보려고 한다. 해석에 틀린 내용이 있을 수 있으니 이해가 안가는 부분은 아래의 공식문서를 참조하기 바란다. DRF Authentication & Permissions tutorial 공식 Documentation 현재 API는 제약 없이 누구나 code snippet을 수정하고 삭제할 수 있다. 아래와 같은 고급 기능을 추가하려고 한다. Code snippet은 항상 만든 사람과 연관이 있어야 한다 인증된 유저만 snippet을 만들 수 있다 만든 사람만 update와 delete가 가능하다 미인증 유저는 읽기 권한만 가지게 한다 Adding information to our model 먼저 Sni..

이번 포스팅에서는 DRF의 Class-based Views 공식 문서를 공부하면서 번역해보려고 한다. 해석에 틀린 내용이 있을 수 있으니 이해가 안가는 부분은 아래의 공식문서를 참조하기 바란다. DRF Class-based Views tutorial 공식 Documentation 함수 기반 뷰가 아닌 클래스 기반 뷰를 이용하여 API View를 작성할 수도 있다. 보시다시피 이것은 일반적인 기능을 재사용하고 코드를 DRY 하게 유지하는데 도움이 되는 강력한 패턴이다. Rewriting our API using class-based views 루트 view를 클래스 기반 뷰로 재 작성할 것이다. 아래는 views.py 를 약간 리팩토링 한 것이다. from snippets.models import Snip..

이번 포스팅에서는 DRF의 Requests and Responses 공식 문서를 공부하면서 번역해보려고 한다. 해석에 틀린 내용이 있을 수 있으니 이해가 안가는 부분은 아래의 공식문서를 참조하기 바란다. DRF Requests and Responses tutorial 공식 Documentation 이번 파트에서는 REST Framwork의 핵심을 다룰 것이다. 몇가지 필수적인 구성요소를 소개할 것이다. Request objects REST framework의 Request 객체는 HttpRequest 객체를 상속 받아 만들어 졌으며 보다 유용한 request parsing 기능을 제공한다. Request 객체의 핵심 기능은 request.data 속성으로 request.POST와 비슷하지만 Web API..

이번 포스팅에서는 DRF의 Serialization 공식 문서를 공부하면서 번역해보려고 한다. 해석에 틀린 내용이 있을 수 있으니 이해가 안가는 부분은 아래의 공식문서를 참조하기 바란다. DRF Serialization tutorial 공식 Documentation Introduction 이 튜토리얼에서는 pastebin 같이 code를 highlighting 할 수 있는 간단한 Web API를 만드는 방법을 다룬다. 그 과정에서 REST framework를 구성하는 다양한 컴포넌트들을 소개하고, 모든 것들이 어떻게 결합되는지에 대한 포괄적인 이해를 도울 것 이다. 이 튜토리얼은 상당히 심층적이므로 시작하기 전에 간단한 맥주와 쿠키를 가져와야 한다! 만약 quick overview를 원한다면 [Djang..

DRF를 사용해보기에 앞서 간단하게 API를 만들어볼 수 있는 DRF 공식 튜토리얼을 번역하면서 따라해볼 것이다. 학습하면서 진행하는 것이기에 해석에 오류가 있을 수 있다. 헷갈리는 부분은 아래의 공식 Documentation을 참고하자. DRF Tutorial 공식 Documentation Quickstart 우리는 관리자가 시스템에서 사용자와 그룹을 보고 편집할 수 있는 기능을하는 간단한 API를 만들 것이다. Project setup 장고 프로젝트의 이름을 tutorial, app의 이름을 quick start로 생성하자. # 프로젝트 디렉토리 생성 mkdir tutorial cd tutorial # 패키지 의존성을 독립적으로 사용하기 위한 파이썬 가상환경 생성 python3 -m venv env ..

드디어 CRUD중 마지막 기능인 Update를 구현해 볼 것이다. update 버튼을 누를 시 수정할 수 있는 폼이 등장하고, 데이터를 수정하고 Save 버튼을 누르면 장고 백엔드 서버로 PATCH method를 보내는 것을 구현하려고 한다. 먼저 수정하는 폼은 update 버튼을 누를 시에만 구현되도록 할 것이기 때문에 이를 체크하는 is_hidden 이라는 플래그 변수를 활용하려고 한다. 장고의 model 에 is_hidden 필드는 존재하지 않기에 vue 에서 플래그 데이터(is_hidden)를 추가해주는 작업을 할 것이다. App.vue // App.vue 수정 // template 수정

이전 포스팅에서 Create 기능에 대한 부분을 완벽하게 구현해 두었다. 지금부터는 Delete 기능을 구현해볼 것이다. Content.vue // Content.vue 수정 user CRUD create clear 이름 : {{ data.username }} 나이 : {{ data.age }}세, 거주지: {{ data.city }} Delete methods: { sendForm: function() { axios({ method: "POST", url: url, data: this.data, }) .then((response) => { this.userList = response.data; }) .catch((error) => { console.log("Failed to get userList", ..

이전 포스팅에서 Create 기능을 구현하였지만 새로고침을 하지 않을 경우 추가된 데이터를 조회할 수 없는 상태이다. 실제로 서비스하는 환경이라면 무조건 고쳐야할 사항이므로 수정해보겠다. App.vue // App.vue의 mounted 부분 mounted() { // DOM 객체 생성 후 DRF 서버에서 데이터를 가져와 userList에 저장 axios({ method: "GET", url: url }) .then(response => { this.userList = response.data; console.log("Success", response); }) .catch(error => { console.log("Failed to get userList", error.response); }); }, A..

지금까지 Vue 에서 등록된 유저의 목록을 보여주는 Read 기능을 구현하였다. 조금씩 부분을 나눠 수정했던 일이 많았기에 Create 기능을 만들기 전에 통합된 코드를 한번 보여주고 갈 것이다. App.vue // App.vue Vuetify 레이아웃 변경 Vuetify 는 12구획으로 나누어진 Grid system을 지원한다. 즉, 하나의 열(row)는 12개의 컬럼(column) 으로 구성된다는 뜻이다. 따라서 우리는 이것을 사용하여 layout을 변경해볼 것이다. Grid system에서는 다음과 같은 세가지 컴포넌트가 존재한다. v-flex가 가장 하위 컴포넌트이다. v-container : 중앙 중심의 페이지에 적용됨, 컨텐츠를 담을 컨테이너를 의미함 v-layout : 각 섹션을 분리하는데 ..

이전 까지의 작업을 통해 이제 우리는 DRF Server 에서 데이터를 GET 할 수 있게 되었다. 이번 포스팅에서는 GET을 포함한 CRUD 기능을 구현해볼 것이다. 데이터를 가져왔으니 화면에 가져온 데이터를 출력해야 할 것이다. 데이터를 가져오는 방법에는 다양한 방법들이 존재하는데 여기서는 mounted를 사용하여 페이지 로드 시 데이터를 가져오는 방법을 택할 것이다. App.vue // App.vue mounted 를 활용하여 DOM 객체가 생성된 후에 DRF server로부터 userList를 가져와서 저장해주는 코드를 App.vue 에 작성하였다. methods 부분에서는 아직 구현하지는 않았지만 추후에 CRUD 로직을 구현하기 위한 메소드들을 미리 선언해 두었다. userList : [] 부분..