몇 시간 만에 영화 스트리밍 사이트를 구축했습니다. - 여기&# 진행 방법이 나와 있습니다.

48시간 만에 영화 스트리밍 사이트 구축 - 진행 과정은 이렇습니다

몇 주 전 저는 백엔드가 전혀 없는 것 같은 영화 스트리밍 사이트 몇 군데를 우연히 발견했습니다. 그들은 TMDB와 같은 API를 사용하여 영화 데이터를 가져오고 vidsrc.dev를 사용하여 실제 비디오를 스트리밍했습니다. 그래서 "이걸 직접 시도해 보는 게 어떨까?"라는 생각이 들었습니다. 영화 스트리밍 사이트와 같은 유사한 사이트를 구축할 수 있지만 백엔드 없이 React와 몇 가지 영리한 API만 구축할 수 있다면 어떨까요?

그래서 도전해 보기로 했습니다. 나는 영화 스트리밍 사이트를 구축하는 데 48시간 도전을 설정했습니다. 백엔드도, 데이터베이스도 없습니다. 프런트엔드용 React와 영화 데이터를 가져오고 스트리밍을 처리하는 일부 API만 있으면 됩니다. '처음부터 시작해서 어디로 가는지 보고, 그 과정에서 많은 것을 배우겠다'고 생각했어요.

개발자라면 큰 일에 도전하고 싶은 마음을 아실 것입니다. 나는 React를 배우고, 튜토리얼을 따르고, 작은 프로젝트를 구축하는 데 많은 시간을 보냈습니다. 재미있고 교육적이었지만 저는 좀 더 도전적이고 현실적인 것을 원했습니다. 내가 실제로 사용할 수 있는 것. 영화 스트리밍 사이트가 딱 맞는 아이디어 같았어요.

왜요? 글쎄요, 영화 스트리밍 사이트는 어디에나 있죠, 그렇죠? 그러나 이들 모두가 복잡한 백엔드를 갖고 있는 것은 아닙니다. 일부는 간단한 API를 사용하여 영화 데이터를 가져오고 콘텐츠를 스트리밍합니다. 나도 똑같이 할 수 있고, React에 대해 많은 것을 배우고, 물론 다른 사람들과 공유할 수 있는 재미있는 작은 프로젝트로 끝날 수 있다고 생각했습니다. 하지만 나에게 정말로 동기를 부여한 것은 손을 더럽히고 처음부터 유용한 것을 만들겠다는 생각이었습니다. 완벽함이나 모든 것을 올바르게 하는 것이 아니라 효과가 있는 것을 구축한 다음 이를 개선하는 방법을 찾는 것이 중요했습니다.

여정: 프로젝트 시작

아이디어가 떠오르자 곧바로 사이트 구축에 뛰어들었습니다. 첫 번째 단계는 React 앱을 설정하는 것이었습니다. 초기 설정은 순조로웠습니다. 제가 수행한 모든 튜토리얼 덕분에 저는 React에 익숙했습니다. 하지만 진짜 도전은 모든 것을 하나로 연결해야 할 때부터 시작되었습니다.

사이트의 핵심은 가장 인기 있는 영화 데이터베이스 중 하나인 TMDB에서 영화 데이터를 가져오는 것이었습니다. 또한 영화를 스트리밍할 수 있는 방법이 필요했는데, 바로 여기서 vidsrc.dev가 필요했습니다. 그것은 매우 간단했습니다. TMDB를 사용하여 영화 제목, 포스터 및 세부 정보를 가져온 다음 vidsrc에서 실제 스트리밍 링크를 가져왔습니다.

하지만 중요한 점은 React가 UI를 구축하는 데는 훌륭하지만 많은 구성 요소와 로직으로 앱을 구성하는 경우 약간 지저분해질 수 있다는 것입니다. 반복되는 코드가 많았습니다. 영화 스트리밍 페이지와 시리즈 스트리밍 페이지에는 미디어 표시, 오류 처리 및 인터페이스 렌더링에 대한 코드가 거의 동일했습니다. 처음에는 재사용성에 대해 크게 생각하지 않았는데, 장기적으로 보면 그게 저를 힘들게 했습니다.

단순히 코드를 반복하는 것이 아니라 구조가 부족하다는 것이었습니다. 구성요소를 재사용하고 보다 모듈화된 접근 방식을 만드는 대신 많은 로직을 복사하여 붙여넣었습니다. 이로 인해 기술적인 부채가 발생했고, 솔직히 말해서 코드가 덜 깨끗해졌습니다. 하지만 당시에는 모든 것을 완벽하게 하기보다는 빠르게 작동시키는 데 더 집중했습니다.

잘못된 점: 내 코드의 추악한 진실

