🔑단단한 뿌리는 수많은 가지를 뻗게 한다
💡 VERSION 2 업데이트 내용
📃 지난 일주일 동안 짬나는 시간을 활용해 간단한 웹앱을 구현하고 Vercel에 배포했습니다.
YouTube Data API를 활용할 아이디어를 고민하다가, 매일 아침 동국대로 출근하면서 생산적인 활동을 해보자는 생각이 들었습니다. 그래서 토스 Slash, 우아한 테크, 당근 테크 같은 기술 영상들을 보고 배운 점 딱 3가지만 정리하는 앱을 만들게 되었습니다
💻Interface
⬆️ 주요 기능은 사용자가 공부하고 싶은 영상을 선택하고, 해당 영상에 대한 배운 점을 작성할 수 있도록 구성되어 있습니다
특히 학습 포인트를 3가지로 제한한 이유는, 단순히 "배운 점을 적어보라"는 요청보다는 구체적인 목표를 제시함으로써 사용자의 동기부여를 더 효과적으로 이끌어낼 수 있다고 생각했기 때문입니다
💡 프로젝트의 핵심 Youtube Data API
📃 프로젝트의 핵심은 YouTube Data API이며, 이 API는 할당량 제한이 있습니다. 처음에는 10,000이라는 할당량이 제공되었으나, 사용 초기에는 이해하지 못한 채 개발을 진행했습니다.
특히, search 쿼리를 통해 데이터를 호출했는데, 이 방법은 호출당 100의 비용이 발생합니다. 이러한 호출을 무분별하게 사용하다 보니 중간에 할당량 초과로 인해 개발이 중단되는 상황을 겪었습니다. 이 문제를 해결하기 위해 임시 데이터를 정의하여 작업을 이어갔습니다
💻 호출 방법
⬆️ 앞서 언급한 search 쿼리는 호출당 100의 비용이 발생하는 반면, playlistItems를 사용하여 데이터를 가져오는 경우 호출당 비용이 2에 불과 ‼️ 합니다. 이에 따라 비용을 절약하기 위해 playlistItems를 사용하는 방식으로 API 호출을 변경했습니다
또한, 프로젝트의 목적상 id와 title 정보만 필요했으므로, fields 파라미터를 통해 필요한 데이터만 명시적으로 정의하여 호출 비용을 최소화했습니다
💡 데이터 관리
📃 이렇게 API를 통해 불러온 데이터는 utils에 정의된 getStorageVideoIds와 storeVideosIds 함수를 통해 로컬 데이터베이스에서 관리됩니다. 이 데이터는 사용자가 직접 삭제하지 않는 한 계속 저장됩니다. 만약 삭제되더라도, 적은 비용으로 API 호출을 통해 데이터를 다시 가져올 수 있기 때문에 아래와 같이 처리했습니다
💻 호출 방법
⬆️ 이 코드는 컴포넌트가 처음 렌더링될 때 fetchAllVideos 함수를 호출하여 YouTube API에서 비디오 목록을 가져오고, 로컬에 캐시 된 데이터가 있으면 이를 사용하여 화면에 비디오 목록을 표시하며, 없으면 API 호출을 통해 비디오 정보를 받아와 저장한 후 화면에 업데이트합니다
💡 프로젝트 관리
📃 CONTENT
⬆️ 간단한 프로젝트라서 github를 통해서 프로젝트를 관리했고, commit 규칙을 사전에 정의해서 변경 사항을 명확히 기록하고, 프로젝트 이력을 체계적으로 관리했습니다. 이렇게 해야 나중에 문서화할 때도 편리하다는 걸 이전 프로젝트에서 뼈저리게 느꼈습니다ㅎ