내일배움캠프 AI - 46일차 TIL, 2022.11.04

스파르타 코딩클럽 내일배움캠프 AI 웹개발자양성과정 3회차

2022.11.04. 46일차 - TIL

 

 

1. Django DRF + Vanilla JS 강의

simpleJWT 설치

$ pip install djangorestframework-simplejwt

 

settings.py에 코드 추가

...
INSTALLED_APPS = [
	...
    'rest_framework_simplejwt',
    ...
]
...
REST_FRAMEWORK = {
	...
    'DEFAULT_AUTHENTICATION_CLASSES': [
    	...
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ]
}

 

user앱의 urls.py 코드 변경

...
from rest_framework_simplejwt.views import (
	TokenObtainPairView,
    TokenRefreshView,
)

urlpatterns = [
	...
    path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]

 

서버 실행 시 로그인을 위한 token이 부여될 뿐 이전에 db에 django_session  테이블이 생성되지 않는다. 발급받은 access token을 분석해보면 그 안에 다양한 정보가 담겨있는 것을 확인할 수 있는데 거기에 내가 원하는 정보가 나오기를 바란다면 원격 강의에서 배웠던 커스터마이징을 적용하면 된다.(JWT 페이로드 커스터마이징 해보기에서 확인할 수 있다...)

우리는 앞으로 FE와 BE를 구분해서 개발할 것이기 때문에 별도의 폴더, 깃이 존재해야 한다. 또한 배포도 별도로 된다.

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스로 이전에는 이런 기능을 XMLHttpRequest를 사용해 만들었고, 그 후 jQuery.ajax가 이 역할을 대신했으나 이제 JavaScript에서 접근하고 조작할 수 있는 방법으로 등장한 것이 바로 Fetch API이다.

 

index.js 파일 만들기

index.html을 django 서버랑 연결하기 위한 JS를 작성해보자. 

window.onload = async function loadArticle() {
	const response = await fetch('http://127.0.0.1:8000/articles', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    })
    
    response_json = await response.json
    return response_json
}

그러면 index.js를 통해 창이 실행되자마자 loadArticle 함수가 실행되고 해당 url에(지금은 백엔드 장고 서버) GET 방식을 요청할 것이다.  그리고 앞으로 우리는 json 형식을 이용할 것이기에 응답 받은 결과를 json 형태로 변환했다.

 

 

 

 

 

 

 

 

 

 

 

참고자료

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN