비디오에서는 Next.js 14의 서버 작업, "unstable_nostore" API, Prisma, PlanetScale, MySQL 및 NextAuth를 강조합니다. 

반응형 웹 앱 구축을 위한 프로젝트 설정, 데이터베이스 구성 및 사용자 인증을 다룹니다.

00:00 - 소개

00:10:00 - Next.js 14 애플리케이션의 새로운 기능, 개선 사항 및 과제에 대한 개요입니다.

00:20:00 - Instagram 프로젝트 설정, TypeScript, Tailwind CSS 및 서버 작업 소개.

00:40:00 - Next.js 14 및 Tailwind CSS를 사용하여 강력한 사이드바 구성 요소 만들기.

00:45:00 - 밝은 모드와 어두운 모드 스타일을 위한 ShadCN UI 라이브러리 설치 및 구성.

01:15:00 - 탐색 링크 배열 생성, 매핑 및 서버에서 클라이언트 구성 요소로 변환.

01:35:00 - 클라이언트측 버튼 트리거를 사용하여 드롭다운 메뉴 구성요소를 생성합니다.

01:50:00 - useEffect 후크 및 이벤트 처리를 사용하여 드롭다운 메뉴 문제를 해결합니다.

02:35:00 - 서버 작업을 사용하여 Next.js에서 세션을 수정합니다.

03:15:00 - Prisma ORM을 사용하여 사용자 이름 찾기/업데이트.

04:00:00 - Next.js 및 인증을 통한 경로 보호.

04:40:00 - React Hook Form, Zod 및 Sonner를 사용한 양식 디자인.

05:15:00 - 양식 필드 이벤트, 제출 처리 및 사용자 정의 오류 메시지.

05:55:00 - 서버 작업을 사용하여 유효성 검사 및 인증을 통해 게시물을 만듭니다.

06:30:00 - 동적 렌더링, Prisma를 사용한 데이터 가져오기 및 결과 정렬.

07:05:00 - Prisma: 게시물 검색 및 삭제, 오류 처리, 대시보드 재검증.

07:20:00 - 좋아요, 공유, 북마크 버튼을 구성 요소로 재사용할 수 있습니다.

07:45:00 - 포스트 서버 작업을 좋아하고 낙관적인 업데이트를 처리합니다.

08:05:00 - 댓글 섹션, 사용자 정의 유형, 서버 작업, useTransition 후크.

08:25:00 - 설명 추가, 서버 작업, 낙관적 업데이트, 전환 후크 시작.

08:45:00 - 로그아웃, 로그인, 기능 테스트, 차단 경로 논의.

09:00:00 - Next.js에서 전용 게시물 페이지 생성, 경로 차단, 매개변수 처리.

09:05:00 - Prisma를 사용하여 단일 게시물을 가져오는 서버 구성 요소(PostView)를 구현합니다.

09:10:00 - Prisma의 포함, 데이터 주문, 경로 차단을 사용합니다.

09:15:00 - 애니메이션 로딩을 위한 뼈대 구성 요소를 소개합니다.

09:20:00 - Next.js에서 shadCN UI를 사용하여 스크롤 가능한 UI를 구현합니다.

09:45:00 - 서버 작업, Prisma, NextAuth를 사용하여 댓글 삭제 작업을 구현합니다.

09:50:00- NextAuth를 사용하여 Next.js에서 View Post 구성 요소를 만듭니다.

10:00:00 - Next.js, CodeIgniter, Prisma, PlanetScale 및 NextAuth를 사용하여 댓글 양식을 만듭니다.

10:10:00 - 사용자 상호 작용을 위한 게시물 작업을 추가하여 다양한 화면 크기에서 가시성을 보장합니다.

10:15:00 - 향상된 사용자 경험을 위해 로딩 스피너를 만들고 서스펜스 경계를 ​​활용합니다.

10:25:00 - 반응형 사용자 프로필, 호버 카드 기능, 사후 편집 및 삭제를 디자인합니다.

10:30:00 - 개별 게시물 디자인, 스크롤 영역, 게시물 작업 및 시간 태그에 대해 토론합니다.

10:50:00 - 게시물 표시를 위한 그리드 보기를 구축하고, 호버 효과를 구현하고, 타임스탬프 문제를 해결합니다.

10:55:00 - 사용자 경험을 강조하면서 긴장감 넘치는 콘텐츠 표시를 위한 로딩 애니메이션 시연

 11:05:00 - 페이지 생성을 찾을 수 없음, Server Actions 및 Prisma를 사용하여 게시물 편집.

11:15:00 - 편집 기능, 업데이트 후 및 향후 앱 개선 사항을 테스트합니다.

11:25:00 - 동적 프로필 페이지, 메타데이터 생성 및 프로필 가져오기 기능.

11:35:00 - Prisma의 기능을 따르고, 모델을 따르고, 이중 포함을 수행합니다.

11:45:00 - Instagram 복제 애플리케이션에서 스키마 업데이트 중요성.

12:05:00 - 양식 및 이미지 업로드 기능으로 프로필 페이지 생성을 업데이트합니다.

12:15:00 - 사용자 프로필 업데이트에 대한 서버 측 인증 및 유효성 검사.

12:25:00 - 서버 작업을 통해 버튼 생성 및 구현을 따릅니다.

12:40:00 - Next.js를 사용하여 프로필 섹션(게시, 저장, 해상도)에 대한 탭 생성.

12:50:00 - 사용자 이름, 조건부 스타일 및 저장된 게시물 표시를 위한 동적 로딩 화면.

13:10:00 - 사용자, 팔로어 및 팔로잉 페이지 팔로우/언팔로우 구현.

13:25:00 - React, Next.js 및 ShadCN 라이브러리를 사용하여 다양한 섹션(게시물, 저장, 해상도)에 대한 탭 생성.

13:30:00 - React Hook Form, 서버 구성 요소 및 Prisma를 사용하여 프로필 편집 페이지 구축.

13:45:00 - Next.js 14 애플리케이션에 글꼴을 통합하고 성능 문제를 해결합니다.

13:55:00 - Vercel CLI를 사용하여 Instagram 클론 배포.

14:00:00 - Prisma 유형 생성, Vercel에 배포, Google 인증 구성.

14:05:00 - 데모: 프로필 보기, 콘텐츠 게시, 댓글 달기가 가능한 Next.js 14 앱. 

펌 : https://www.youtube.com/watch?v=qIO803qh420&t=6895s