231026 TIL

chillakilla·2023년 10월 26일

팀프로젝트 2일차-2.

일단은 어제 TIL에 미처 정리하지 못한 데이터 받아오는 방법.
그것을 시작으로 오늘의 TIL을 진행해보려한다.

우선 알아야할 것은 TMDB에서 영화의 세부정보를 받아오는 것엔 ID가 필요하다는 거다.

예시처럼, ID값이 있어야 저 ID 값을 입력하여, Details 라는 데이터베이스로부터 해당 ID값과 일치하는 영화의 세부 정보를 받아온다.
많은 정보를 받아올 수 있는데, 그 중에서 나를 곤란하게 한 녀석들 중 하나는 이런 모습을 했었다.

'어...?'
'하던 거랑 생긴게 다르네..?'
'에이, 일단 해보면 알겠지.'

라고 아주 안일하게 생각하며 코드를 입력해봤다.
결과는 참담...은 에바고, 그냥 이런 식으로 출력됐다.

object Object가 뜻하는 것은 아마 "id"와 "name"이 아닐까 싶다.(아님말고ㅠ)
어쨌든 일단 팔짱을 끼고 생각했다.

'내가 필요한 건 name부분인데...'

이때만 해도 내 머릿속에 map함수를 이용해야한다는 건 떠오르지 않았다.

'아 그래도 일단은 페이지 이동 성공시켰고, 배열 불러와서 그리는 것까진 성공했으니까 확인도 받을 겸, 이걸 묻자.'

난 약 30분 정도 고민하다가 결론을 냈고, 그저 '빛'에게 찾아갔다.
덕분에 성공했어요! 하면서 코드와 결과물, 그리고 위에 적은 문제가 발생한 구간의 코드를 보여드렸다.
우리의 자랑스러운 샤이닝 브라이트 킹갓...
무튼, 팀원 분께서는 잠깐 보시더니, 해당 코드로 이동해 적어보라고 말씀하셨다.

이때 팀원 분께서 말씀하신 게 .map과 .join이다.

*join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

*map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

나는 그 순간, 무릎을 탁치고 감탄하며 이마까지 한 대 더 탁치고 또 감탄했다.

<p class="genres">
  🎬 _ ${movieDetails.genres.map(genre => genre.name).join(' , ')}
</p>
<p class="production-countries">
  🌍 _ ${movieDetails.production_countries.map(countries => countries.name).join(' & ')}
</p>
<p class="production-companies">
  🦺 _ ${movieDetails.production_companies.map(companies => companies.name).join(' , ')}
</p>

이걸 약간 설명식으로 해보자면...
movieDetails의, genres의 배열에서 genre를 뽑아낼 건데.
그 genre의 name 을(내가 필요한 것) 새 배열로 뽑아낼 거다.

그리고나서,

.join()을 이용해 새 배열로 뽑힌 애들을 문자열로 나열할 거야.
...라고 할 수 있겠다.

그렇게 다시 작성한 코드를 라이브로 본 결과.

데에에에에윰!
아주 만족스런 결과값이 나오는 걸 확인했다.
아, 그리고 .map, .join에 덧붙여 찾아낸 이모티콘 삽입 기능도 있다.

이걸 이용해 꽤나 미니멀리즘(잘모름)한 디자인을 꾸밀 수 있었다.

~~절대 디자인하기 귀찮다거나 어려워서 저걸로 대체한 것이 아니다.~~