5/30 TIL

cjstkrak·2023년 5월 30일
0

TIL

목록 보기
10/55
post-thumbnail

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));
  1. 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()
}
  1. 데이터를 가져와 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">
            <img onclick="alert(${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;
}
  1. 바꾼 부분 : 받아온 함수가 객체고, forEach는 배열을 위한 함수이다
    따라서 배열부분만 변수에 저장하여 돌린 방법이다.
let { results: movies } = await getMovies(); // 객체구조분해할당

해결)

  • 해결

    • 데이터 출력 해결
    • onclick() 으로 id표시 해결
  • 미해결(궁금한 부분)

회고)

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


0개의 댓글