프론트엔드·2026년 3월 26일
Container Queries: 미디어 쿼리를 넘어서
미디어 쿼리로 반응형 컴포넌트를 만들다가 한계에 부딪힌 적 있어? @container가 그 문제를 어떻게 해결하는지, 실제 카드 컴포넌트 예시로 완전히 뜯어봤다.
#Container Queries#CSS#Responsive Design#Frontend
개발과 기술에 대한 이야기를 기록합니다.
미디어 쿼리로 반응형 컴포넌트를 만들다가 한계에 부딪힌 적 있어? @container가 그 문제를 어떻게 해결하는지, 실제 카드 컴포넌트 예시로 완전히 뜯어봤다.
CSS 애니메이션만으로 페이지 전환을 자연스럽게 만들 수 있다고? document.startViewTransition() 한 줄이 바꾸는 UX를 직접 확인해봐.
결제 플로우의 상태를 if문과 boolean 플래그로 관리하다 버그 지옥에 빠졌다. XState의 상태 머신으로 불가능한 상태를 원천 차단한 경험.
내 서비스를 키보드만으로 써보려다 탭이 엉뚱한 곳으로 날아갔다. 웹 접근성을 실제로 개선하면서 배운 것들을 정리했다.
한국어로만 서비스하던 블로그에 영어를 추가하면서 next-intl을 도입했다. App Router 환경에서 다국어를 구현하며 겪은 시행착오와 패턴.
React 개발 초기, 데이터를 5단계 깊이로 전달하다가 멘붕에 빠진 경험을 공유합니다. Prop Drilling이 왜 유지보수의 적인지, 그리고 Context API, Composition(합성), Zustand를 사용해 이 지옥에서 우아하게 탈출하는 3가지 실제 패턴을 정리합니다.
쇼핑몰 목록에서 상품을 보고 뒤로가기를 눌렀는데, 스크롤이 초기화되어 사용자가 이탈했습니다. SPA와 Next.js에서 스크롤 복원(Scroll Restoration) 문제를 해결한 삽질기를 공유합니다.
비동기 통신의 함정, 경쟁 상태(Race Condition)를 해결하는 과정을 담았습니다. 플래그 변수부터 AbortController까지, 탭 전환 시 발생하는 버그까지 잡는 법.
React의 setState가 비동기로 동작해서 겪었던 삽질과 해결 과정. 사학과 출신 창업자가 겪은 React 상태 관리의 미스터리를 풉니다.
React에서는 잘 돌아가던 코드가 Next.js로 옮기자마자 'window is not defined' 에러를 뿜으며 폭발했습니다. Next.js의 SSR/Hydration 원리를 통해 이 에러가 발생하는 근본적인 이유를 파헤치고, useEffect, typeof 체크, Dynamic Import 등 3가지 확실한 해결책을 제시합니다.
서버 컴포넌트를 클라이언트 컴포넌트 안에 import 했더니, DB 연결이 끊기고 에러가 폭발했습니다. Next.js App Router의 핵심인 'Composition Pattern'을 구멍 뚫린 도넛에 비유해 설명하고, Context Provider를 올바르게 분리하는 방법을 정리해봤습니다.
Next.js 13 App Router를 처음 쓸 때 가장 많이 하는 실수인 'use client 남발'을 막는 방법을 소개합니다. 서버 컴포넌트와 클라이언트 컴포넌트의 경계(Boundary)를 명확히 이해하고, 성능을 지키면서 인터랙션을 구현하는 실제 패턴을 다룹니다.
회원가입 후 프로필 이미지를 올리는 간단한 로직이었습니다. 그런데 왜 가끔 'User Not Found' 에러가 뜰까요? 자바스크립트의 비동기 처리와 Promise Waterfall 문제를 해결한 과정을 공유합니다.
사용자가 '앱이 느리다', '고장 났다'고 느끼는 진짜 이유는 API 속도가 아니라 불친절한 UI 때문입니다. 덜덜거리며 깜빡이는 화면 대신 스켈레톤 UI를 도입하고, alert() 창 대신 우아한 에러 처리를 구현하여 UX를 개선한 경험을 공유합니다.
React 콘솔에 뜨는 'unique key prop' 경고, 귀찮아서 index로 때우셨나요? 그 사소한 습관이 입력 폼 데이터를 뒤죽박죽으로 만들고 사용자를 미치게 만듭니다. Virtual DOM의 동작 원리와 함께 왜 index를 key로 쓰면 안 되는지, 제 '삽질' 경험을 통해 파헤칩니다.
`useEffect`로 관리자 페이지 접근을 막으려다 뚫릴 뻔했던 경험을 공유합니다. 클라이언트 사이드 보호의 위험성과 Next.js 미들웨어(Middleware)를 사용해 서버 레벨에서 안전하게 경로를 보호하는 방법, 그리고 Edge Runtime의 제약사항까지 깊이 있게 다룹니다.
멀쩡하던 이미지가 Next.js의 `<Image>` 컴포넌트를 쓰자마자 에러를 뿜어냈습니다. 단순한 설정 문제인 줄 알았지만, 알고 보니 Next.js가 서버 자원을 보호하기 위한 강력한 보안 장치였습니다. `remotePatterns` 설정 방법과 Image Optimization의 내부 동작 원리를 깊이 있게 파헤칩니다.
로컬에서는 잘 되던 API 키가 브라우저 콘솔에서는 `undefined`로 뜨는 현상. Next.js의 보안 철학인 'Server-Client Boundary'를 이해하지 못해 3시간을 삽질하고, 실수로 비밀 키를 노출할 뻔했던 아찔한 경험을 공유합니다.
