Vue with DRF (5) - Authentication & Authorization
2022. 11. 14. 21:38
Vue2
Authentication - 인증, 입증 자신이라고 주장하는 사용자가 누구인지 확인하는 행위 모든 보안 프로세스의 첫 번째 단계 (가장 기본 요소) 즉, 내가 누구인지를 확인하는 과정 401 Unauthorized 비록 HTTP 표준에서는 '미승인(unauthorized)'을 명확히 하고 있지만, 의미상 이 응답은 '비인증(unauthenticated)'를 의미 Authorization - 권한 부여, 허가 사용자에게 특정 리소스 또는 기능에 대한 액세스 권한을 부여하는 과정 (절차) 보안 환경에서 권한 부여는 항상 인증이 먼저 필요함 사용자는 조직에 대한 액세스 권한을 부여 받기 전에 먼저 자신의 ID가 진짜인지 확인하야함 서류의 등급, 웹 페이지에서 글을 조회, 삭제, 수정 할 수 있는 방법, 제한..
Vue with DRF (4) - DETAIL
2022. 11. 14. 21:15
Vue2
views/DetailView.vue 코드 확인 게시글 상세 정보를 표현할 컴포넌트 AJAX 요청으로 응답 받아올 article의 상세 정보들을 표현 router/index.js id를 동적 인자로 입력 받아 특정 게시글에 대한 요청 components/ArticleListItem.vue router-lick를 통해 특정 게시글의 id 값을 동적 인자로 전달 게시글 상세 정보를 Server에 요청 views/DetailView.vue 코드 확인 this.$route.params를 활용해 컴포넌트가 create될 때, 넘겨받은 id로 상세 정보 AJAX 요청 게시글 상세 정보 요청 결과 확인 넘겨 받은 데이터 구조 확인 후, 적절하게 화면 구성 응답 받은 정보를 data에 저장 data에 담기까지 시간이 ..
Vue with DRF (3) - CREATE
2022. 11. 14. 19:51
Vue2
views/CreateView.vue 코드 확인 게시글 생성을 위한 form을 제공 v-model.trim을 활용해 사용자 입력 데이터에서 공백 제거 .prevent를 활용해 form의 기본 이벤트 동작 막기 title, content가 비었다면 alert를 통해 경고창을 띄우고 AJAX요청을 보내지 않도록 return 시켜 함수 종료 axios를 사용해 server에 게시글 생성 요청 router/index.js views/ArticleView.vue 게시글 작성 요청 결과 확인 views/CreateView.vue 코드 수정 createArticle method 수정 게시글 생성 완료 후, ArticleView로 이동
Vue with DRF (2) - 장고 서버에서 데이터 받기
2022. 11. 14. 19:44
Vue2
Article Read 응답 받은 데이터 구조 확인 각 게시글 객체는 다음으로 구성 store/index.js 수정 결과 확인
Vue with DRF (1) - AJAX 요청 준비
2022. 11. 14. 19:41
Vue2
사용 기능 및 라이브러리 Vue 2 DRF vuex vue-router axios 설정 설치 npm install axios store/index.js 에서 불러오기 import axios from 'axios' // 장고 서버 const API_URL = 'http://127.0.0.1:8000' getArticles 메서드 정의 views/ArticleView.vue 요청 결과 확인 장고에서는 상태 코드 200으로 제대로 보내졌지만, 데이터를 받아오지 못했음 왜?? CORS policy에 의해 blocked되었기 때문 즉, 브라우저가 막은 거임 관련 문서 cors 막은거 뚫기 https://pypi.org/project/django-cors-headers/