[TIL_Carrotww] 45 - 22/11/04

📝Carrotww의 코딩 기록장

🧲 javascript fetch 사용법

🔍

async function show_tag_fuc() {
    const response = await fetch('http://127.0.0.1:8000/music/', {
        headers:{
            'content-type':'application/json',
        },
        method:'GET',
    })
    // backend에서 받은 데이터 가져오기
    .then(response => {
        return response.json();
      })
    // Promise 안에 담긴 데이터 꺼내오기
    .then(data => {

        // console.log(data) // tag 목록 확인
        var tags= document.getElementById("all_tags");
        for (i=0; i < data.length; i++){
            const tag = document.createElement("button"); // 버튼 요소 생성
            tag.setAttribute("class","mylabel") // css class 지정
            tag.setAttribute("onclick","TagsPick(this.innerText)") // 선택한 버튼 클릭 시 해당 함수 호출
            tag.innerText = data[i]['category'] // 버튼이름 값 지정
            const tags = all_tags.appendChild(tag) // all_tags 안에 tag 추가
        }
    });
}

fetch로 해당 url 에 get을 보내어 db에 저장중인 tag들을 가져와 html에 보여주는 코드이다.
then이 처음에 뭔지 몰랐는데 fetch 사용법을 읽어보면 조금 이해가 될 것이다.

fetch 자체는 객체를 가져오고

const music_data = fetch(url)
    .then((response) => {
      return response.json();
    })

안의 데이터를 사용하고 싶다면

const music_data = fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;
    })

아래는 post 형식의 데이터를 보내고 받아왔을때 저장하는 방법이다
사실 똑같은데 사용법을 모르면 예시를 보고 익히는게 가장 좋기 때문에...ㅎㅎ
서버는 django로 만들고 있는데 javascript 부분도 함수를 짜는게 하다보니 재밌는 것 같다.

const music_data = await fetch('http://127.0.0.1:8000/music_search/', {

        headers:{
            'content-type':'application/json',
        },
        method:'POST',
        body: JSON.stringify({

            "category":str
        })
    }).then((response) => { return response.json() })

🧲 django serializer 동작방식

🔍 serializer data에 접근 시 바로 직렬화가 된다.
data는 serializer의 to_representation 이라는 메서드를 호출하고
wirte_only 인 필드를 제외하고 모두 가져온다.
wirte_only란 password 같이 쓰기만 가능한 필드를 말한다.
데이터를 가져온 후 dict 변수를 만든 후 key에는 필드의 이름, value에는 필드의 to_representation 메서드의 리턴값을 저장 후 dict를 리턴한다.

🧲 javascript localstorage 사용법

🔍 사용자 client localstorage에 데이터 저장하기

localStorage.setItem('tempdata', JSON.stringify(music_data));

tempdata 라는 이름으로 music_data를 locatstorage에 저장한다는 뜻이다.
사용법은 아래와 같다.

var temp = JSON.parse(localStorage.getItem('tempdata'));

나는 json 형식의 데이터를 저장할 것이여서 위와 같이 해주었고 객체, 혹은 json 형식의 데이터 말고 다른 데이터를 저장할 것이라면 아래와 같이 저장해 주면 된다.

localStorage.setItem('tempdata', music_data);
var temp = JSON.parse('tempdata');