TMDB API 사용하기 5

벌써 5월?,,, 말도안되

 

map 함수를 좀 더 고쳐봤다. 코드가 너무 더러워서 신경이 엄청 쓰였었는데...

 

챗지피티한테 물어보니까 구조 분해 할당을 사용하라고 하는 것.

 

,,,,,,,,,,아하!

 

분명히 공부한건데 써먹을 일이 없어서 기억이 잘 안 나는 게 함정.

 

재빨ㄹ ㅣ검색

 

구조 분해 할당은 객체나 배열을 변수로 분해할 수 있게 해주는 특별한 문법이다.

이런 식으로 저장되어 있는 api는 객체이므로... 이 객체들을 변수로 분해 해줄 수 있다는 것.

 

객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 사용하는 듯 싶다.

 

검색해서 예제를 하나 봤다.

 

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

배열 arr에는 bora, lee가 들어있는데 원래라면 인덱스에 접근하기 위해 

 

let arr = ["Bora", "Lee"];

let firstName = arr[0];
let surname = arr[1];

이렇게 사용해야 했을 것... (마치 나처럼,,,)

 

하지만 인덱스 없이 사용할 수 있게 만드는 문법이다!

 

객체의 경우에는 

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

이렇게 쓸 수 있다.

 

이제 원래 나의 코드에 적용해보면

 

 

원래 코드

let card_list = movie
      .map((a) => {
        const movieTitle = a['original_name'].toLowerCase();
        const movieOverview = a['overview'];
        const movieVote = a['vote_average'].toFixed(2);
        const movieImg = `https://image.tmdb.org/t/p/original${a['poster_path']}`;
        const movieId = a['id'];

        return `<div class="movie-card"> 
      <img src="${movieImg}" alt="poster" onclick="alert(${movieId})"/>
      <h2 class="movie-title">${movieTitle}</h2>
      <p class="movie-overview">${movieOverview}</p>
      <p class="movie-vote">⭐️${movieVote}</p>
    </div>`;
      })
      .join('');

...

 

 

처음엔 챗 지피티한테 도움을 받아 이렇게 수정했다.

 

 

수정 1

let card_list = movie
  .map(({ original_name, overview, vote_average, poster_path, id}) => {
    const movieTitle = original_name.toLowerCase();
    const movieOverview = overview;
    const movieVote = vote_average.toFixed(2);
    const movieImg = `https://image.tmdb.org/t/p/original${poster_path}`;
    const movieId = id;

    return `<div class="movie-card"> 
  <img src="${movieImg}" alt="poster" onclick="alert(${movieId})"/>
  <h2 class="movie-title">${movieTitle}</h2>
  <p class="movie-overview">${movieOverview}</p>
  <p class="movie-vote">⭐️${movieVote}</p>
</div>`;
  })
  .join('');
document.querySelector('.movie-list').innerHTML = card_list;

고대로 구조 분해 할당만 사용한 것. 여전히

 

이거 분명히 더 줄일 수 있을 것 같은데?... 하다가

...

 

let card_list = movie
      .map(({ original_name, overview, vote_average, poster_path, id }) => { 
        return `<div class="movie-card"> 
      <img src="https://image.tmdb.org/t/p/original${poster_path}" alt="poster" onclick="alert(${id})"/>
      <h2 class="movie-title">${original_name.toLowerCase()}</h2>  
      <p class="movie-overview">${overview}</p>
      <p class="movie-vote">⭐️${vote_average.toFixed(2)}</p>
    </div>`; // 
      }).join('');
    document.querySelector('.movie-list').innerHTML = card_list;

 

...

 

아니 이렇게 줄일 수 있었다고?...........

 

..............

 

참고

https://ko.javascript.info/destructuring-assignment

---

다른 코드는 크게 안 건들고 화살표 함수로 바꿔주는 정도?... 

 document.querySelector('#search-btn').addEventListener('click', function (event) {
        event.preventDefault();
        let inputValue = document.querySelector('#input-text').value.toLowerCase();
        inputValue.trim() === '' ? alert('검색어를 입력해주세요') : showResult(inputValue);
      });

크게 달라진 건 없다.

document.querySelector('#search-btn').addEventListener('click', e => {
      e.preventDefault();
      const inputValue = document.querySelector('#input-text').value.toLowerCase(); 
      inputValue.trim() === '' ? alert('검색어를 입력해주세요') : showResult(inputValue); 
    });

 

 

 

function(event) 에서 function 키워드를 삭제하고, event롤 e로 줄였다.

 

참고

https://webclub.tistory.com/649