Knowledge Index — 지식 지도

I built a service and nobody came. How I implemented technical SEO in Next.js to drive organic traffic without a marketing budget.

I've wasted hours with direct fetch mocks or vi.mock() on axios, only to find the mock drifted from the real API. MSW intercepts at the network level and eliminates that problem. Here's everything from setup to Vitest and Storybook integration.

My Kanban board built with HTML5 Drag and Drop worked everywhere except Naver Whale. Browser gestures hijack native drag events. dnd-kit's Pointer Events architecture bypasses this entirely.

Tried to contribute to an open source project but gave up because there was no README. That's when I realized the true value of good docs.

Setting up a new Mac took 2 days. With dotfiles and automation scripts, it now takes 30 minutes to get a fully configured dev environment.

Regex looked like alien language until I learned 20 practical patterns. Now text processing that took 50 lines fits in one.

Writing form validation from scratch led to edge case hell. React Hook Form + Zod is the optimal combination for type-safe forms.

Switched from Redux to Zustand and cut boilerplate by 90%. But using it properly requires understanding some key patterns.

SSR pages showed blank screens for 3 seconds during data loading. Streaming SSR sends ready parts first, dramatically improving perceived speed.

Creating API routes, fetch calls, loading states... Too much code for one form. Server Actions dramatically simplified form handling.

Passing a function as props from a Server Component broke everything. Understanding the serialization boundary revealed RSC's true patterns.

Images were 80% of my page weight. Format conversion to WebP/AVIF and responsive images dramatically improved loading speed.

Making your app work offline requires understanding Service Worker caching strategies. Cache-first, network-first, and stale-while-revalidate explained.

Parsing a CSV file froze the entire UI. Web Workers run heavy computation in a separate thread, keeping the UI responsive.

Imported one lodash function but got the entire library in my bundle. Making tree shaking actually work requires understanding ES modules.

2MB bundle meant 5-second initial load. Lazy loading and code splitting load only what's needed, cutting it to 2 seconds.

Manual builds and deploys led to shipping bugs to production. GitHub Actions automated my pipeline and eliminated human error.

Serving static files from your server works at small scale, but traffic spikes can bring it down. S3 + CloudFront separates static delivery from your app server for any scale.

I've deployed on all three platforms. Each has clear strengths in pricing, speed, and features. Here's how to choose for your project.

Server in the US meant slow responses for Korean users. Cloudflare Workers runs code at 300+ edge locations, cutting latency dramatically.