[week1] 프로젝트 IMDb99 - trouble shooting

문제 상황

1. 영화 목록을 Fecth API 로 불러온다.
2. 영화 목록을 브라우저에 보여줄 때 로그인한 사용자의 좋아요 영화목록을 db에서 불러와 반영해야 한다.
3. 영화 목록을 반복문을 돌려 사용자 영화목록과 일치하는 영화에 idChecked: true라는 값을 넣어준다. 그렇지 않은 영화는isChecked: false
4. 영화 목록을 출력할 때 어떻게 해야 반영할 수 있을까?

이중 반복문을 돌리면 되는 문제여서 filter(), includes() 함수를 쓰면 금방 해결할 수 있을 줄 알았다.

문제는 영화API 배열도 객체로 된 배열이었고 사용자 정보 배열도 객체로 된 배열이라는 점이었다. 둘다 key-value로 되어있다보니 로직 구현이 자꾸 꼬이면서 구현이 안 되었다.

영화 API 배열 내부

movieAPIarr[0] = 
{
  adult: false
  backdrop_path: "/9eAn20y26wtB3aet7w9lHjuSgZ3.jpg"
  isChecked: false // 나의 의도 (원본 영화 API에는 없음)
  genre_ids: (3) [12, 28, 878]
  id: 507086
  original_language: "en"
  original_title: "Jurassic World Dominion"
  overview: "공룡들의 터전이었던 이슬라 누블라 섬이 파괴된 후,  마침내 공룡들은 섬을 벗어나 세상 밖으로 출몰한다. 지상에 함께 존재해선 안 될 위협적 생명체인 공룡의 등장으로 인류 역사상 겪어보지 못한 사상 최악의 위기를 맞이한 인간들. 지구의 최상위 포식자 자리를 걸고 인간과 공룡의 최후의 사투가 펼쳐진다."
  popularity: 6252.796
  poster_path: "/odxdUZWZ7fBfy3ZRj063wuJnZvo.jpg"
  release_date: "2022-06-01"
  title: "쥬라기 월드: 도미니언"
  video: false
  vote_average: 6.9
  vote_count: 1396
}

사용자 정보 배열 내부

mymovies = [
  { 
    email: "geuna0204@gmail.com",
    movie: "616037" 
  },
  { 
    email: "geuna0204@gmail.com",
    movie: "507086" 
  },
  { email: "geuna0204@gmail.com",
    movie: "338953"
  },
  { email: "geuna0204@gmail.com",
    movie: "634649"
  }
]

프로젝트 마감 기한까지 여유가 있었다면 처음 생각했던 대로 해결할 수 있을 것 같았는데 이후에 css 스타일링 할 시간도 비워놔야 했기 때문에 처음으로 돌아가 더 쉬운 방법을 찾기로 했다.

해결 방법

사용자 정보를 불러올 때 받은 배열을 바로 쓰는게 아니라 해당 배열에서 movie id만 담긴 배열을 따로 빼기로 했다.

const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    const jsonData = await response.json();
    // 메인페이지 구현
    setMovieList(jsonData.results);
    // 마이페이지 구현
    setMyMovieList(jsonData.results);
  } catch (err) {
    console.error(err);
  }
};

const setMovieList = (movies) => {
  // 인수로 받아온 movies는 
  $.ajax({
    type: 'GET',
    url: '/api/movielist',
    data: {},
    success: (res) => {
      console.log(res.message);
    },
  }).then((res) => {
    const mymovies = res.movielist;
    // mymovies에서 modie 값만으로 이루어진 배열 생성 + 문자열을 숫자로 변경
    const movieArr = mymovies.map((movie) => {
      return parseInt(movie.movie);
    });

    // 사용자 목록과 일치여부가 담긴 새로운 영화 목록 배열
    let arr = [];

    movies.map((movie) => {
      const movieId = movie.id;
      const isTarget = movieArr.includes(movieId);
      arr.push({ ...movie, isChecked: isTarget });
    });

    printMovieList(arr);
  });
};

느낀 점

• 앞에 삽질하느라 꽤 오랜 시간이 걸려 해결한 문제였다. 받아온 데이터 배열을 그대로 사용하는 것이 아니라 내가 편하게 쓸 수 있는 방향으로 새롭게 가공하여 문제를 해결할 수 있다는 걸 느끼게 되었다.