팀과제

오늘은 가져온 영화 데이터들을 평점순 이름순 개봉 날짜순으로 정렬을 해봤다.
처음에는 페이지에 print된 영화들을 querySellectorAll을 통해 코드를 작성해 보려고 했다.
하지만 가져온 값들은 단순한 string이었고 이를 통해 영화를 재배열 시킬 방도가 떠오르지 않았다.
두 번째로 시도한 것은 fetch의 data들을 활용하여 재배열 시켜보려 시도했다.

fetch("https://api.themoviedb.org/3/movie/popular?language=en-US&page=1", options)
  .then((response) => response.json())
  .then((response) => {
    const result = response.results;
    result.forEach((movie) => {
      addMovie(movie);
    });
    console.log(response)
  })
  .then(searchMovie)
  .then((response) => {
    console.log(response)
  })
  .catch((err) => console.error(err));

기존 영화를 print 해주는 코드가 적힌 then에서는 data들이 가져와졌지만 다음 then에서는 값이 들어있지 않았다.
기존 then 내부에서 data를 가져와 코드를 만들 수 있지만 다음 then에서는 왜 안되는지 궁금했다.

return

평소에 웬만한 함수에다 return을 사용하지 않고 코드를 작성하다 보니 중요한 걸 빼먹고 있었다.
두 번째 then에서는 함수에 data를 담아주지만 retrun 되는 값이 없기 때문에 다음 then에서는 해당 data들을 사용할 수 없었다.

return response

저 간단한 한 줄이 사라질 뻔한 data를 다음 then으로 넘겨주었다.
덕분에 return의 중요성을 다시금 느낄 수 있었다.

sort

sort는 배열을 정렬하여 반환해 준다.
딱 이 정도만 알고 있었다.
하지만 오늘 sort를 사용해 보며 sort를 활용하여 정렬하는 방법을 깨달았다.
처음 평점순으로 정렬할 때는 어렵지 않았다.
평점은 숫자였기 때문에 값과 '-' 연산자를 사용하면 간단하게 정렬해 줬다.
하지만 이름순으로 정렬할 때는 비교에 고생을 하였다.
객체 안에 있는 string을 어떻게 비교할까?
toUpperCase를 통해 대문자로 만들어야 하는 것은 알겠고 string은 어떻게 비교해야 할까?

const target1 = a.title.toUpperCase()
        const target2 = b.title.toUpperCase()
        console.log(target1 - target2)

평점처럼 단순히 '-' 연산자를 사용하면 NaN이 나온다.
여기서 많이 고민했다.
그러다 문득 sort는 두 값을 비교하여 양수인지 음수인지에 따라 정렬해 준다고 했던 것이 떠올랐다.

   const sortedMovie = unsorted.sort(function (a, b) {
        const target1 = a.title.toUpperCase()
        const target2 = b.title.toUpperCase()
        console.log(target1 > target2)
        if (target1 > target2) {
            return 1
        } else if (target1 < target2) {
            return -1
        }
    })

숫자로 빼서 정확한 값을 구할 필요가 없다.
값의 크기만 비교하여 음수나 양수를 retrun 하면 되는 것이다.

오늘은 기초적인 부분에서 배운 점이 많은 날이었다.