RSS DEV 커뮤니티

기존 프로젝트에 YouTube 썸네일 및 실제 제목 추가 — 마이그레이션 없이

Follow
ClipCrafter 프로젝트는 실제 YouTube 동영상 제목과 썸네일을 표시하여 프로젝트 카드 사용자 경험을 개선하는 것을 목표로 했습니다. 초기에는 프로젝트 카드에 썸네일 없이 "YouTube 동영상 (VIDEO_ID)"와 같은 일반적인 제목만 표시되었습니다. 이 정보를 직접 저장하려면 데이터베이스 마이그레이션과 백필이 필요했을 것입니다. 하지만 팀은 인프라 변경 없이 이를 달성할 방법을 찾았습니다. 동영상 제목의 경우, 제목을 포함한 동영상 메타데이터를 제공하는 YouTube의 무료 oEmbed API를 활용했습니다. 이 API 호출은 프로젝트 생성 중에 이루어지며, 실패할 경우 동영상 ID가 포함된 대체 제목이 사용됩니다. 가져온 제목은 프로젝트와 함께 저장됩니다. 썸네일의 경우, 동영상 ID만 필요한 YouTube의 예측 가능한 썸네일 URL 패턴을 활용했습니다. 동영상 ID는 새 프로젝트의 저장된 YouTube URL 또는 이전 프로젝트의 제목 형식에서 추출됩니다. 이 접근 방식은 기존 및 새 프로젝트에 대한 썸네일 URL을 동적으로 생성합니다. YouTube 썸네일 도메인은 원격 이미지를 표시할 수 있도록 애플리케이션 구성에 추가되었습니다. 프로젝트 카드 구성 요소는 유효한 소스를 찾으면 썸네일을 조건부로 렌더링하도록 업데이트되었습니다. 이 솔루션은 데이터베이스 마이그레이션, 백필 스크립트 및 API 키의 필요성을 피합니다. 이 글은 더 넓은 패턴을 강조하며 마무리합니다. 새로운 인프라를 구현하기 전에 필요한 데이터가 기존 데이터베이스 항목, 무료 플랫폼 API 또는 예측 가능한 URL 구조에서 파생될 수 있는지 고려하십시오. 이 접근 방식은 최소한의 개발 노력으로 사용자 경험을 크게 향상시킬 수 있습니다.
favicon
dev.to
Adding YouTube thumbnails and real titles to existing projects — without a migration