TIL. drf팀프로젝트(9) js fetch문

[오늘 한일]

• AI주차 시작
• 프로젝트 복습

 

[오늘 배운점]

 

오늘은 배포를 많이 복습했다.

 

배포는 어제 적었고 오늘은 js에 대해 적어보겠다.

 

 

<js fetch문>

async function 함수명() {
    const response = await fetch(`${backend_base_url}/user/token/`, {
        headers: {
            'content-type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({
            "username": username,
            "password": password
        })
    })

위는 fetch문의 코드다.

이번 프로젝트에서 모든 프론트 요청은 fetch로 작성했다.

 

fetch라는 함수가 핵심적이다.

앞의 인자로 요청하는 url을 적는다.

뒤의 인자를 json형태 데이터를 실어보내는데,

headers, method, body의 키들로 구성해서 데이터를 보낸다.

 

뒤의 인자가 없다면 get요청이다.

 

headers엔 헤더들을 작성한다. content-type: json과 authorization이 주요하다.

method에서 post, put등 메소드를 정의할수 있다.

(get요청도 토큰헤더 등이 필요하다면 아래를 작성해준다.)

body에는 리퀘스트 바디를 작성한다.

 

localStorage.setItem("refresh", response_json.access);

로컬스토리지를 호출하고 setItem, getItem, removeItem으로

로컬스토리지 정보를 가져오고 저장하고 지울수 있다.

페이로드를 통채로 저장하고, 액세스 토큰을 가져오거나 지울수 있다.

이렇게 토큰을 꺼내서 위 헤더에 실어준다.

 

    const response_json = await response.json();

응답온 데이터는 json()을 통해 읽을수 있는 json 데이터로 만든다.

리턴으로 response_json을 반환하게 된다.

 

※ 페이지네이션 json같은 경우 이중 구조 json데이터이다.

 

작성법은 이정도 기억하면 될것 같다.

그외로,

- 한 html 본문 내에 함께 임포트 된 js파일끼리는 서로 함수명 등을 공유한다.

- 다른 html파일이라면 태그 id는 겹쳐도 문제 없다.

- async await를 잘 활용해 실행이 누락되지 않도록 유의해야 겠다.