코드의 바다에서 항해하기

들어가며이번에 진행하고 있는 개인 프로젝트인 전시 공연을 한눈에 볼 수 있는 플랫폼에서 '좋아요 기능'을 구현하면서 마주한 문제들과 해결 과정을 공유합니다. 단순해 보이는 좋아요 기능이지만, 실제로는 상태 동기화, 에러 처리, 캐시 관리 등 고려할 것이 많았습니다.1. 요구사항 정리구현해야 할 기능: 좋아요 추가/취소 실시간 좋아요 상태 확인 (하트 버튼) 비로그인 사용자 처리 중복 추가 방지 여러 페이지에서 상태 동기화 (상세 페이지 ↔ 좋아요 목록)기술 스택: Next.js 16 (App Router), TanStack Query, TypeScript2. 왜 TanStack Query를 선택했는가?고민했던 방법들1) useState + useEffect 조합?useEffect(() => {fetch(..

🚨 문제 상황Next.js 16 App Router에서 Gallery Hub 개인프로젝트를 진행하던 중, sonner 라이브러리를 사용한 Toast 알림이 화면에 나타나지 않는 문제가 발생했습니다.// LoginForm.tsximport { toast } from "sonner";export function LoginForm() { const handleLogin = () => { // 로그인 성공 toast.success("로그인 성공!"); // 보이지 않음! }; return ( // ... 폼 UI );}분명히 코드는 실행되는데 (console.log로 확인), Toast가 화면에 렌더링되지 않았습니다. export default function RootLayout(..

Next.js에서 React Suspense 실전 적용기🤔 Suspense란?React의 Suspense는 컴포넌트가 렌더링되기 전에 필요한 데이터를 기다릴 수 있게 해주는 기능입니다.기존에는 각 컴포넌트에서 loading 상태를 관리했지만, Suspense를 사용하면 로딩 UI를 부모 레벨에서 선언적으로 처리할 수 있습니다.기존 방식 vs Suspense// 기존: 각 컴포넌트마다 로딩 처리function ExhibitionList() { const [loading, setLoading] = useState(true); if (loading) return 로딩 중...; return 전시 목록;}// Suspense: 선언적으로 처리로딩 중...}> 이번 글에서는 Next.js 프로젝트에 Su..