도옹건 공부 일기

Zustand란?Zustand 라이브러리는 상태 관리를 위한 도구입니다. 이 라이브러리는 리덕스와 달리 별도의 리듀서 함수나 액션을 작성하지 않고도 간편하게 상태를 관리할 수 있습니다. 이번 글에서는 Zustand를 사용하여 영화 선호 목록을 관리하는 코드를 통해 이 라이브러리의 사용법을 알아보겠습니다. Zustand를 이용한 영화 선호 목록 관리우선, Zustand를 활용하여 영화 선호 목록을 관리하는 커스텀 훅을 작성해보겠습니다.import { addFavoriteMovie } from "@/app/api/add-favorite-movie";import { delFavoriteMovie } from "@/app/api/del-favorite-movie";import { getFavoriteMovies..

NextAuth란?NextAuth는 Next.js 애플리케이션에서 손쉽게 사용자 인증을 설정할 수 있는 패키지이다. Github, kaka, Google, Facebook, Credentials 등의 옵션을 제공해준다. 이 글은 Credentials을 통한 로그인 / 로그아웃 방법에 대한 포스팅이다. Credentials은  사용자로부터 아이디와 비밀번호를 받아 백엔드 서버를 통해 인증하는 것이다. 사용하려는 이유 상태 관리 라이브러리인 zustand를 통해 로컬 스토리지에 저장하여 로그인 상태를 관리하였다. 이렇게 하면 문제점이 있는데 로컬스토리지는 브라우저에서 작동을 하기 때문에 hydration이 일어나게 된다. 그렇게 되면 hydration을 통해 로그인 상태를 받아오는데까지 시간이 걸려 깜빡임이..

zustand란?zustand는 작고 빠르며 확장 가능성을 자랑하는 상태 관리 라이브러리이다. 단순화된 Flux 구조와 React Hooks 기반으로 만들어져 boilerplate 코드 없이 쉽게 사용할 수 있다. Next.js에서 Zustand 사용법로그인 후 유저 정보를 zustand에서 관리하는 방법을 예시로 들어보자 zustand 설치npm install zustand  React Hooks 기반으로 만들어져서 hooks 폴더에 useUserInfo.ts 파일을 작성한다. useUserInfo.tsimport { create } from "zustand";import { persist } from "zustand/middleware";import { createJSONStorage } from "..

Next.js를 사용하면서 캐싱된 데이터를 revalidatePath를 통해 새로 가져오는 방법에 대해 알아보자  revalidatePath란?revalidatePath는 특정 경로에 대한 캐시된 데이터를 필요에 따라 지울 수 있는 기능이다. 이를 통해 특정 경로의 데이터를 업데이트할 수 있다. 찜한 영화 목록을 불러오는 api 함수와 찜 영화를 추가하는 함수로 예시를 보자getFavoriteMovies.ts 코드"use server";import { SERVER_URL } from "@/constans";export const getFavoriteMovies = async (id: any) => { const response = await fetch(`${SERVER_URL}/favorites/${i..

Next.js를 사용하면서 캐싱된 데이터를 revalidateTag를 통해 새로 가져오는 방법에 대해 알아보자 revalidateTag란?revalidateTag 함수를 사용하면 특정 캐시 태그에 연결된 모든 경로의 캐시를 무효화할 수 있다. 이를 통해 관련된 모든 페이지의 데이터를 한꺼번에 업데이트할 수 있다. 찜한 영화 목록을 불러오는 api 함수와 찜 영화를 추가하는 함수로 예시를 보자getFavoriteMovies.ts 코드"use server";import { SERVER_URL } from "@/constans";export const getFavoriteMovies = async (id: any) => { const response = await fetch(`${SERVER_URL}/fav..

Dynamic Routing이란?동적 라우팅은 URL 경로의 일부를 사용하여 페이지를 동적으로 렌더링하는 기술을 의미한다. 예를 들어, 블로그 포스트의 경우 /posts/:id와 같은 URL 패턴을 사용하여 각 포스트를 고유하게 식별할 수 있다. 이때 :id 부분은 동적으로 변하는 값이며, 해당 값에 따라 다른 포스트가 표시된다. Dynamic Routing 생성 방법 동적 세그먼트는 폴더 이름을 대괄호로 묶어 생성할 수 있다. [id] 폴더안에 page.tsx 파일을 생성한다. Next.js에서 동적 라우팅을 하려면 위에서 예로 든 /posts/:id의 경우, /posts/[id]/page.tsx와 같은 파일을 생성해야 한다. 여기서 [id]가 동적 라우팅에 해당하는 폴더가 된다. page.tsx 파일..

Layout이란? 여러 페이지에 동일한 layout을 사용할 수 있도록 component를 구성하는 기능을 제공해준다. 네비게이션바와 같은 요소를 복붙하지 않도록 해서 편리하다. 루트 레이아웃루트 레이아웃은 디렉터리의 최상위 수준에서 정의되며 app모든 경로에 적용된다. 이 레이아웃은 필수이며 파일을 삭제해도 다시 생성된다. 서버에서 반환된 초기 HTML을 수정할 수 있도록 태그를 html포함 해야 한다. 모든 페이지에 Navigation이 보일 수 있도록 루트 레이아웃에 NavBar 컴포넌트를 넣어보자.NavBar 컴포넌트import Link from "next/link";export default function NavBar() { return ( H..

Hydration이란? Next.js는 페이지를 렌더링할 때 서버에서 미리 렌더링된 HTML을 받아오기 때문에 처음에는 자바스크립트가 없는 쌩 HTML 파일만 렌더링 된다. 그 후 HTML에 React 어플리케이션을 초기화 하여 이벤트 리스너 등 자바스크립트 코드를 실행할 수 있도록 해준다. 예시 버튼 클릭 시 1 증가하는 코드를 통해 hydration에 과정을 보자 코드 작성 useState를 사용하려면 최상단에 "use client"를 작성해야한다. 여기서 주의해야할 점은 use client를 작성했다고 서버 사이드 렌더링이 안 되는 것은 아니다. next.js에서 use client를 사용해도 기본적으로 백엔드에서 HTML이 렌더링 된다. 그 후 클라이언트에서 Hydration을 통해 자바스크립트 ..