장고 심화: 2주차 6강~ 끝까지.

포스트맨 사용해서 API이용.

drf 2nd week 콜렉션 만들기 : create new collections

article list이름으로 데이터 전부 가져오기 :  get,  http://127.0.0.1:8000/articles/

n번 게시글 가져오기: get, http://127.0.0.1:8000/articles/n/

게시글 만들기 :  post, http://127.0.0.1:8000/articles/ raw json

환경 만들기 deploy, local : create new invirnoment

만든 환경 request에 적용하기 : {{variable}} 환경 로컬로 변경.

삭제 리퀘스트 만들기 n번 게시글 삭제하기: delete, http://127.0.0.1:8000/articles/n/

n번 게시글 업데이트 :  put, http://127.0.0.1:8000/articles/n/

API 문서화 하기

drf-yasg 설치 : pip install drf-yasg

freeze : pip freeze > requirements.txt

인스톨 앱에 추가 : 인스톨 앱에 복붙

urls 에 끼워 넣기 : urls에 복붙

swagger 접속하기 : http://127.0.0.1:8000/swagger/

swagger로 포스트 리퀘스트 가능하도록 클래스형 view 배우기.

apiview 임포트 : from rest_framework.views import APIview

ArticleList 클래스로 변경 : 복붙

urls에서 수정:  path('', views.ArticleList.as_view(), name  = 'ArticleList')

상세보기 수정 삭제

ArticleDetail 클래스 만들기 : class ArticleDetail(APIView)

구조에 맞게 변경 : 복붙

!urls 수정 : path('article/', views.ArticleDetail.as_view(), name = "ArticleDetial"

as_view에 꼭 () 를 붙이자. 이걸로 시간 30분 잡아먹었다.

!스웨거 오토 스키마 임포트 : from drf_yasg.utils import swagger_auto_schema

함수 수정 : @swagger_auto_schema(request_body=ArticleSerializer)

 

**스키마는 데이터베이스를 구성하는 데이터 개체(Entity), 속성(Attribute), 관계(Relationship) 및 데이터 조작 시 데이터 값들이 갖는 제약 조건 등에 관해 전반적으로 정의** 스웨거 오토 스키마는 데이터에 필요한 조건을 주는 역할.**

프론트엔드에 데이터 띄우기

프론트엔드 폴더 만들기 drf_week2_front: good

index. html 만들기 : good

index.js 만들기: good

js에 콘솔로그 만들고, index에 임포트 해주기: console.log('gogogo')

<script src="index.js"></script>

데이터 불러오기

로딩하면 불러오기 : window.onload =

데이터가 오기전까지 다른거 먼저 해라 : async function

아티클 불러오기 :  loadArticle()

데이터 보내고 받아온 데이터 변수에 저장하기 : const response = await fetch('http://127.0.0.1:8000/articles/', {method: 'GET'})

데이터가 제이슨이니까 제이슨으로 받아온거 변수에 저장:  response_json = await response.json()

콘솔에 찍어보기 : console.log(response_json)

**CORS 에러: 백엔드 서버와 프론트엔드 서버가 달라서 생기는 에러.

다른 서버에서 요청이나 응답이 가능하도록 변경!**

pip 인스톨: pip install django-cors-headers

freeze: pip freeze > requirements.txt

인스톨 앱에 추가 : "corsheaders",

미들웨어에 추가  순서중요!: "corsheaders.middleware.CorsMiddleware",

configuration(다른 컴퓨터에서 실행 되도록 도와주는 스크립트) :  CORS_ALLOW_ALL_ORIGINS =  True

데이터 띄워주기

id가 articles인 div만들기 : good

div를 변수에 저장하고:  const articles = document.getElementById("articles")

데이터를 하나씩 forEach로 돌린다.:

response_json.forEach(element => {

 

});

element에서 title을 꺼내  콘솔에서 본다. : console.log(element.title)

newArticle 변수에 새로운div 만들기 : const newArticle = document.createElement("div")

뉴아티클에 데이터 넣어주기:newArticle.innerText = element.title

articles에 뉴아티클 넣어주기: articles.appendChild(newArticle)

콘솔로그는 지우기 :  good