5/12

fetch()로 리소스 가져오는 연습
api console.log로 테스트
response = await fetch('경로', {메서드:'종류'})

//index.js
window.onload = async function loadArticles(){
  
    const response = await fetch('http://127.0.0.1:8000/articles/', {method:'GET'}) 
    
    response_json = await response.json()
  
    const articles = document.getElementById("articles")
    
    response_json.forEach(element => {
        const newArticle = document.createElement("div")
        newArticle.innerText = element.title
        articles.appendChild(newArticle)

    });

}

//index.js
console.log('로딩되었습니다')

window.onload = ()=>{
    const payload = localStorage.getItem("payload");
    const payload_parse = JSON.parse(payload)
    console.log(payload_parse.email)
    
    
    const intro = document.getElementById("intro")
    intro.innerText = payload_parse.email
  
}

onload가 실행되는 시점(event라 부르는듯)에 데이터가 로드된다.
onload Event

// api.js
window.onload = ()=>{
    console.log("데이터는 여기서 불러와집니다")
}

async function handleLogin() {
  // `value`를 사용하여 email 속성을 지정된 id로 가져온다
    const email = document.getElementById("email").value
    const password = document.getElementById("password").value
    console.log(email, password) // 버튼이 잘 눌러지고 있는지 체크하고 API를 연결 

    const response = await fetch('http://127.0.0.1:8000/users/api/token/',{
        headers:{
            'content-type':'application/json',
        },
        method:'POST',
        body: JSON.stringify({
            "email":email,
            "password":password
        })
    })
    const response_json = await response.json()

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

    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);

}

mock mock mock mock mock gubookmock
검색하면 jest밖에 안나오는데 mock이 뭐지
What is a mock API server?
모의 api 서버로 개발중인 백엔드 서버를 대신해서 테스트 할 수 있다고 한다.

async function handleMock(){ //모의api서버 다루기
    const response = await fetch('http://127.0.0.1:8000/users/mock/',{
        headers:{
            "Authorization":"Bearer " + localStorage.getItem("access")
        },
        method:"GET",
    })
    console.log(response)
}

function handleLogout(){
    localStorage.removeItem("access");
    localStorage.removeItem("refresh");
    localStorage.removeItem("payload");
}

참고자료

• 프론트 작업 참고자료
  browser DevTools(chromium)

  • HTML : Elements
  • CSS : Styles
  • Javascript : Console

• adamchainz github opensource - django-cors-headers

• mozilla - Fetch API

• w3schools - onload Event

• joshua1988.github.io - 자바스크립트 async와 await

• snyk.io/blog - How to make a mock API server in JavaScript

• how to save local storage

  • blog.logrocket - localStorage in JavaScript: A completeguide
  • w3schools - Window localStorage

• 백 작업 참고자료
  • simplejwt - Customizing token claims
  • stackoverflow - How to get field value in the Serializer
  • stackoverflow - What does it mean to normalize an email address?
  • it-eldorado.tistory - [Django] REST framework - ④ Authentication & Permissions
  • DRF - pagination

• 협업 참고자료
  • velog.io/@anrun - git stash로 자유롭게 branch 이동하기(feat. commit)