오늘의 학습내용 : async / await, forEach
| 2일차 목표 |
| HTML, CSS 사용하여 영화 카드 UI 만들기 |
| API에서 받아온 데이터를 카드 형태로 화면에 출력하기 |
◆ 영화 카드 UI 만들기
1일차에 TMDB 오픈 API를 사용하여 데이터를 가져왔고, 이를 바탕으로 인기 영화 정보를 나열해 보여주는 카드를 만들어 페이지에 출력한다. 주의할 점은 브라우저의 크기가 변해도 자연스럽게 보일 수 있도록 스타일링을 적용하는 것이다. 카드를 생성하는 자바스크립트 코드를 작성하기 전에 HTML과 CSS를 사용하여 영화 카드를 먼저 한 장 만들어보았다. 디자인을 어떻게 할 지 감을 잡기 어려워서, 우선 예시 웹페이지의 CSS를 참고했다. 카드에는 당연히 영화 포스터 이미지가 보여야 하고, 영화 제목과 평점 정보를 제공할 예정이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
// moviecard
<div class="card">
<img src="" alt="noimage"
class="movieimg">
<h3>title</h3>
<p>rate</p>
</div>
</body>
</html>/* 브라우저 기본 스타일시트 초기화 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 10px;
width: 200px;
overflow: hidden;
text-align: left;
cursor: pointer;
}
.card img {
width: 100%;
}
.card h3 {
font-size: 18px;
margin: 10px;
}
.card p {
font-size: 14px;
margin: 10px;
color: #555;
}
◆ JS로 카드 생성하기
어떤 모양의 카드를 만들지 결정했고, 데이터를 연동한 뒤 자동으로 카드를 생성해서 이어 붙이면 된다. TMDB API를 가져오는 1일차 step을 진행할 때부터 팀원들과 많은 이야기를 나누며 서로 모르는 부분과 해결방안을 공유했는데, 2일차도 마찬가지였다. 팀원들은 전반적으로 fetch api로 데이터를 가져오고 html로 카드를 디자인하는 것까지는 모두 잘 수행했지만 js로 페이지에 카드를 생성하는 것은 학습과정에서 이해가 부족했다. 몇 번의 구글링과 팀원들의 의견을 들어보고 1일차에 작성한 코드에서 async / await 를 사용하기로 변경했다. async로 함수를 비동기로 작동하고 프로미스를 반환하게 할 수 있다. await는 async로 정의된 함수 내부에서 프로미스를 반환하는 함수가 resolve한 값을 받아온다. try...catch 문으로 에러를 처리할 수 있게 했다. 겸사겸사 영어 기반 정보에서 ko-KR로 한국어 데이터를 가져왔다. 가져온 url에서 include_adult=false 가 무엇인지 알지 못했는데, TMDB 커뮤니티 검색 결과 성인물 제외 용도였음을 알게 되었다(...)
async function fetchMovies() {
try {
const response = await fetch('https://api.themoviedb.org/3/
discover/movie?include_adult=false&include_video=false&language=ko-KR&page=1
&sort_by=popularity.desc', options);
const data = await response.json();
movieContainer(data.results);
} catch (err) {
console.error('오류가 발생했습니다:', err); // 에러 처리
}
};// 영화 카드를 담을 div 요소 선택
const movieList = document.querySelector('.movieList');
function movieContainer(results) {
results.forEach(movie => { // 각 영화 데이터를 movie로 처리
const movieCard = document.createElement('div');
movieCard.classList.add('card');
movieCard.innerHTML = `
<img src="https://media.themoviedb.org/t/p/w220_and_h330_face
${movie.poster_path}" alt="noimage" class="movieimg">
<h3>${movie.title}</h3>
<p>평점 ${movie.vote_average}점</p>
`;
movieList.appendChild(movieCard); // movieCard를 movieList에 추가
});
}
'스파르타코딩클럽 > 과제' 카테고리의 다른 글
| [React 개인과제_입문 주차] (기록용) (0) | 2024.11.01 |
|---|---|
| [React 개인과제_입문 주차] (기록용) (0) | 2024.10.30 |
| [JavaScript 개인과제_기초 주차] 4일차: 영화 상세 페이지 구현 (1) | 2024.10.21 |
| [JavaScript 개인과제_기초 주차] 3일차: 영화 검색 기능 구현 (0) | 2024.10.18 |
| [JavaScript 개인과제_기초 주차] 1일차: TMDB API 연동 및 데이터 가져오기 (0) | 2024.10.15 |