개발일지/Next.js 10

[throttle] 게시물 리스트 무한 스크롤 (throttle 적용)

👩‍🏭 게시물 리스트 무한 스크롤 (throttle 적용) 1. 작업 배경 프로젝트에서 피드 리스트(FeedList)를 무한 스크롤 방식으로 구현하고 있었다.사용자가 스크롤을 내리면 마지막 요소를 감지해 fetchNextPage를 호출하고, 새로운 데이터를 불러오는 구조였다.하지만 개발 과정 중 테스트를 하면서 스크롤을 빠르게 내릴 때 API 요청이 과도하게 중복 호출되는 현상을 발견했다.이는불필요한 서버 트래픽 증가클라이언트 성능 저하UX 부드러움 감소등 여러 문제를 초래할 수 있음을 인지하게 됐다.특히 모바일 환경처럼 빠른 스크롤이 빈번한 상황에서는 이 문제가 더욱 두드러질 수 있었다.이 문제를 해결하기 위해 IntersectionObserver + fetchNextPage 호출을 제어할 수 있는..

[Redux Toolkit] Next.js + TypeScript에서 그림판 만들기 - #4 (그림판 저장 stageRef null 오류 & 전역 상태관리 리팩토링)

🫠 [Redux Toolkit] Next.js + TypeScript에서 그림판 만들기 - #4 (그림판 저장 stageRef null 오류 & 전역 상태관리 리팩토링)  2025.02.21 - [개발일지/Next.js] - [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기) [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기)🎨 Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기)2025.02.20 - [개발일지/Next.js] - [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가) [Konva.js..

[TanStack Query/Intersection Observer] 게시물 리스트 무한 스크롤 구현하기

📄 [TanStack Query/Intersection Observer] 게시물 리스트 무한 스크롤 구현하기 1. TanStack Query란?TanStack Query(구 React Query)는 데이터 패칭, 캐싱, 동기화를 자동으로 관리해주는 라이브러리다.기본적으로 서버 상태 관리(Server State Management)에 특화된 기능을 제공한다. ✅ TanStack Query 주요 기능데이터 캐싱: API 요청 결과를 자동으로 캐싱하여 동일한 요청 반복 방지자동 리페칭: 데이터가 변경되면 필요한 부분만 새로 가져오기배경 데이터 동기화: 사용자가 보지 않는 동안에도 최신 상태 유지무한 스크롤 및 페이지네이션 지원이번 구현에서는 useInfiniteQuery를 활용하여 무한 스크롤 페이지네이션을..

[Client-side Navigation] Next.js 13에서 페이지 이동 및 새로고침 감지하기

🏃‍♂️ [Client-side Navigation] Next.js 13에서 페이지 이동 및 새로고침 감지하기   Next.js를 사용하여 일기 작성 기능을 개발하면서, 작성 도중 페이지를 벗어나려 할 때 임시 저장을 유도하는 모달을 추가해야 했다.Next.js 12까지는 next/router를 사용해서 쉽게 구현 가능하다던데, Next.js 13부터 next/navigation을 사용하게 되면서 next/router의 이벤트 감지 기능이 사라져, 페이지 이동을 직접 감지하는 방법을 찾아야 했다.  💡 목표사용자가 일기 작성 중에 페이지를 벗어나려 할 때 확인 모달을 띄운다.Next.js 13에서 router.push, router.replace, popstate, beforeunload 등을 활용하..

[SSR/CSR] Next.js에서 초기 스타일이 깜빡이는 FOUC 문제 해결하기

👩‍🔧 Next.js에서 초기 스타일이 깜빡이는 FOUC 문제 해결하기2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용) [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)🎨 Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)다이어리 프로젝트이기 때문에 사용자 맞춤형 UI를 제공하여 개인적인 꾸미기와 사용자 환경을 최적화하는 기능을 추가했다.ayeongjin.tistory.com2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로..

[LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #2 (폰트 및 폰트사이즈 적용)

🖋️  Next.js + TypeScript 에서 로컬스토리지에 저장하기 - #2 (폰트 및 폰트사이즈 적용)이전에는 멀티테마를 적용해서 사용자 맞춤형 컬러를 UI에 반영할 수 있도록 했다.2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용) [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)🎨 Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)다이어리 프로젝트이기 때문에 사용자 맞춤형 UI를 제공하여 개인적인 꾸미기와 사용자 환경을 최적화하는 기능을 추가했다.ayeongjin.tistory.com 이..

[LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)

🖍️ Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)다이어리 프로젝트이기 때문에 사용자 맞춤형 UI를 제공하여 개인적인 꾸미기와 사용자 환경을 최적화하는 기능을 추가했다. 이를 위해 전역 스타일 컬러 변경과 폰트 설정 기능을 구현했다  1. Tailwind CSS를 활용한 전역 테마 컬러 설정사용자는 원하는 테마 색상을 선택하여 자신의 다이어리를 커스터마이징할 수 있다. Tailwind CSS를 사용하여 CSS 변수(var(--color-500)) 기반으로 테마 컬러를 관리하도록 설정했다. ✅ Tailwind 설정 (tailwind.config.ts)Tailwind CSS는 tailwind.config.ts에서 사용자 정의 색상을 추가할 수 있도록 지원한다. 여기서 CSS 변수를 ..

[Konva.js] Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기)

🎨 Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기)2025.02.20 - [개발일지/Next.js] - [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가) [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가)🎨 Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가)2025.02.19 - [개발일지/Next.js] - [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #1 (Fabric.js vs Konva.js) [Konva.js] Next...

[Konva.js] Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가)

🎨 Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가)2025.02.19 - [개발일지/Next.js] - [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #1 (Fabric.js vs Konva.js) [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #1 (Fabric.js vs Konva.js)🎨 Next.js + TypeScript에서 그림판 만들기 (Fabric.js vs Konva.js) 1. 프로젝트 배경Next.js에서 그림판 기능을 구현하려고 처음에는 fabric.js를 사용했다.하지만 몇 가지 문제 때문에 리액트 친화적인 konva.jayeongjin.tistory.co..

[Konva.js] Next.js + TypeScript에서 그림판 만들기 - #1 (Fabric.js vs Konva.js)

🎨 Next.js + TypeScript에서 그림판 만들기 (Fabric.js vs Konva.js) 1. 프로젝트 배경Next.js에서 그림판 기능을 구현하려고 처음에는 fabric.js를 사용했다.하지만 몇 가지 문제 때문에 리액트 친화적인 konva.js로 전환했다. ❗️ Fabric.js의 문제점공식 문서에서 undo / redo 기능을 지원하지 않음 → _objects 같은 내부 비공식 API를 써야 해서 위험React에서 상태 관리하기 어려움 → 성능 최적화가 부족TypeScript 지원 부족 → 공식적으로 잘 문서화되지 않음 ✅ Konva.js를 선택한 이유React 친화적 (react-konva 사용)Undo/Redo 상태관리가 쉬움 (State 기반으로 관리)Canvas 기반으로 HTM..