ParanBlog.

Fireship.io의 "Next.js Full Course" 강의를 듣고 필기했던 내용입니다. Follow 기능 만들기 데이터베이스 스키마 수정 Follows 모델: followerId 피팔로우자의ID followingId 팔로우하는 자의 ID @@id([followerId, followingId]): userA_userB 같은 식으로 만들어지는 해당 팔로우에 대한 고유ID followedBy Follows[] @relation("following") following Follows[] @relation("follower") } model Follows { follower User @relation("follower", fields: [followerId], references: [id]) follow..

Fireship.io의 "Next.js Full Course" 강의를 듣고 필기했던 내용입니다. Protecting Routes from User 예를 들어, 로그인하지 않은 사용자에게는 특정 라우트에 접근하지 못하게 하고 싶을 수 있다 서버 컴포넌트에서 그렇게 하지 못 하게 하는 가장 좋은 방법은, getSeverSession()을 쓰는 것이다 (로그인이 되어 있지 않다면 NULL이 될 것이기 때문) 따라서 const session = await getServerSession(); if(!session) { // Option #1 - 'next/navigation'의 redirect 사용하여 로그인 페이지로 보내버리기 redirect('/api/auth/signin'); // Option #2 retu..

Fireship.io의 "Next.js Full Course" 강의를 듣고 필기했던 내용입니다. Nav Menu 구현하기 전에: UI 컴포넌트를 어디에 넣을것인가? 여러 페이지에 공유될 것 같은 컴포넌트는 /components에 넣는다. 내비게이션 바는 어디에서나 보이기는 하지만 실제로는 Root layout에만 들어가는 것이다. 그러니까 루트 layout.tsx 파일과 함께 루트 디렉토리에 같이 놓기로(Colocation) 하자. 서버 컴포넌트 or 클라이언트 컴포넌트? 기본적으로 Next.js의 모든 컴포넌트는 서버컴포넌트 하지만 Sign In 버튼처럼 인터랙티브한 기능이 필요하다면 클라이언트 컴포넌트가 나을 수 있다 'use client';로 하지만 SEO를 위해 googlebot이 페이지에 접근했..

HTML 삽입 미리보기할 수 없는 소스 옛날에 위의 영상을 보고 공부했던 내용을 개인 필기용으로 적어둔 것입니다 File System Routing /app/about example.com/about Dynamic Route /app/[slug] example.com/{slug} Catch-All Route /app/[...id] example.com/…id/…id/…id () /app/(group) - will be ignored by routing system Reserved Filenames page.tsx (in TS) or page.js 실제 UI를 정의하는 기본 React 컴포넌트를 export layout.tsx (in TS) or layout.js UI that surrounds the e..