[Next.js] Youtube 클론 코딩 일기

* search조회를 통해 channel으로 오는 데이터를 확인

search조회 시 channel데이터가 오는 경우가 있다.
알고리즘에 의한 것인지 어떠한 특정 검색어를 검색하는 경우 channel에 대한 데이터도 같이 날아온다.
그래서 각각 channel, videos로 useState에 넣어주고 initialProps로 내려오는 initialVideos에서 filter메서드를 사용하여 youtube#search / youtube#channel인지를 비교하여 각각 저장을 해주었다.
그리고 channel로 저장된 데이터를 props로 다시 하위 컴포넌트에 추가를 하여 조건부 렌더링을 할 생각이었다.

문제점

• search api요청을 할 때 google Youtube api v3에서는 snippet은 part로 넣을 수 있지만 statistics는 넣을수 없다...
  뭐지.. Rapid API 를 사용할 때는 상관 없었는데 데이터가 엉망이었고 그럼 결과적으로 요청을 어떻게 해야 효율적인 요청이 될 수 있는지 구분해야한다..
• search요청으로 받은 channel데이터의 경우 역시 statistics가 같이 오지 않는다.
  혹시몰라 part에 넣어보았지만 역시 응답엔 없다
  그래서 결과적으로 channel detail에 따로 요청을 통해 넣어줘야 한다.

그럼 어떻게 해결할 것인가..

1. 상위 컴포넌트에서 channel을 받는 경우 이벤트를 발생시켜 channel detail요청을 한 후 props로 내려준다.

이렇게 하면 데이터는 올바르게 타입에 맞게 보낼수 있지만 문제는 화면에 렌더링 시킬때 channel Detail에 대한 요청도 추가적으로 해야한다는 점이 생긴다.
그럼 어떻게 해야될까..

아직은 딱히 명확한 답이 떠오르지 않고 있다.
생성형 AI에 정말 모르겠으면 물어보고 있긴 한데 type설정으로 시간을 좀 까먹고 다시 문제에 직면하니 어떤 방식으로 해야 현명한 방법인지 모르겠다.

이벤트를 발생시켜서 props로 보내주는게 올바른 답인지 아니면 다른 방법을 사용하여 할 수 있는 방법이 있을지..
가장 좋은건 상태관리 라이브러리를 사용하는 것이긴 하지만 이번 프로젝트를 해보는 이유중 하나가 Next.js에 대한 순수한 기능을 사용하고 싶기도 하고 typescript도 겸사겸사 여러 방면으로 경험해보고자 하는 이유인데 상태관리 라이브러리가 이렇게 소중했나....응아아악..