티스토리

도옹건 공부 일기

검색하기

블로그 홈

도옹건 공부 일기

donggeonstory.tistory.com/m

도옹건 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Next.js] Next.js에서 Zustand 라이브러리를 활용한 상태 관리 Zustand란?Zustand 라이브러리는 상태 관리를 위한 도구입니다. 이 라이브러리는 리덕스와 달리 별도의 리듀서 함수나 액션을 작성하지 않고도 간편하게 상태를 관리할 수 있습니다. 이번 글에서는 Zustand를 사용하여 영화 선호 목록을 관리하는 코드를 통해 이 라이브러리의 사용법을 알아보겠습니다. Zustand를 이용한 영화 선호 목록 관리우선, Zustand를 활용하여 영화 선호 목록을 관리하는 커스텀 훅을 작성해보겠습니다.import { addFavoriteMovie } from "@/app/api/add-favorite-movie";import { delFavoriteMovie } from "@/app/api/del-favorite-movie";import { getFavoriteMovies.. 공감수 0 댓글수 0 2024. 3. 8.
[Next.js] Next.js에서 NextAuth 사용하기 NextAuth란?NextAuth는 Next.js 애플리케이션에서 손쉽게 사용자 인증을 설정할 수 있는 패키지이다. Github, kaka, Google, Facebook, Credentials 등의 옵션을 제공해준다. 이 글은 Credentials을 통한 로그인 / 로그아웃 방법에 대한 포스팅이다. Credentials은 사용자로부터 아이디와 비밀번호를 받아 백엔드 서버를 통해 인증하는 것이다. 사용하려는 이유 상태 관리 라이브러리인 zustand를 통해 로컬 스토리지에 저장하여 로그인 상태를 관리하였다. 이렇게 하면 문제점이 있는데 로컬스토리지는 브라우저에서 작동을 하기 때문에 hydration이 일어나게 된다. 그렇게 되면 hydration을 통해 로그인 상태를 받아오는데까지 시간이 걸려 깜빡임이.. 공감수 0 댓글수 0 2024. 3. 2.
[Next.js] Next.js에서 zustand 사용하기 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 ".. 공감수 0 댓글수 1 2024. 2. 26.
[Next.js] Next.js 14 revalidatePath 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.. 공감수 0 댓글수 1 2024. 2. 24.
[Next.js] Next.js 14 revalidateTag 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.. 공감수 0 댓글수 0 2024. 2. 18.
[Next.js] Next.js 14 Server Side Data Fetching Next.js 14 Server Side Data Fetching 서버 컴포넌트에 데이터를 fetch할 함수를 작성한다.getMovies 코드// 영화 목록 불러오는 함수 (서버사이드렌더링)async function getMovies() { const response = await fetch(API_URL); return response.json();} 컴포넌트 코드export default async function Home() { const movies = await getMovies(); return ( {movies.map((movie: any) => ( ))} );} 여기서 주의해야할 점은 무조건 서버 컴포넌트 함수를 async await으.. 공감수 0 댓글수 0 2024. 2. 17.
[Next.js] Next.js 14 Dynamic Routing Dynamic Routing이란?동적 라우팅은 URL 경로의 일부를 사용하여 페이지를 동적으로 렌더링하는 기술을 의미한다. 예를 들어, 블로그 포스트의 경우 /posts/:id와 같은 URL 패턴을 사용하여 각 포스트를 고유하게 식별할 수 있다. 이때 :id 부분은 동적으로 변하는 값이며, 해당 값에 따라 다른 포스트가 표시된다. Dynamic Routing 생성 방법 동적 세그먼트는 폴더 이름을 대괄호로 묶어 생성할 수 있다. [id] 폴더안에 page.tsx 파일을 생성한다. Next.js에서 동적 라우팅을 하려면 위에서 예로 든 /posts/:id의 경우, /posts/[id]/page.tsx와 같은 파일을 생성해야 한다. 여기서 [id]가 동적 라우팅에 해당하는 폴더가 된다. page.tsx 파일.. 공감수 0 댓글수 0 2024. 2. 11.
[Next.js] Next.js 14 Layout Layout이란? 여러 페이지에 동일한 layout을 사용할 수 있도록 component를 구성하는 기능을 제공해준다. 네비게이션바와 같은 요소를 복붙하지 않도록 해서 편리하다. 루트 레이아웃루트 레이아웃은 디렉터리의 최상위 수준에서 정의되며 app모든 경로에 적용된다. 이 레이아웃은 필수이며 파일을 삭제해도 다시 생성된다. 서버에서 반환된 초기 HTML을 수정할 수 있도록 태그를 html포함 해야 한다. 모든 페이지에 Navigation이 보일 수 있도록 루트 레이아웃에 NavBar 컴포넌트를 넣어보자.NavBar 컴포넌트import Link from "next/link";export default function NavBar() { return ( H.. 공감수 0 댓글수 0 2024. 2. 11.
[Next.js] Next.js 14 hydration Hydration이란? Next.js는 페이지를 렌더링할 때 서버에서 미리 렌더링된 HTML을 받아오기 때문에 처음에는 자바스크립트가 없는 쌩 HTML 파일만 렌더링 된다. 그 후 HTML에 React 어플리케이션을 초기화 하여 이벤트 리스너 등 자바스크립트 코드를 실행할 수 있도록 해준다. 예시 버튼 클릭 시 1 증가하는 코드를 통해 hydration에 과정을 보자 코드 작성 useState를 사용하려면 최상단에 "use client"를 작성해야한다. 여기서 주의해야할 점은 use client를 작성했다고 서버 사이드 렌더링이 안 되는 것은 아니다. next.js에서 use client를 사용해도 기본적으로 백엔드에서 HTML이 렌더링 된다. 그 후 클라이언트에서 Hydration을 통해 자바스크립트 .. 공감수 0 댓글수 0 2024. 2. 10.
[Next.js] Next.js 14 Routing Routing Next.js는 폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용한다. 예를 들어 /about-us 라는 URL에 접근 시 abou-us 페이지를 보여주도록 하려면 app 폴더안에 about-us 폴더를 생성한 후 page.jsx 또는 page.tsx 파일을 생성해주면 된다. 폴더 구조 about-us 폴더에 page.tsx 파일 생성 후 UI를 만들어준다 결과 화면 해당 URL로 접근하면 페이지가 정상적으로 나오는 것을 확인할 수 있다. 파일 규칙 Next.js는 중첩된 경로에서 특정 동작으로 UI를 생성하기 위한 특수 파일 세트를 제공한다. 출처 : https://nextjs.org/docs/app/building-your-application/routing#route-s.. 공감수 0 댓글수 0 2024. 2. 10.
[Next.js] import 시에 alias 사용하기 (절대 경로) 사용 이유 긴 상대 경로를 사용하는 대신 간단한 별칭을 사용하면 코드가 더 간결해지고 가독성이 향상됩니다. ex) // before import SeleniumIcon from "../../../public/svgs/selenium-color.svg"; // after import SeleniumIcon from "@/svgs/selenium-color.svg"; 와 같이 별칭을 사용하면 경로가 더 짧아지고 이해하기 쉬워집니다. 설정 방법 tsconfig.json 또는 jsconfig.json 파일에서 아래와 같이 설정해줍니다. "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@/styles/*": ["src/app/_styles/*.. 공감수 0 댓글수 0 2024. 1. 6.
[Next.js] Warning: Prop `fill` did not match 경고 해결 방법 발생 원인 이 경고는 Next.js 앱에서 서버 측 렌더링과 클라이언트 측 렌더링 간에 일치하지 않는 prop이 발생한 경우에 나타날 수 있습니다. 해결 방법 const [mounted, setMounted] = useState(false); // ssr에서 말고 클라이언트 측에서 렌더링 되고 난 후 코드 실행되도록 작성 useEffect(() => { setMounted(true); }, []); if (!mounted) return null; ... 이 코드를 사용하여 초기 서버 측 렌더링 시에는 렌더링을 하지 않고, 클라이언트에서만 렌더링을 수행하도록 보장할 수 있습니다. useEffect 훅을 사용하여 컴포넌트가 마운트된 후에 setMounted(true)를 호출하므로, 클라이언트에서만 실행되고 .. 공감수 0 댓글수 1 2024. 1. 6.
[Next.js] svg 사용법 SVG 사용방법 Next.js에서 svg를 사용할 수 있는 방법 중 가장 쉬운 방법은 svgr 라이브러리를 사용하는 것입니다. npm install -D @svgr/webpack 그 후 next.config.js에 아래와 같이 추가합니다. next.config.js module.exports = { webpack: (config) => { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return config; }, }; 그러면 이제 import를 통해 컴포넌트처럼 사용하실 수 있습니다. import HtmlSvg from "../../public/icons/html5-color.svg"; SVG 크기 및 색 수정 svg 크.. 공감수 0 댓글수 0 2023. 11. 15.
[Next.js] ReferenceError Request is not defined 에러 해결 next.js 프로젝트를 생성 후 npm run dev를 실행하였을 때 class NextRequest extends Request { ^ ReferenceError: Request is not defined 위와 같은 에러가 나왔습니다. 구글링 해보니 현재 내 node.js 버전이 18버전보다 낮아서 나타나는 현상이였습니다(v16.17.0 사용중이였음) node.js 새로운 버전을 설치하기 위해 next.js 프로젝트 폴더에서 다음과 같이 node.js를 설치하였습니다. npm i node@lts 그러고 나서 npm run dev로 프로젝트를 실행하면 정상적으로 실행이 됩니다. 공감수 0 댓글수 0 2023. 11. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.