Netflix-clone

배포 주소 : https://netflix-clone-project-neon.vercel.app/

Introduction

Netflix 클론 코딩

클론 코딩을 한 이유

• 실제 서비스와 유사한 기능을 구현하며 실무에서 요구되는 기술 습득
• 많이 사용되는 서비스를 구현하며 사용자 경험을 고려한 UI 설계의 중요성 습득

Netflix를 선택한 이유

• 데이터 중심의 서비스로 fetching 라이브러리를 활용해 캐싱 및 최적화 기능 학습
• 직관적이고 깔끔한 인터페이스

Tech Stack

Key Features

영상 재생

default.mov

영상 즐겨찾기 추가

이메일 및 소셜로그인

Key Learnings

swr 사용하여 데이터 요청 최적화

const { data, error, isLoading } = useSWR('/api/random', fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
});

• swr의 상세 옵션을 이용하여 불필요한 데이터 요청 방지

  • revalidateIfStale: false ⇒ 이전 데이터가 유효하다면 revalidate 하지 않음
  • revalidateOnFocus: false ⇒ 브라우저의 다른 탭에서 돌아왔을 때 revalidate 하지 않음
  • revalidateOnReconnect: false ⇒ 네트워크가 다시 연결될 때 revalidate 하지 않음

• route handler 활용하여 저장 기능 구현

prisma + mongodb

• prisma schema를 통한 데이터 모델링
• mongodb의 유연한 스키마를 활용하여 변화하는 요구사항에 맞춘 데이터 구조 설계
• prisma client로 mongodb의 다양한 데이터 타입과 구조를 효율적으로 처리

// ex) Movie model

model Movie {
  id String @id @default(auto()) @map("_id") @db.ObjectId
  title String
  description String
  videoUrl String
  thumbnailUrl String
  genre String
  duration String
}

next-auth

• 이메일 및 소셜 로그인 기능 구현
• JWT를 활용한 토큰 기반 인증

session: {
    strategy: 'jwt',
  },
  jwt: {
    secret: process.env.NEXTAUTH_JWT_SECRET,
  },

Quick Start

테스트 아이디와 테스트 비밀번호를 복사하셔서 로그인 하시면 됩니다.

Clone

git clone https://github.com/HMRyu/netflix-clone-project.git

Installation

npm install

Run

npm run dev