🌱 프로젝트
드림코딩이라는 플랫폼의 강의를 보고, 유튜브의 오픈 API를 사용하여 클론 코딩을 시작했습니다. 로그인 기능이나 댓글을 이용하는 기능은 백엔드가 있거나 BaaS를 이용해야하지만 이번 프로젝트의 목표 기능은 API를 사용하여 영상을 시청, 검색을 구현하는 것이 주목적입니다.
목표 기능
- 홈 화면: 현재 핫트렌드 영상들을 보여준다.
- 검색 결과: 키워드 검색 결과로 나오는 영상들을 보여준다.
- 영상 재생: 썸네일을 클릭해서 들어가면 영상을 재생할 수 있고, 우측 사이드바에 해당 영상을 올린 채널에서 올린 다른 영상들을 추천 영상으로 나열한다.
스택
- Notion
- ExcaliDraw
- 유튜브 오픈 API
- Postman
- yarn
- React.js
- Tailwindcss
- React Router
- Context API
- TanStack Query (React Query)
- Netlify
1st work 1.25 - 1.26
NotFound
에러가 발생했을 때 사용할 페이지입니다.
SearchHeader
검색을 위한 input과 input에 입력한 텍스트를 index.js의 검색 결과의 path에 ':keyword'를 설정하기 위한 keyword로 저장하는 과정을 거치고, 다시 useParams를 이용해서 저장된 keyword를 가져와 input의 히스토리 관리를 하는 기능을 가집니다. Link를 사용하여 로고를 클릭하면 바로 홈화면(URL: /videos)으로 가게 됩니다.
Videos
App.js에서 아울렛 역할을 하는 컴포넌트입니다. 홈 화면에서는 mostPopular, 헤더에서 검색을 하면 키워드에 의해 나오는 결과를 VideoCard 컴포넌트로 보여줍니다.
프로젝트에서는 mock 데이터로 만들어놓은 json에서 읽어오는 데이터를 사용하거나 실제 API를 사용하여 받아오는 json 데이터를 쿼리에 저장하고 VideoCard 컴포넌트에 각 영상을 매핑하여 화면에 나타냅니다.
VideoCard
썸네일 이미지, 영상 제목, 채널명, 업로드 시간을 표시합니다.
Videos 컴포넌트에서 각 영상들의 정보가 담긴 하위 컴포넌트 역할을 합니다.
VideoDetail 페이지를 클릭으로 이동할 수 있게 useNavigate로 이동 기능을 넣을 예정입니다.
VideoDetail
VideoCard를 사용자가 클릭했을 때 영상을 볼 수 있는 페이지입니다.
유튜브와 똑같이 영상을 재생할 수 있고, 실제 UI도 유사하게 되어있습니다.
다만 댓글이나 좋아요, 공유와 같은 부가기능은 우선은 구현하지 않을 예정이고, 사이드바에 나타나는 영상들은 연관 동영상을 더 이상 지원하지 않아서 '현재 시청하고 있는 영상을 업로드한 채널의 다른 영상들'로 대체할 예정입니다.
fakeYoutube
실제 API를 사용하는 대신, 프로젝트를 만들 때 편하게 이용할 mock data json을 불러오는 클래스입니다.
youtube
API 키는 환경 변수에 따로 저장해두고 .gitignore로 커밋을 막아두었습니다.
실제 API를 사용하여 실시간 데이터를 json으로부터 가져옵니다. httpClient를 axios로 만들어줘야 하고, index.js의 라우터에 저장된 'keyword'를 Videos에서 useParams로 들고 와서 Youtube 클래스에 던져주면 전달받은 keyword를 axios의 get을 사용하여 생성자 함수로 만들어진 httpClient의 part, maxResults, type, q 데이터를 가져옵니다. 이렇게 가져온 데이터를 Videos에서 클래스의 search 함수를 실행하며 data: videos에 저장하고 화면에 VideoCard에 매핑하여 나타낼 수 있게 됩니다.
🌱 정리
일단 이번 게시글은 전체적인 구조를 설명하고, 지금까지 작업한 내용들까지 기록해보았습니다.
혼자 구현해낸 부분도 있고 구현이 막혀서 구글링을 하며 어떤 코드를 써야할지 찾아보거나 LLM을 사용하여 솔루션을 얻었고 이해가 완벽하게 안 됐다면 강의를 보고 구현을 한 뒤 왜 이렇게 했는지 다시 스텝을 밟아가며 이해하려 했습니다.
이어서 다음 글에 또 과정을 업데이트할 예정입니다. 단순한 기능을 가진 프로젝트여도 코드를 설계하고 구현하는 건 절대 쉽지 않은 것 같습니다. 후에 성능 개선과 모던 리액트를 적용한 프로젝트는 언제 만들게 될지..
