5/30 TIL

5/30 메모

---

5/30 문제

문제)

fetch 함수를 이용하여 받은 데이터를 다른 객체로 저장
DOM 으로 접근 제어해서 브라우저에 출력

• 비동기 동기 : fetch는 비동기 함수이므로 실행 컨텍스트에 따른 영향
• TypeError: movies.forEach is not a function :
  타이핑 오류가 아닌 배열이 아니라서 생긴 오류
• them ~ catch 가 아닌 try ~ catch 문 사용
  데이터를 다른 변수로 받아와야 할 때는 try catch 문을 써야 한다고 이해했다
  하지만 them catch로도 방법이 있을 것 같다

시도)

1. fetch 기본

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

2. try ~ catch ( 이유는 모르겠다. 하지만 movies에 잘 담겨온다 )

async function getMovies() {
    let movies
    try {
        movies = await fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
    } catch (error) {
        console.log(movies);
    }
    return movies.json()
}

3. 데이터를 가져와 dom에 삽입하는 과정
   TypeError: movies.forEach is not a function 오류

async function renderMovies() {
    let movies = await getMovies();
    let html = '';
    movies.forEach(x => {
        let htmlSegment = `<div class="col">
        <div class="card h-100">
            <imgtoken interpolation">${x.id})" src="https://image.tmdb.org/t/p/w500${x.poster_path}"
                <h5 class="card-title">${x.title}</h5>
                <p class="card-text">${x.overview}</p>
                <p class="average">${x.vote_average}</p>
            </div>
        </div>
    </div>`;

        html += htmlSegment;
    });

    let container = document.querySelector('#cards-box');
    container.innerHTML = html;
}

4. 바꾼 부분 : 받아온 함수가 객체고, forEach는 배열을 위한 함수이다
   따라서 배열부분만 변수에 저장하여 돌린 방법이다.

let { results: movies } = await getMovies(); // 객체구조분해할당

해결)

• 해결

  • 데이터 출력 해결
  • onclick() 으로 id표시 해결

• 미해결(궁금한 부분)

  • forEach((x) => { ...
    https://image.tmdb.org/t/p/w500${x.poster_path}
    ... })
    이 부분에서 x.poster 전에 다른 데이터를 받아왔어야 했는데
    ex) y.prePoster_path
    다른 접근도 가능한 지 궁금했다

회고)

개념을 만만하게 생각하면 안된다
객체, 배열을 헷갈려서 시간을 많이 잡아먹었다.
개념을 익힐 때 꼼꼼히 익혀야겠다

---