완성사진
기존에 검색창과, 검색버튼을 묶고 있던 상위div(input-group) 안에 카테고리들을 nav테그로 각각 div영역을 주어서 삽입했다.
사이즈와, 폰트 조정, 색, 여백, 어.. 등등 css를 지정해줬다.
nav {
font-family: 'Cherry Bomb One', cursive;
font-size: 2rem;
display: flex;
color: tomato;
margin-left: 7%;
}
nav .category {
margin: 3rem;
}
이제 카테고리를 클릭하면 해당 카테고리와 맞는 영화들을 보여주게
함수를 만들어줘야한다. 다른분들은 fetch 요청을 따로 변수에 넣고
어..쩌구 . ..저...쩌구... 하면서 되게 코드도 짧고 함수를 재사용하시는데,
나는 어떻게 해야될지 감이 안 잡혔다.. 그래서 일단 구현이라도 하자 !!
라는 생각으로 좀 많이 비효율적이고, 가독성도 떨어지고 드릅다..
일단 기존에 페이지에 접속하면 기본적으로 영화들을 보여주는것이
popular 카테고리이다. 코드는 이렇다.
function showMovieList() {
// fetch 함수를 사용해서 API 요청을 보냅니다.
fetch(popular, options) // 위에 미리 상수 안에 할당했기때문에 더 효율적이라고 느꼈습니다.
.then((response) => response.json()) // 데이터를 자바스크립트에서 사용하기 위해 JSON형식으로 변환시켰습니다.
.then((data) => {
let rows = data['results'];
const movieCardBox = document.getElementById('cards-box');
rows.forEach((item) => {
let movieTitle = item['title'];
let movieDesc = item['overview'];
let movieRate = item['vote_average'];
let movieImg = item['poster_path'];
let movieId = item['id'];
// 영화 정보를을 HTML 템플릿 문자열로 만들어서,
// 웹 페이지에 추가하고, 클릭 이벤트를 등록해줍니다.
let temp_html = `<div class="col" style="color: white">
<div class="solo-card" id="cardPost-${movieId}" style="background-color: rgb(58, 58, 57)">
<img src="https://image.tmdb.org/t/p/w500${movieImg}"
class="card-img-top"/>
<div class="card-body">
<h2 class="card-title">${movieTitle}</h5>
<p class="${textColor(
movieRate
)}">${movieRate}</p>
<p class="card-text">${movieDesc}</p>
</div>
</div>
</div>`;
// insertAdjacentHTML() 메소드를 사용하여 movieCardBox 요소에 temp_htm을 동적으로 추가합니다.
// beforeend는 movieCardBox 요소의 마지막 자식 요소로 추가하라는 의미입니다.
movieCardBox.insertAdjacentHTML('beforeend', temp_html);
const clickCardBox = document.getElementById(`cardPost-${movieId}`);
clickCardBox.addEventListener('click', () => clickCard(movieId));
});
});
}
함수를 재사용하고 매개변수로 함수를 넣고 어쩌구.. 아직 개념이 안 잡혔다.
그래서 나는 그냥 할 수 있는 최선을 다 했다. 그 방법은 바로!!!!!!!
무식하게 카테고리별로 fetch 요청 url을 상수로 지정한뒤,
똑같은 함수를 4개 더 만들어서 카테고리별로 나눈것이다. . .
아마 나보다 지식이 많으신 분들이 내 코드를 본다면 인상을 찌푸릴지도 모른다..
const popular =
'https://api.themoviedb.org/3/movie/popular?api_key=e9bb92f648d4191155d17c8e43f25e68&language=ko';
const NowPlaying =
'https://api.themoviedb.org/3/movie/now_playing?api_key=e9bb92f648d4191155d17c8e43f25e68&language=ko';
const TopRated =
'https://api.themoviedb.org/3/movie/top_rated?api_key=e9bb92f648d4191155d17c8e43f25e68&language=ko';
const Upcoming =
'https://api.themoviedb.org/3/movie/upcoming?api_key=e9bb92f648d4191155d17c8e43f25e68&language=ko';
이렇게 fetch로 요청할 API url에 내 apiKey, 한국어로 가져오기 위한 언어지정 문자를 삽입했다. . . 위 함수와 똑같은걸 복붙 4번 했다. .
자바스크립트 문법을 더 공부해서 어떻게 하면 함수를 더 간결하게 짜고,
응용해서 재활용을 많이 할 수 있는지를 알아봐야겠다. . .
솔직히 다른 분들의 코드를 보고 내가 이러고 있는게 맞나 싶었다.
더 열심히 달려보려한다.
그래도 카테고리를 클릭하면 해당하는 영화들이 나오게 했으니
만족은 한다. 이제 내머리로 코드를 흡수해야될것 같다.
끝. . . (기가 죽었다 . . . )