어제 만든 사이트에 카테고리 기능 추가하기

완성사진

기존에 검색창과, 검색버튼을 묶고 있던 상위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번 했다. .
자바스크립트 문법을 더 공부해서 어떻게 하면 함수를 더 간결하게 짜고,
응용해서 재활용을 많이 할 수 있는지를 알아봐야겠다. . .
솔직히 다른 분들의 코드를 보고 내가 이러고 있는게 맞나 싶었다.
더 열심히 달려보려한다.
그래도 카테고리를 클릭하면 해당하는 영화들이 나오게 했으니
만족은 한다. 이제 내머리로 코드를 흡수해야될것 같다.
끝. . . (기가 죽었다 . . . )