개인 프로젝트 영화리스트를 만드는건데, TMDB를 사용해서 데이터를 받아와야한다!
TMDB 한번도 사용해보지 않아서 정말 익숙치 않아서 손에 익는데 시간이 좀 걸렸다..
와이어프레임이랑 이미 퍼블리싱은 다 끝내놓고, js 작업을 시작했다.
데이터 가져오기가 첫 스타트인데, 어떻게 가져올까를 한참 생각했다.
두가지 방법으로 해봤다.
1. 방법 1로 해본 데이터 가져오기!
1번 최종코드는 밑에다가 첨부하고, 일단 발생한 이슈부터 이야기 하겠다.
이슈 발생
이미지가 나오지 않는 이슈가 생겨버렸다. 개발창에는 데이터를 잘 가져온 것을 확인했는데, 화면에 안뜨는것이다.
let temp = `
<div class = "movie-card" data-id="${_id}>
<img src= 반복되는 이미지 주소 ${_poster_path}" alt="${_title}" />
<h3>${_title} </h3>
<p>${_overview} </p>
<p> 평점: ${_vote_average} </p>
`;src 이미지링크가 잘못되었나 하면서 봤는데, 이때는 문제를 찾지 못했다.
어디가 문제인지 바로 보이시나요.. 전 바로 못봐서 헤맸어요 튜터님 찾아갈까도 생각했죠.
알고보니,
<div class = "movie-card" data-id="${_id}">에서 "를 빼먹은겁니다. 하하하 해결완료..
1번 코드
fetch(url, options) // 응답 요청
.then(response => response.json()) //JSON 형식으로 파싱
.then(data => { // 파싱된 데이터가 전달되면 실행
console.log("Fetched data:", data);
const movies = data['results']; //results에 해당하는 데이터 가져옴
const cardList = document.querySelector('.movie-block'); //movie-block 섹션 선택
cardList.innerHTML = ''; //초기화
movies.forEach((a) => { //result에서 가져온 데이터를 순회하며 각 요소에 대한 처리 수행
let _title = a['title']; // 제목가져오기
let _overview = a['overview']; // 줄거리 가져오기
let _poster_path = a['poster_path']; // 포스터 경로 가져오기
let _vote_average = a['vote_average']; // 평점 가져오기
let _id = a['id']; //고유 ID 가져오기
let temp_html = `
<div class = "movie-card" data-id="${_id}>
<img src= "반복되는 이미지 주소 ${_poster_path}" alt="${_title}" />
<h3>${_title} </h3>
<p>${_overview} </p>
<p> 평점: ${_vote_average} </p>
`;
cardList.innerHTML += temp_html; //새로운 movie-block 추가
});
})
.catch(err => {
console.error('error', err)
}); // 에러 처리전에 사전캠프할때 들었던 강의때 파이어베이스를 사용하셔서 데이터 가져오신것을 보고 그 방법을 썼지만, 다른 방법으로 데이터를 가져오고 싶었다.
팀프로젝트를 하면서, '데이터 가져오는' 부분은 사실 다들 비슷비슷하다고 생각한다. 한번 데이터 가져오는 코드를 구현하고 나면 다음에 같은 부분을 구현할때, 참고가 되므로 수월해진다.
2. 방법2로 해본 데이터 가져오기!
div를 전체로 다 가져오는것 보단, id와 div를 따로 가져올 수 있는 방법과 api 목록을 조금 더 많이 써볼 수 있는 코드를 다시 짜봤다.
fetch(url, options) // 응답 요청
.then(response => response.json()) //JSON 형식으로 파싱
.then(data => { // 파싱된 데이터가 전달되면 실행
console.log("Fetched data:", data);
const movies = data.results; //results에 해당하는 데이터 가져옴
const cardList = document.querySelector('.movie-block'); //movie-block 섹션 선택
cardList.innerHTML = ''; //초기화
movies.forEach((movie) => {
const movieCard = document.createElement('div'); // 새로운 div 생성
movieCard.className = 'movie-card'; // 클래스 이름 설정
movieCard.dataset.id = movie.id; // 고유 ID 설정
//카드 내용
const Content = `
<img src="반복되는 이미지 주소 ${movie.poster_path}" alt="${movie.title}" />
<h3>${movie.title}</h3>
<p>${movie.overview}</p>
<p>평점: ${movie.vote_average}</p>
`;
movieCard.innerHTML = Content; // 'movie-card'에 내용 설정
cardList.appendChild(movieCard); // 'movie-block'에 'movie-card' 추가
});
})
.catch(err => {
console.error('error', err)
}); // 에러 잡아야하니까 catch 사용 1번과 2번의 차이는,
✔️ cardList에 내용 추가 방식:
<1번>은 innerHTML을 사용하여 기존 HTML을 모두 지우고 새로운 콘텐츠를 추가하였다.
<2번>은 appendChild를 사용하여 새로운 div 요소를 생성하고 이를 cardList에 추가하였다.
✔️ 영화 카드 생성 방식:
<1번>은 HTML 문자열을 사용하여 전체 콘텐츠를 만들고, 이를 innerHTML로 추가하였다.
<2번>은 document.createElement로 div를 생성하고, 그 안에 innerHTML로 콘텐츠를 추가한 후, 이를 cardList에 추가하였다.
암튼 이렇게, 다 데이터를 가져오고 이미지도 잘 가져왔다!
근데 이미지를 다 넣었는데, 이미지가 빠져나간다. 산넘어산
이렇게 내가 설정해놓은 박스 안에 이미지가 자꾸 빠져나가는데 css도 먹지 않않아서 수정해보았다.
1번에서는 html에서 class 이름을 줘도 상관이 없었는데,
<div class ="movie-card">
<img class = "movie_img" />
<h3 class="movie_title"></h3>
<p class ="movie_overview"></p>
<p class ="vote_average"></p>
</div>이런식으로!
2번으로 코드를 바꾸고 나서는 html에서 class를 주는게 아니라, js파일에서 content안에 class를 설정을 해줘야 css가 작동을 하는 것을 알게 되었다.
const Content = `
<img src="이미지주소 ${movie.poster_path}" class ="movie_img" alt="${movie.title}" />
<h3 class="movie_title">${movie.title}</h3>
<p class ="movie_overview" >${movie.overview}</p>
<p class ="vote_average">평점: ${movie.vote_average}</p>
`;js파일에서 저렇게 class이름을 줘야지만 css가 먹히는것을 확인할 수 있었다.
이렇게 데이터 가져오기 성공!
내일에는 검색 기능 다 구현하고 추가할 기능 더 구현해볼 생각이다
<필수 요구사항>
순수 바닐라 자바스크립트 사용하기TMDB 오픈 API 이용해서 인기영화 데이터 가져오기영화정보 카드 리스트 UI 구현
-카드 클릭 시 클릭한 영화 ID를 나타내는 alert창 띄우기- 영화 검색 UI 구현
-input 창에 입력한 문자값이 포함되는 영화들만 화면에 보이게 하기
-입력 후 검색버튼 클릭시 실행