코드는 작동하지만 완벽과는 거리가 멀습니다. 앞서 언급했듯이 반복되는 코드가 많습니다. 영화 및 시리즈 스트리밍 구성 요소를 구성한 방식은 확장 가능하지 않습니다. 예를 들어 하드코딩을 너무 많이 해서 기존 코드를 많이 건드리지 않고서는 새로운 기능을 추가하기가 어려워졌습니다.

앱의 영화와 시리즈 부분은 기본적으로 동일합니다. 나는 재사용 가능한 구성 요소를 만들지 않았으며 논리를 관리 가능한 부분으로 나누지도 않았습니다. 이제 코드를 다시 살펴보고 리팩터링할 계획입니다. 계획은 재사용할 수 있는 더 작은 구성 요소로 분해하여 더욱 모듈화하는 것입니다. 또한 데이터 가져오기나 구성 요소 렌더링과 같은 일반적인 작업을 처리하는 함수로 논리를 추상화하여 반복할 필요가 없도록 하고 싶습니다.

이는 프로젝트의 유지 관리성을 향상시키는 중요한 단계입니다. 마감일을 맞추기 위해 단순히 코드를 엮는 대신 앱을 확장 가능하고 깔끔하게 만드는 데 집중해야 합니다. 또한 Tailwind CSS와 같은 것을 사용하여 스타일을 개선하고 앱의 반응성을 높이는 방법도 고려 중입니다. 작은 화면에서 UI가 작동하도록 만드는 방법은 이미 배웠지만, 확실히 디자인과 사용자 흐름을 개선하여 더 세련되게 만들 수 있습니다.

다음 단계: 프로젝트 개선 및 확장

사이트가 운영되고 있지만 아직 하고 싶은 일이 많아요. 다음 단계는 기능적일 뿐만 아니라 전문적인 것으로 전환하는 데 매우 중요합니다.

먼저 재사용성을 높이기 위해 코드를 리팩토링할 계획입니다. 로직을 복제하지 않고도 사이트의 다른 부분에서 재사용할 수 있도록 구성 요소를 다시 작성하겠습니다. 이를 통해 새로운 기능(예: 사용자 인증, 영화 추천 등)을 훨씬 쉽게 추가할 수 있습니다.

사용자 인증 얘기가 나와서 말인데, PocketBase를 사용하여 사용자 계정을 처리하는 것을 고려 중입니다. 이를 통해 사용자는 가입, 로그인하고 영화 경험을 개인화할 수 있으며 좋아하는 영화를 저장하거나 사용자 정의 재생 목록을 만들 수도 있습니다. 처음 48시간 동안 시간을 ​​내어 하고 싶은 일 중 하나이지만 확실히 로드맵에 있습니다.

제가 탐구하고 있는 또 다른 흥미로운 아이디어는 Tauri를 사용하여 데스크톱 버전의 앱을 구축하는 것입니다. Tauri를 사용하면 React 앱을 Windows, Mac 및 Linux용 기본 데스크톱 애플리케이션으로 패키징할 수 있습니다. 이를 통해 사용자에게 완전히 새로운 수준의 접근성을 제공하고 스트리밍 경험을 더욱 원활하게 만들 수 있습니다.

더 큰 그림: 성장, 학습, 전진

결국 모든 경험은 성장에 관한 것이었습니다. 이 사이트를 구축하면서 React뿐만 아니라 문제 해결, 시간 관리, 리팩토링의 중요성에 대해서도 많은 것을 배웠습니다. 프로젝트가 완벽하지는 않았지만 엄청난 배움의 기회였습니다.

아직 끝나지 않았습니다. 아직 개선해야 할 부분이 너무 많고, 이를 해결하게 되어 기쁩니다. 지금은 모든 답을 갖고 있지는 않지만 배우고 발전하는 데 전념하고 있습니다. 이것이 개발의 아름다움입니다. 처음부터 모든 것을 올바르게 하는 것이 아닙니다. 시간이 지남에 따라 반복되고 성장하는 것입니다.

그러므로 프로젝트 시작을 고려 중인 모든 분들은 손을 더럽히는 것을 두려워하지 마세요. 처음에는 코드가 완벽하지 않더라도 그 과정에서 많은 것을 배울 수 있습니다. 그리고 누가 알겠어요? 어쩌면 다음 48시간 프로젝트가 훨씬 더 크고 더 나은 프로젝트로 바뀔 수도 있습니다.

앞으로 더 많은 프로젝트를 진행할 예정이니 많은 관심 부탁드립니다.

https://lensloria.netlify.app/에서 사이트를 찾아보세요
https://github.com/Debronejacobs/React-Based-Web-App-for-Streaming-Movies-and-TV-Shows.git

에서 코드를 찾으세요.

위 내용은 몇 시간 만에 영화 스트리밍 사이트를 구축했습니다. - 여기&# 진행 방법이 나와 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!