Knowledge Index — 지식 지도

Users found the broken signup before I did after a late-night deploy. How I set up Playwright E2E tests and integrated them into CI to prevent this.

Tests that inspect internal component state break on every refactor. Testing Library's core philosophy is to test only what the user actually does. Here's why getByRole is the best default, what separates userEvent from fireEvent, and the most common anti-patterns to avoid.

Frontend development blocked by unfinished APIs. MSW intercepts requests at the network level so you can build and test without a real backend.

Unit tests all green, but QA finds a bug in three clicks. That's the E2E gap. Here's everything you need to automate real browser scenarios with Playwright — from first test to CI integration.

Spent a whole night debugging because I confused vi.mock() and vi.spyOn(). Here's a practical deep dive into Vitest's advanced features — mocking strategies, snapshot testing, and why your coverage numbers might be lying to you.

My trial-and-error journey introducing frontend testing. Practical patterns for testing React components with Vitest and Testing Library.

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.

Public APIs face unexpected traffic floods without proper protection. Rate limiting, API key management, and IP restrictions to protect your API.

Started with admin/user roles but requirements grew complex. When RBAC isn't enough, ABAC provides attribute-based fine-grained control.

With 3 services needing separate logins, SSO unified authentication. One login grants access to everything.

Password resets were half my support tickets. Passkeys eliminate passwords entirely, but implementation is more complex than expected.

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