Knowledge Index — 지식 지도

Hit the limits of media queries when building responsive components? Here's how @container solves the problem, broken down with real card component examples.

Can CSS animations alone make page transitions feel native? See how a single document.startViewTransition() call transforms your UX.

Managing payment flow state with if-statements and boolean flags led to bug hell. XState's state machines made impossible states truly impossible.

I tried navigating my own service with just a keyboard and tab focus jumped everywhere. What I learned fixing accessibility issues in practice.

Adding English to a Korean-only blog with next-intl. Lessons from implementing i18n in Next.js App Router, including routing, message files, and Server Components.

I share how I created a maintenance nightmare by passing props down 5 levels. Learn why Prop Drilling kills productivity and how to escape using Context API, Component Composition, and Zustand.

Users rage-quit my shopping app because hitting 'Back' reset their scroll position. Here's how I fixed Scroll Restoration in Next.js SPA.

Network requests don't always arrive in order. Here is how I fixed the Race Condition in my search bar using Cleanup Functions and AbortController.

I thought React was broken because console.log(state) showed old values. Here is why React batches updates and acts asynchronously.

My React code crashed with 'window is not defined' in Next.js. Here's why Server Side Rendering (SSR) breaks browser APIs and 3 robust ways to fix it (useEffect, typeof check, Dynamic Import).

I imported a Server Component inside a Client Component, and it broke everything. Here’s how to use the Composition Pattern (Donut Pattern) to fix it and correctly separate Context Providers.

Stop adding 'use client' to every file. I explain the clear boundary between Server and Client Components, and how to implement interactivity without sacrificing performance in Next.js App Router.

It was a simple logic: Create User -> Upload Image. Why did it fail randomly? Here's how I fixed async race conditions and optimizing performance with Promise.all.

Users think your app is broken not because the API is slow, but because the UI is rude. I share how I replaced flickering loading screens with Skeleton UI and swapped alert() boxes for graceful Error Boundaries to dramatically improve UX.

Did you silence the 'unique key prop' warning with 'index' because it was annoying? That habit is destroying your form data and driving users crazy. I share my debugging nightmare where inputs swapped values and focus jumped around, explaining specificially why 'index' keys are evil in dynamic lists.

I share how I almost got hacked by protecting admin pages with `useEffect`. Learn why client-side protection is dangerous and how to use Next.js Middleware to securely protect routes at the server level, including a deep dive into Edge Runtime limitations.

My images were fine until I used Next.js's `<Image>` component, which immediately threw errors. I realized this wasn't just a config issue, but a security measure to protect server resources. I explain how to configure `remotePatterns` and dive deep into how Next.js Image Optimization works under the hood.

My API key worked fine locally but showed `undefined` in the browser console. I share my 3-hour debugging struggle caused by misunderstanding Next.js's 'Server-Client Boundary' and how I almost leaked my secret keys.