[NEXTFLIX_Day2] 구조화 및 셋업

2025.03.21(금) Task

팀 회의

- ERD : 페이지 구조화
- supabase DB 설정
- 프로젝트 셋업
- 역할 나누기

 

개인 기능 구현

- 초기 설정

- 기능 파악 및 구현

 

 

팀 회의

 

ERD : 페이지 구조화

📍인증 / 인가 방법 : 비회원 익명제 - 홍*동, 댓글 작성 시 비밀번호 설정

📍CUD : 영화 상세 페이지 댓글 작성, 수정, 삭제

📍와이어프레임을 통해서 페이지 다시 정하기

📍페이지 구조 정하기

📍필수 기능 체크

 

 

supabase DB 설정

📍팀원 초대

📍comments 테이블 설정

• id : uuid
• created_at : timestamptz
• name : varchar
• password : varchar
• content : varchar
• movie_id : int8

 

 

프로젝트 셋업

📍Next.js 설치

📍prettierrc

• 설치 및 자동 정렬

📍.gitkeep / .gitignore

• .gitignore : 깃헙에 올라가면 안 되는 파일 설정
• .gitkeep : 빈 디렉토리 유지하여 깃헙 게시(각 폴더마다 설정 - 내용 없이 파일명만)

📍.env / .env.local

• TMDB ApiKey
• Supabase Key

📍깃헙

• default 브랜치 dev 설정
• 이슈 & PR 템플릿

 

개인 기능 구현

 

초기 설정

📍이슈 작성

📍브랜치 생성

📍.env 파일 설정

📍디렉토리 설정

 

기능 파악 및 구현

 

와이어프레임

 

📍주요 기능

• 버튼 클릭 시 해당 카테고리 페이지로 이동
• 카테고리 : Now Playing / Popular / Top Rated / Upcoming
• 페이지네이션
• 추후 3페이지 정도까지 데이터 캐싱, 이후 SSR로 서버 요청
• 뒤로가기 버튼 추가 : Home으로 이동
• 공통 컴포넌트 제공 받기 : 헤더, 카테고리 버튼, 영화 카드 

📍파일 구조

• src / app / components / catecory / (now-playing, popular, top-rated, upcoming)

📍구현 순서

1. 서버 액션으로 카테고리별 데이터 가져오기
2. Tanstack으로 데이터 캐싱 (~3페이지)
   • staleTime, gcTime 설정
3. 조건문으로 캐시 옵션 변경
   • ~3페이지 ISR로 revalidate 적용 (cache: "force-cache", revalidate: 60 * 1000)
   • 4페이지~ SSR
4. 페이지네이트 버튼 컴포넌트 분리
   • CSR
   • 온클릭 이벤트 (서버 액션 실행) -> 데이터 요청

 

📍고민할 내용

• 페이지를 카드 개수로 나누기
  TMDB에서 제공하는 데이터는 페이지당 영화 20개씩
  데이터 형태 : {"datas":{ }, "page": 1,  "results": [ {영화 1}, {영화 2}, {영화 3}, ... , {영화 20} ] }
  page단위로 페이지를 나누는 것이 아닌, { results }를 구조분해할당으로 꺼내어서 영화 10~15개마다 페이지 나누기?

 

📍서버 액션을 선택한 이유

• 요청에 ApiKey를 포함하고 있음 => 서버 통신이기 때문에 보안 유지 가능
• 클라이언트 컴포넌트에서도 사용 가능
• 값을 받아오는 형식만 필요함