팀프로젝트

Trial & Error

배열안에 객체가 있고 그 객체들 value만 뽑아오고싶다!

const genre = [
  { id: 18, name: "드라마" },
  { id: 80, name: "범죄" },
  { id: 28, name: "로맨스" },
];

• 위는 간략화된 예시이다. 특정 영화에 관한 데이터를 화면에 출력하기 위해서 그 영화의 장르를 전부 뽑아와야 하는 상황.

• map 메서드를 이용해 보기로 결정. map은 새로운 배열을 반환하니 그것을 할당할 변수도 동시에 정해 준다.

const getGenre = genre.map(function (el) {
  return el.name;
});
console.log(getGenre); // 출력 : [ '드라마', '범죄', '로맨스' ]

• 의도대로 각 객체를 돌면서 name의 value만 뽑아서 배열로 출력된 것을 확인. 하지만 아직 부족하다. 화면에 배열을 출력하는 것은 이상한 일이기 때문. 목표는 장르 : 드라마, 범죄, 로맨스 이런식으로 출력하는 것이다.

• 이제 원하는 값을 담은 배열이 있으니 그 배열에서 각각을 꺼내서 string으로 만들어야 한다. toString 메서드를 이용해 보기로 한다.

const stringGenre = getGenre.toString();

console.log(stringGenre); // 출력 : 드라마,범죄,로맨스

• 거의 목표에 도달했다. 하지만 쉼표 다음에 빈칸이 없어서 보기에 안좋다... stringGenre는 이미 string이니 예전에 요긴하게 써먹었던 replaceAll 메서드를 시도해 보기로 한다.

const finalString = stringGenre.replaceAll(",", ", ");

console.log(finalString); // 출력 : 드라마, 범죄, 로맨스

• 드디어 원하던 값을 얻어냈다. 이제 finalString을 원하는 곳에서 사용하면 된다. 근데 어제 배운 메서드 체이닝 이란 것이 떠오른다. 메서드 체이닝을 하면 매번 새로운 변수에 할당했던 수고를 덜 수 있지 않을까?

const genre = [
  { id: 18, name: "드라마" },
  { id: 80, name: "범죄" },
  { id: 28, name: "로맨스" },
];
const getGenre = genre
  .map(function (el) {
    return el.name;
  })
  .toString()
  .replaceAll(",", ", ");

console.log(getGenre);//출력 : 드라마, 범죄, 로맨스

• 예상대로 훌륭하게 작동한다. 여러번 변수를 새로 만들 필요도 없었다.

---

[follow up 10/29]
toString메서드와 replaceAll메서드를 한번에 더 깔끔하게 적용하는 메서드를 발견, 코드에 적용하였다.

join메서드이다. join 메서드는 배열의 요소들을 합쳐서 string으로 반환하며 인자로 구분자를 구체적이게 지정해 줄 수도 있다.
위 코드의 경우 map까지 사용해서 원하는 요소만 들어있는 배열이 완성된 이후에 .join(", ")을 사용함으로써 의도한 결과를 얻을 수 있다

const movieGenre = movieData.genres
    .map(function (el) {
      return el.name;
    })
    .join(", ");

---

DOM 요소의 다음 요소로 다른 요소를 추가하고 싶다

• appendChild 로 하위 요소를 붙이는 건 많이 해봤지만 하위 요소가 아니라 그냥 다음 요소를 추가 해야 하는 상황.

• after를 이용해서 간단하게 해결 할 수 있다.

const $dataContainer = document.querySelector(".container__detail");
const synopDiv = document.createElement("div");
synopDiv.classList.add("movie_detail__synopsis");
$dataContainer.after(synopDiv);

• 코드의 일부를 잘라온 예시. synopDiv라는 요소를 생성한뒤 $dataContainer라는 div의 다음 요소로 더하는 예시이다.
  결과물은 다음과 같다.
  
  의도대로 나란히 잘 붙은 모습이다.

객체안에 있는 요소보다 많은 반복횟수가 강제될때 err

• 첫 merge 이후 금방 발견된 버그. 영화가 아니라 다큐멘터리 정보를 불러올때 배우/성우 정보를 제대로 불러오지 못하고 오류가 발생 > 오류가 발생한 것이 원인이 되어 catch 문 발동.

• 원인 : 대부분의 영화에선 등장인물의 수가 5명 이상이기에 기존에 작성한 코드가 문제되지 않았지만, 다큐멘터리에서는 cast 배열에 나레이션 한명이 들어가 있는 경우가 있기에 for (let i = 0; i < 5; i++)로 조건을 걸어둔 for 문에서 에러가 났던것.

• 해결 방안 : for문의 종료 조건으로 5를 하드코딩 하지 않고 cast arr 의 길이에 따라서 유동적으로 변하게 한다. 삼항연산자 활용.
  
  팀원의 도움을 받아 다음과 같이 변경하여 문제를 해결했다.
  빨간색이 기존에 for문의 조건을 하드코딩 해둔 것이고 초록색이 for문의 조건으로 num이란 변수를 만들고 삼항 연산자로 cast arr안에 들어있는 사람 수에 따라서 다른 값을 전달할 수 있게 한것.

• 하드코딩이 안좋다는 이야기는 계속 들었지만 뭐가 어떻게 안좋다는건지 막연하게만 알고 있었는데 이번 문제를 해결하면서 확실하게 느끼게 되었다.