🌱 프로젝트
지난번 게시물에서 전체적인 페이지 명세, 컴포넌트 구조, API를 만들어서 제작을 시작했었습니다.
한 4일 만에 완성하고 두 번째이자 마지막 유튜브 클론코딩 포스트를 올립니다.
2nd Work 1.28 - 1.30
유저 플로우
🌱 추가된 컴포넌트 및 소스
date
Videos 컴포넌트를 사용하는 Home과 VideosDetail 페이지에서 영상들의 UI를 담고 있는 VideoCard에
publishedAt(업로드 시간)을 기준으로 얼마나 지났는지 표현하는 timeago.js의 format함수를 커스텀 함수를 포함한 소스 코드 파일에 만들었습니다.
youtubeClient
axios.create으로 유튜브 API와 통신하기 위한 클라이언트를 만들었습니다.
그리고 axios.get으로 검색 결과 데이터, 인기 동영상, 채널 정보를 가져오기 위한 함수를 정의했습니다.
fakeYoutubeClient
axios.get으로 미리 만들어둔 mock 데이터인 json에 요청하는 함수를 정의했습니다.
youtube
생성자 함수를 통해 클라이언트를 전달받아 사용했습니다.
YoutubeApiContext에서 클라이언트로부터 받아온 데이터를 멤버 함수들을 사용할 수 있도록 함수들을 정의했습니다.
YoutubeApiContext
클라이언트를 사용하고자 하는 컴포넌트에서는 YoutubeApiContext에서 정의한 useYoutubeApi( )를 자신의 컴포넌트에서 실행하여 데이터를 불러옵니다.
Channelinfo
VideoDetail 컴포넌트가 보여주는 페이지에서 iFrame 영상 아래에 위치하여 현재 시청 중인 영상의 채널 정보(이미지, 채널 이름)를 클라이언트로부터 받아와 업데이트 해줍니다.
VideoDetail
영상을 재생하는 iFrame과 연관 동영상 리스트가 담겨있습니다.
RelatedVideos
연관 동영상 리스트를 렌더링합니다.
🌱 개발 중 마주친 문제와 해결 과정
VideoCard 클릭 시 URL의 video id가 undefined로
VideoCard에서 분명히 video.id.videoId로 제대로 적었다 생각했는데, 브라우저에서 VideoDetail 페이지로 들어가면 계속 url 창에는 맨 뒤에 undefined로 나왔습니다. 그래서 json파일을 다시 확인해가며 생각해봐도 전혀 틀린게 없다고 생각했습니다.
Videos.jsx
youtube.js
search.json
근데 VideoCard로 video의 데이터를 넘겨주는 Videos의 코드를 보니 youtube.search를 통해 데이터를 가져와 저장하는데 데이터를 가져올 때 id라는 키에 item.id.videoId를 담아서 가져오고 있었습니다.
그래서 Videos에 저장된 데이터들인 videos의 video를 각 VideoCard에 넘겨주고 있으므로 VideoCard 안에서는 video.id.videoId로 접근할게 아니라, video.id로 접근해야 맞는 것이었습니다. (video라는 객체 안에 id가 item.id.videoId이기 때문에)
이렇게 수정하고 나니 url에도 문제가 없이 json의 item.id.videoId에 해당하는 속성값이 잘 나타났습니다.
완성
