likeornament 님의 블로그

// ToastProvider.tsx"use client"import { Toaster } from "react-hot-toast";export default function ToastProvider() { return ( )}react-hot-toast를 사용하기 위해 먼저 Toaster를 감싼 ToastProvider.tsx를 만든다. // layout.tsxtype Props = { children: ReactNode;} export default function AfterLoginLayout({ children }: Props) { return ( {children} )}그리고 이렇게 Toaster를 띄울 페이지들의 최상단 layou..

// word/learn/page.tsximport { Suspense } from "react";import WordLearningContainer from "../_component/WordLearningContainer";import LoadingSpinner from "@/app/_component/LoadingSpinner";export default function WordLearnPage() { return ( )}프로젝트 작업 중 문득 궁금한 게 생겼다. 위의 page.tsx를 보면, 서버 컴포넌트인 WordLearnPage가 단순히 WordLearningContainer라는 클라이언트 컴포넌트만 반환하고 있다.(이렇게 구성한 이유는 내부 코드를 컴포넌트로 분리하여 다른 page..

토큰 만료 대응 작업을 하던 중 문제가 발생했다.// axios.tsimport axios from 'axios';// 인증이 필요한 요청을 위한 인스턴스const authApi = axios.create({ baseURL: process.env.NEXT_PUBLIC_BACKEND_URL});// 인증 인스턴스 추가authApi.interceptors.request.use((config) => { const token = localStorage.getItem('accessToken'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config;});export { authApi };// 응답 인터셉터 추가 ..

프로젝트를 진행하면서 토큰 만료 대응을 위해 다음과 같은 작업을 하다가 문제를 발견했다. // axios.tsimport axios from 'axios';// 인증이 필요한 요청을 위한 인스턴스const authApi = axios.create({ baseURL: process.env.NEXT_PUBLIC_BACKEND_URL});// 인증 인스턴스 추가authApi.interceptors.request.use((config) => { const token = localStorage.getItem('accessToken'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config;});export { a..

진행하던 프로젝트의 완성된 기능만이라도 배포하자는 백엔드의 말에, 배포용 파일을 만들고 오류를 수정하던 중 흥미로운 현상을 발견했다.// word/learn/page.tsxtype Props = { isReview?: boolean,}export default function WordLearnPage({ isReview=false }: Props) { const [currentWordIndex, setCurrentWordIndex] = useState(0); ...}단어 학습 페이지인 WordLearnPage를 복습 페이지에서도 재사용하기 위해, isReview라는 값을 props로 받을 수 있도록 코드를 작성했다. //word/review/page.tsxexport default function ..

본인은 Next.js 14 버전을 쓰다가 15버전으로 업데이트한 뒤 기존처럼 작업을 진행하던 중, 예상치 못한 오류를 마주했다.// pr/[studyId]/page.tsxtype Props = { params: { studyId: string, }}export default function PRPage({ params }: Props) { const { studyId } = params; ...} 위 코드처럼 params 타입을 정의하고, 컴포넌트 내부에서 studyId를 구조분해 할당하여 사용하려 했다.그런데 다음과 같은 TypeScript 오류가 발생했다. Type 'Promise' is not assignable to type '{ studyId: string; }'. Property ..

프로젝트 진행 중 클라이언트 컴포넌트에서 useRouter()를 사용하면  NextRouter was not mounted라는 오류가 떴다.해당 오류는 useRouter() 훅이 서버 사이드에서 호출될 때 발생하는 오류이다. "use client";import { useRouter } from "next/router";export default function RecentActivities() { const router = useRouter(); ... return (...);};내가 작성한 코드를 보면 코드의 상단에 "use client"를 적어주어 클라이언트 컴포넌트로 변경했다.그렇다면 클라이언트 사이드에서 useRouter()가 호출되었기 때문에 문제가 없어야 하는데 왜 오류가 발생한 걸까? ..

Tanstack Query(예전 명칭: React Query)는 데이터 패칭, 캐싱, 동기화 및 상태 관리 라이브러리다. 입대 전에 학교 선배들과 했던 프로젝트에서는 상태 관리할 때 Redux를 사용했다.그런데, 데이터를 가져올 때 세 가지 동작(loading, error, success)에 대한 코드를 다 작성해야 하니 코드량에 대한 부담이 엄청났다. 그래서 이번 프로젝트에서는 코드량의 부담이 적은 Tanstack Query를 사용했다.[특징]1) 데이터 패칭과 캐싱Tanstack Query의 큰 장점인데, 데이터를 요청하고 응답을 캐시하여 동일한 요청에 대해 반복적으로 서버와 통신하지 않도록 한다.사용자가 매우 빠른 속도로 컨텐츠를 볼 수 있어 UX 증대 2) 자동 리패치여러 데이터 상태를 제공하기에..

Auth.js(이전 명칭: NextAuth.js)는 Next.js에서 인증 시스템을 구현하기 위해 설계된 오픈 소스 라이브러리다. 장점Login Provider로 구글, 네이버, 카카오 등의 소셜 로그인 등을 지원하기에 간편 로그인을 쉽게 구현할 수 있다.Credential Provider로 기본적인 로그인, 로그아웃을 지원하고 로그인에 따른 쿠키를 관리하기 쉽다.위의 장점들 때문에 프로젝트에서 인증 시스템을 구현할 때 Auth.js를 사용했다.이제 설치 방법과 구성요소, 사용법에 대해 알아보자.1. 설치$ npm i next-auth@beta위의 명령어로 auth.js 설치한다.@auth/core 관련 작업은 Auth.js가 알아서 처리하기에 굳이 직접 설치할 필요는 없다. npx auth secret..