Web 개발 :: Django rest framework, 추천 시스템 _TIL#45

■ JITHub 개발일지 45일차

□  TIL(Today I Learned) ::

django restframework

  - 추천 리스트 가져오기

  추천리스트를 가져오기 위해 ajax 문법을 사용하였다. 이는 for문을 통해 html 템플릿을 반복하기 위해서였다.

  잊었던 부분인데 다시 사용해보니 새록새록했다.

function songrecommend() {
    $('#songs-box2').empty()
    const song_id = 10
    $.ajax({
        type:"POST",
        url: "http://127.0.0.1:8000/songs/"+song_id+"/recommend/",
        data: {},
        success: function (response) {
            let rows = response
            for (let i = 0; i < rows.length; i++) {
                let title = rows[i]['title']
                let singer = rows[i]['singer']
                let image = rows[i]['image']
                let id = rows[i]['id']

                let temp_html = `...`
                                $('#songs-box2').append(temp_html)
                console.log(title, singer, image, id)
            }

  - 위 코드를 보면 songs-box2라는 id를 찾아 내용을 먼저 지워준다. 그 후 song_id에 10을 넣어준 후 backend url에 song_id를 넣어 POST로 호출한다. 여기서 보내주는 data는 없었다.

  - response를 통해 가져오는 function은 for 반복문을 사용했다. 이는 backend에서 보내주고있는 결과로 나와야 할 노래카드가 여러개이기 때문이다. 모든 rows를 돌면서 title, singer, image, id를 뽑아 변수에 넣어주고, temp_html에는 songs-box2에 최종적으로 넣어줄 html 코드를 넣어주었다. 마지막으로 song-box2에 temp_html 결과를 추가해주었다.

  - 하지만 현재의 ajax문법으로 작성시 코드를 호출하는 순서가 문제인지, 해당 페이지에서 버튼으로 reload할 경우 검색결과가 화면에 제대로 load되지 않는 문제점이 있었다. 그래서 ajax가 아닌 문법으로 다시 가공하고자 한다.

  - 먼저 추천하는 페이지가 아닌 처음에 노래 정보를 가져오는 페이지를 변경하고 있는데 구조는 아래와 같다.

console.log("Home 접속 완료")

window.onload = async function songlistview2() {
    const response = await fetch('http://127.0.0.1:8000/songs/', {method:'GET'})
    response_json = await response.json()
    console.log(response_json)

    const songs = document.getElementById("songs")

    response_json.forEach(element => {
        const song_title = document.createElement("h4");
        const song_singer = document.createElement("h5");
        const song_image = document.createElement("image");
        const song_id = document.createElement("p");

        // song_title.setAttribute("class", "song_title");
        // song_singer.setAttribute("class", "song_singer");
        // song_image.setAttribute("class", "song_image");
        // song_id.innerHTML = `<a onclick=goDetail(${response_json.id})>${response_json.title}</a>`;
        // song_id.setAttribute("class", "song_id");

        // song_image.style.backgroundImage = `url(${image})`
        
        song_title.innerText = element.title
        songs.appendChild(song_title)

        
        song_singer.innerText = element.singer
        songs.appendChild(song_singer)
        
        
        song_image.innerText = element.image
        songs.appendChild(song_image)

        
        song_id.innerText = element.id
        songs.appendChild(song_id)
    })
}

  - 아직 완성된 코드는 아니다. GET으로 backend에서 보내주고 있는 url을 통해 받은 response를 response_json에 넣어주고, html에서는 songs라는 id에서 받은 데이터를 songs라는 변수에 넣어주고 있다.

  - ajax를 사용하지 않을 때에는 .forEach를 통해 반복문을 돌릴 수 있다.

  - createElement를 통해 요소를 만들고, 해당 요소에 appendChild를 사용하여 내용을 넣어준다.

  - 현재 내용은 잘 들어가고 있지만, html파일을 수정해주지 않아 모양이 엉망이다. 이 부분을 마저 수정하고, 기능간 연결작업까지 해야 한다. 연결작업이 가장 어려운 부분이다. 예를들어 첫 페이지에서 1) 노래 리스트를 제시하고, 2) 유저가 특정 노래를 선택하면, 3) 선택된 노래 정보(id 또는 pk)를 backend에 전송하여 4) backend에서는 해당 노래에 대한 data를 기반으로 frontend에 추천된 노래 리스트를 다시 전송해주어야 한다. 여기서 3), 4)의 코드 짜는게 쉽지 않지만 잘 풀어나가 봐야겠다.