예제문제 풀이 및 숙제 고민

오전시간

 

먼저 어제 풀다 만 예제문제를 오늘 아침에 마저 풀어 보았습니다.

 

저번 1회독보다는 많이 나아졌지만, 아직 깊은 복사와 콜백함수 map, 그리고 async/ await이 생각이 나지않고 어려웠습니다.

 

현재 숙제를 하고있는데 async / await으로 fetch를 해서 확인하는데 함수안에서 찍은 response.json()인 data는 객체로 잘 나오나, 함수안에서 data를 return 해서 함수 밖에서 다시 찍으면 Promise pending이 나오고 있습니다.

const options = {
    method: 'GET',
    headers: {
        accept: 'application/json',
        Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4YTZkNjQ1M2NhYmUzMjQyMzNiZTE4NWQ2NDMyNjI2NyIsInN1YiI6IjY0NzNmN2M3ZGQ3MzFiMmQ3OWQxYzNlNSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.NcuTmHM5yydzVpzst6vf98EHpLKloutH7zNYhSJbyJc'
    }
};

// fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
//   .then(response => response.json())
//   .then(response => console.log(response))
//   .catch(err => console.error(err));
let url = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1';

let fetchJson = async function (url) {
    try {
        let response = await fetch(url, options);
        let data = await response.json();
        console.log(data);
        return data;
    } catch (err) {
        console.error(err);
    }
}
let test = fetchJson(url);
console.log(test);

찾아보니 아직 실행되지 않은 promise라서 그렇다는데 어찌 해결할지 모르겠어서 찾고 있습니다.

 

 

오후시간

 

혹시 저 함수 밖에 있는 콘솔이 문제인가 싶어 새로운 함수를 만들어서 시도해봤습니다.

const options = {
    method: 'GET',
    headers: {
        accept: 'application/json',
        Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4YTZkNjQ1M2NhYmUzMjQyMzNiZTE4NWQ2NDMyNjI2NyIsInN1YiI6IjY0NzNmN2M3ZGQ3MzFiMmQ3OWQxYzNlNSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.NcuTmHM5yydzVpzst6vf98EHpLKloutH7zNYhSJbyJc'
    }
};

// fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
//   .then(response => response.json())
//   .then(response => console.log(response))
//   .catch(err => console.error(err));
let url = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1';

let fetchJson = async function (url) {
    try {
        let response = await fetch(url, options);
        let data = await response.json();
        console.log(data);
        return data;
    } catch (err) {
        console.error(err);
    }
}
fetchJson(url);

function test() {
    fetchJson(url).then((data) => {
        let rows = data.results;

        rows.forEach((a) => {
            console.log("id : ", a['id']);
            console.log("title : ", a['title']);
            console.log("overview : ", a['overview']);
            console.log("release_Date : ", a['release_date']);
            console.log("vote_average : ", a['vote_average']);
            console.log("poster image : ", a['poster_path']);
		});
    });
}
test();

이렇게 돌려보니 잘 나오는 것을 확인했습니다.

이제 뽑은 값들을 html에 값을 넣어줘야합니다.

넣으려는데 자꾸 app.js:54 uncaught (in promise) typeerror: cannot read properties of null (reading 'appendchild')가 뜨면서 없어서 참조를 못한다며 에러가 났습니다.

 

왜그러나 이리저리 찾아보고 js파일도 고쳐봤는데 소용이 없었습니다.

 

찾아보니 html파일에서 script부분이 위에 있어서 참조를 하기도 전에 실행을 해버려서 그런거였습니다.

그래서 아래 참고 자료에 있는 사이트를 참고해서 수정하니 잘 나왔습니다.

 

이제 검색하는 기능과 영화사진을 눌렀을 때 id값이 알림창으로 띄우는 것을 하면 될 거 같습니다.

 

먼저 사진을 누르면 알림창을 뜨는것을 했습니다. 참고자료 사이트를 통해 카드를 붙일때 return하는 값에 eventListener에 alert을 추가해줬습니다.

function newCard(idNumber, title, image, overView, rating, area) {
    let div = document.createElement("div");
    area.appendChild(div);

    div.id = `${idNumber}`;
    div.className = "movieCard";
    
    div.innerHTML = `<img src="${image}" alt="${title}" class="card-img-top">
                    <h5>${title}</h5>
                    <p> ${overView} </p>
                    <p> rating : ${rating} </p>`;

    return new Promise((resolve) => {
        setTimeout(() => {
            div.addEventListener("click", function handler() {
                alert(`영화 : ${title} , id : ${div.id}`);
                div.removeEventListener("transitionend", handler);
                resolve(div);
            });
        });
    });
}

이제 영화 검색만 하면 될 거 같습니다.

일단 검색하는 기능을 제외한 나머지 부분을 git에 올려뒀습니다.

그리고 왠지 검색기능은 find나 filter를 사용해야 할 거 같습니다.

 

저녁시간

 

저녁 내내 검색하는 방법을 찾는데 잘 모르겠습니다.

마지막엔 결국 console창에는 입력값이 나올 수 있었습니다.

 

$serchBtn.onclick = function () {
    console.log($movieTitle.value);
};

아직 검색란을 완성하지 못해 아쉽기도 하고, 숙제가 너무 어렵다고 느껴졌습니다.

 

참고 자료

https://du-dung-tak.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Cannot-read-properties-of-null-reading-appendChild

자바스크립트 Cannot read properties of null (reading 'appendChild')

https://opentutorials.org/course/1375/6761

addEventListener() - 생활코딩

https://sisiblog.tistory.com/250

[javascript] 자바스크립트 버튼 클릭