백엔드(Django) + 프론트엔드(js, html) user기능 연결

이제 백엔드와 프론트엔드 파일을 따로 관리한다.

vscode 두개 켜놓고 작업 고고!!!!!!

 

백엔드 파일에서는 앞서 배운대로 만들어준다.

프론트엔드 파일에서는

이렇게 만들어주고, api.js에서는 로그인, 로그아웃, 모크api, 회원가입 기능을 백엔드와 html과 연결시킨다.

---

자바스크립트의 코드가 익숙치 않고, 처음보는것 투성이다ㅠㅠ 따로 공부하라고 한다...

var / let / const

var : 변수 정의 ( 같은 변수로 선언한게 있으면, 헷갈린다. 다른 결과가 출력)

이걸 보완한게 let과 const

let : 변수를 재할당 가능

const : 변하지 않도록 변수 정의 (상수)

async / await / Promise / 비동기 처리

async 키워드는 어렵게 생각할 필요없이 await를 사용하기 위한 선언문 정도로 이해하면 된다.

즉, function 앞에 async을 붙여줌으로써, 함수내에서 await 키워드를 사용할 수 있게 된다.

이는 반대로 말하면 await 키워드를 사용하기 위해선 반드시 async function 정의가 되어 있어야 한다 !!!

 

await는 키워드 이름에서 보듯이 Promise 비동기 처리가 완료될때 까지 코드 실행을 일시 중지하고 wait !!!

한다라는 뜻으로 보면 된다.

 

그럼, Promise 는 뭐고, 비동기 처리는 또 뭔데???ㅋㅋㅋ

비동기 처리는 백그라운드로 동작되기 때문에 그 결과가 언제 반환될지 알수 없다.

결과를 받아 처리하기 위해 사용되는 대표적인 방법으로 프로미스 객체(Promise)가 있다.

 

다시 await를 보면, 그냥 결과 처리 전에 wait 하는 거네.

// 회원가입

async function handleSignin(){

    const email = document.getElementById("email").value

    const password = document.getElementById("password").value

    const response = await fetch('http://127.0.0.1:8000/users/signup/', {

        headers:{

            'content-type':'application/json'

        },

        method:'POST',

        body: JSON.stringify({

            "email":email,

            "password":password

        })

    })

}

배운걸 써서 회원가입 기능 만들 수 있다.

fetch를 통해 백엔드 local 주소 붙여주고, 

html에서 회원가입 button 만들어서 onclick으로 function 작동하게 해주면 끝!!

<button type="button" onclick="handleSignin()">제출</button>

---

로그인 기능은 회원가입과 거의 유사하지만, 내용을 추가해줘야한다.

application의 local storage에 key값과 value값을 저장해줘야한다.

[ access, refresh, payload ] 요거 세가지를 저장해주면 된다.

    const response_json = await response.json()

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

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

    console.log(response_json)

    const base64Url = response_json.access.split('.')[1];

    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');

    const jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {

        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);

    }).join(''));

    localStorage.setItem("payload", jsonPayload);

payload는 그냥 복붙해서 써야함.

 

mock api는 도 동일하고, POST 대신 GET방식으로 바꿔주면 끝!

 

로그아웃 기능은 그냥 local storage의 [ access, refresh, payload ] 요거 세가지 없애주면 끝!

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

localStorage.removeItem("access")

setItem 으로 저장 /  removeItem 으로 삭제

참쉽죠?

쉽겠냐고...