내일배움캠프 6기 React TIL

오늘의 회고

지난 주 개인과제의 연장선으로 팀프로젝트가 시작되었다. 개인과제는 api로 불러온 영화를 검색할 수 있게 구현하는 것이었다. 이 번 팀 프로젝트는 영화를 클릭하면 선택된 영화만의 상세페이지와 리뷰를 쓸 수 있는 서브페이지로 이동하는 것이다. 나는 서브페이지에서 선택된 영화와 비슷한 장르의 영화를 보여주는 슬라이드를 구현하게 되었다.

장르 비교

tmdb에서 가져온 영화는 장르id값을 가지고 있다. 선택된 영화의 장르id값과 같은 영화만 필터링해서 보여주게 구현해 보자.

문제

서브페이지를 가져온 영화의 장르id값은

[28, 12, 16, 878]

전체 영화의 장르id값은 배열 안에 객체가 존제한다.

[
{id: 28, name: '액션'},
{id: 12, name: '모험'},
{id: 16, name: '애니메이션'} ,
{id: 878, name: 'SF'}
]

이 두 개의 배열을 비교하는 점이 어려웠다.
두 배열을 비교하려고 했지만 두 배열의 형식이 달라서 까다롭다. 그리고 두 배열을 이중 for문으로 비교하려 했지만 프로그램에 너무 무리가 갔다.

for() {
	for(){}; // for문이 너무 반복되어 무리
};

해결

const movie = await fetchDetail(para); // 배열 안에 객체
  const movieGenre = [];
  for (var a of movie['genres']) {
    movieGenre.push(a.id);
  }

위 코드로 id값 만을 뽑아서 다시 배열을 구성 성공!

const result = movieGenre.filter(x => genre_ids.includes(x)); //[3]
    console.log(result.length);
    if (result.length > 0) {
      genreSection.appendChild(card);
    }

두 배열의 교집합으로 같은 장르가 있는지 필터링

오늘 배운 것

Array.prototype.push()
push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

var sports = ['축구', '야구'];
var total = sports.push('미식축구', '수영');

console.log(sports); // ['축구', '야구', '미식축구', '수영']
console.log(total);  // 4

Array.prototype.includes()
includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.