[React] TMDB API를 활용한 넷플릭스 클론 코딩 - 1. 프로젝트 개요

• 넷플릭스의 프론트 부분을 클론 코딩해 보자!
• TMDB API로 영화 데이터 불러오고 로컬스토리지와 세션스토리지로 상태를 관리할 예정

넷플릭스 클론코딩 프로젝트

이 프로젝트는 넷플릭스의 기본적인 UI와 기능을 클론한 리액트 기반의 웹 애플리케이션입니다. 넷플릭스의 디자인을 참고하여, 영화 목록을 보고 검색하며 즐겨찾기하는 등의 기능을 제공합니다.

1. 프로젝트의 목표

• React 활용 능력 강화
  • React의 컴포넌트 구조, 상태 관리, 라우팅 등을 학습합니다.
• UI/UX 디자인 이해
  • 넷플릭스의 직관적이고 깔끔한 UI를 따라 디자인하며 사용자의 경험을 고려합니다.
• API 통신 및 데이터 처리 경험
  • 외부 API를 연동해 실시간 영화 데이터를 가져오고 화면에 렌더링하는 과정을 배웁니다.
• 배포 경험
  • 실제 서비스를 배포해보고 사용자 입장에서 접근할 수 있도록 웹사이트를 배포합니다.
    
    

2. 예상 폴더 구조

• public/: 웹 애플리케이션에서 사용하는 정적 파일들을 포함한 폴더 (이미지, 아이콘 등)
• src/: 리액트 컴포넌트, 스타일 시트, 유틸리티 함수 등이 포함된 폴더
  • components/: 재사용 가능한 리액트 컴포넌트들 (예: Header 등)
  • pages/: 각 페이지 컴포넌트 (예: HomePage, SearchPage, WishlistPage 등)
  • styles/: CSS 파일들
    
    

3. 구현할 주요 기능

• 메인 화면
  • 최신 영화 및 인기 영화 목록 표시
  • 사용자가 선호할 만한 추천 영화 표시
• 검색 기능
  • 영화 제목을 검색해 관련 결과 표시
• 위시리스트 기능
  • 사용자가 원하는 영화를 저장할 수 있는 개인 위시리스트
• 회원가입 및 로그인
  • 간단한 로그인 및 인증 시스템 구현