문제

음원 차트를 크롤링한 3페이지에서, 각 앨범을 누르면 상세페이지로 들어가게끔 만들고자 하였으나, 데이터 하나하나를 잡지 못하고 계속 전체 데이터만 불러오게 되었다.

시도

1. 자바스크립트 강의를 다시 꺼내어보며, 함수에 매개변수를 고유한 값으로 주어야 한다는 것을 알았다 -> id를 넣으니 자꾸 undefined가 떴다.
2. id로 가능하다는 것은 알지만, 또 다른 고유 값인 rank를 활용해보았다. -> 처음 시도해보는 거라 그런지 코드가 쉽게 짜여지지 않았다.

해결

함께하는 팀원분께서 코드를 완성해주셨다! 비록 내가 해결한 건 아니었지만, 중간까지는 갔다고 생각하며 .. 짜주신 코드를 보고 열심히 해독했다.

4페이지 js
function get_rank() {
    const a = new URL(window.location.href); 
    //새 url로 가도록 한다.
    const b = a.searchParams;
    //주소 중 물음표 이후 주소를 추출하는 파라미터 적용
    const rank = b.get('rank');
    // rank는 b에서 'rank'값 만을 가져온다.
    return rank
}

    function show_detail() {
    $('.allbox'). empty()
    $.ajax({
    type: "GET",
    url: "/posting",
    data: {},
    success: function (response) {

    let musics = response['musics'];

    for (let i = 0; i < 50; i++) {
    let rank = musics[i]['rank']
//만약 musics db에서 추출한 rank가 
get_rank()함수로 가져온 rank와 같다면, ~
    if (rank == get_rank()) {
    let image = musics[i]['image']
    let singer = musics[i]['singer']
    let title = musics[i]['title']
    let album = musics[i]['album']

    let temp_html1 =

3페이지 js
function listing() {
    $.ajax({
        type: 'GET',
        url: '/music',
        data: {},
        success: function (response) {
            let rows = response['musics']

            for (let i = 0; i < 50; i++) {
                let rank = rows[i]['rank'];
                let image = rows[i]['image'];
                let title = rows[i]['title'];
                let singer = rows[i]['singer'];
                let album = rows[i]['album'];

                let temp_html = `<tr id="table" class="chart-text" onclick="moveToPostingPage(${rank})">
                                                <th scope="col" id="num" style="width: 80px;">${rank}</th>
                                                <th id="image" scope="col" colspan="3" style="width: 25px;height: 25px;"><img src="${image}"></th>
                                                <th scope="col" id="title" style="width: 200px" class="title-text">${title}</th>
                                                <th id="singer" scope="col" style="width: 50px" class="title-text">${singer}</th>
                                                <th id="album" scope="col" class="album-text">${album}</th>
                                         </tr>`
                $('#music-box').append(temp_html)
            }
        }
    })
}
//moveToPostingPage에 매개변수로 rank를 넣어준다.
const moveToPostingPage = (rank) => {
    let a = new URL(`http://localhost:5000/page/detail?rank=${rank}`)
    window.location.href = a
//{$rank}값에 따른 홈페이지로 이동!
}

학습

사실 답지 없이 계속 해결해나가는 것은 너무 어려웠다. 하지만 그렇게 머리를 싸매고 꽁꽁 2일간 고민한 덕분에 다양한 api 호출 방법, fetch함수 등등 새로운 정보들을 알 수 있었다.
더불어 이 문제에 대한 것도 다음에 활용이 가능하다는 것!