#Frontend

배포된 프론트엔드 애플리케이션의 에러를 정확하게 분석하기 위해 Sentry SDK를 연동하고, 보안 유출 없이 소스맵(Source Maps)을 업로드하는 빌드 파이프라인 구축 방법.

TypeScript 4.9에 도입된 satisfies 연산자의 도입 배경과, 기존에 불안정하게 객체 타입을 캐스팅하던 타입 단언(as) 및 엄격한 타입 지정(Annotation) 방식과의 근본적인 차이에 대한 분석.

기존에 Popper.js나 Floating UI 같은 대형 자바스크립트 라이브러리에 의존해야만 했던 툴팁과 팝오버 위치 계산을 브라우저 네이티브 CSS 사양인 Anchor Positioning으로 깔끔하게 바꾼 경험.

백엔드는 마이크로서비스로 분리하면서 프론트는 왜 여전히 거대한 모놀리스일까? 마이크로프론트엔드가 해결하는 문제와 실전 적용법을 정리했다.

미디어 쿼리로 반응형 컴포넌트를 만들다가 한계에 부딪힌 적 있어? @container가 그 문제를 어떻게 해결하는지, 실제 카드 컴포넌트 예시로 완전히 뜯어봤다.

CSS 애니메이션만으로 페이지 전환을 자연스럽게 만들 수 있다고? document.startViewTransition() 한 줄이 바꾸는 UX를 직접 확인해봐.

결제 플로우의 상태를 if문과 boolean 플래그로 관리하다 버그 지옥에 빠졌다. XState의 상태 머신으로 불가능한 상태를 원천 차단한 경험.

내 서비스를 키보드만으로 써보려다 탭이 엉뚱한 곳으로 날아갔다. 웹 접근성을 실제로 개선하면서 배운 것들을 정리했다.

백엔드 API가 준비되지 않아 프론트엔드 개발이 멈추는 문제를 MSW(Mock Service Worker)로 해결했다. 네트워크 레벨 API 모킹의 원리와 실전 패턴.

HTML5 Drag and Drop API로 만든 칸반 보드가 네이버 웨일에서만 동작하지 않았다. 브라우저 제스처가 네이티브 드래그 이벤트를 가로채는 문제, dnd-kit의 Pointer Events 기반 아키텍처로 해결했다.

세 플랫폼 다 써봤는데, 가격, 속도, 기능 각각 장단점이 확실했다. 프로젝트 상황별로 어디를 써야 하는지 정리했다.

`window.addEventListener('scroll')`로 무한 스크롤을 구현하면 성능이 박살 납니다. Intersection Observer API로 리팩토링하여 CPU 사용량을 90% 줄이는 방법.

쇼핑몰 목록에서 상품을 보고 뒤로가기를 눌렀는데, 스크롤이 초기화되어 사용자가 이탈했습니다. SPA와 Next.js에서 스크롤 복원(Scroll Restoration) 문제를 해결한 삽질기를 공유합니다.

사용자가 '앱이 느리다', '고장 났다'고 느끼는 진짜 이유는 API 속도가 아니라 불친절한 UI 때문입니다. 덜덜거리며 깜빡이는 화면 대신 스켈레톤 UI를 도입하고, alert() 창 대신 우아한 에러 처리를 구현하여 UX를 개선한 경험을 공유합니다.

React 콘솔에 뜨는 'unique key prop' 경고, 귀찮아서 index로 때우셨나요? 그 사소한 습관이 입력 폼 데이터를 뒤죽박죽으로 만들고 사용자를 미치게 만듭니다. Virtual DOM의 동작 원리와 함께 왜 index를 key로 쓰면 안 되는지, 제 '삽질' 경험을 통해 파헤칩니다.

리액트가 혁신이었던 이유. 진짜 DOM 조작이 느린 이유(Reflow/Repaint)와 Virtual DOM의 '더블 버퍼링' 전략, 그리고 React Fiber가 가져온 혁명.

로딩이 3초 넘으면 사용자의 53%가 이탈합니다. 구글이 중요하게 보는 3가지 지표(LCP, INP, CLS)와 최적화 기법.

시각 장애인, 마우스가 고장 난 사용자, 그리고 미래의 나를 위한 배려. `alt` 태그 하나가 만드는 큰 차이.

클래스 이름 짓기 지치셨나요? HTML 안에 CSS를 직접 쓰는 기괴한 방식이 왜 전 세계 프론트엔드 표준이 되었는지 파헤쳐봤습니다.

최신 문법(ES6+)을 구형 브라우저(IE)가 알아듣게 번역해주는 통역사. 컴파일러와는 묘하게 다른 트랜스파일러의 세계.

React의 영원한 숙제, 상태 관리. 할아버지 컴포넌트에서 손자 컴포넌트로 데이터를 줄 때 왜 전역 상태(Redux, Zustand)를 써야 할까?

서버 사이드 렌더링(SSR)의 핵심 과정. 메말라 비틀어진 HTML(정적)에 수분(JS)을 공급해서 생동감 넘치는 앱(인터랙션)으로 만드는 마법.

웹이 앱처럼 부드러워진 비결(SPA)과 옛날 방식(MPA)의 장단점. 그리고 이 둘을 합친 넥스트(Next.js)의 등장.

진짜 집을 부수고 다시 짓는 건 비쌉니다. 설계도(가상돔)에서 미리 그려보고 바뀐 부분만 공사하는 '똑똑한 리모델링'의 기술.

버튼을 눌렀는데 부모 DIV까지 클릭되는 현상. 이벤트는 물방울처럼 위로 올라갑니다(Bubbling). 반대로 내려오는 캡처링(Capturing)도 있죠.

HTML은 그저 글자일 뿐입니다. 브라우저가 이걸 이해하고 조작하려면 '트리 구조의 객체(DOM)'로 바꿔야 합니다.

MVC에서 Controller가 너무 뚱뚱해졌습니다. Presenter/ViewModel로 분리하고, Data Binding으로 자동 업데이트하는 현대 프론트엔드의 핵심 패턴.

유닛 테스트가 다 통과해도 배포하면 에러가 나는 이유는 뭘까요? 사용자가 실제로 사용하는 흐름 그대로를 검증하는 E2E(End-to-End) 테스트가 필요합니다. Cypress와 Playwright의 장단점 비교, 깨지기 쉬운(Flaky) 테스트를 방지하는 전략, 그리고 테스트 피라미드 속 E2E의 역할을 정리합니다.

Custom Hook은 React의 가장 강력한 무기지만, 잘못 사용하면 오히려 독이 됩니다. 단순히 로직을 옮겨 적는 것을 넘어, '상태(State)'와 '이펙트(Effect)'를 분리하고 재사용 가능한 'Headless UI' 패턴을 설계하는 방법을 심도 있게 다룹니다.

React나 Next.js 프로젝트에서 `.module.css`를 사용할 때 클래스 이름이 해시값으로 바뀌어 스타일이 적용되지 않는 문제, 겪어보셨나요? CSS Modules의 작동 원리인 'Scoping' 개념부터 `composes`를 활용한 스타일 상속, 그리고 TypeScript와 함께 쓸 때의 팁까지 완벽하게 정리했습니다.

Context API를 사용할 때마다 앱이 느려지는 경험, 해보셨나요? Provider의 Value가 바뀔 때 모든 하위 컴포넌트가 리렌더링되는 근본적인 이유인 '객체 참조' 문제와 React reconciler의 작동 방식을 분석합니다. 이를 막기 위한 3가지 솔루션(State 분리, Memoization, Dispatch 분리)과 Zustand/Recoil 같은 외부 라이브러리로의 마이그레이션 기준을 명확히 제시합니다.

React에서 `count && <Component />`를 썼을 때 의도치 않게 숫자 0이 화면에 출력되는 현상, 다들 겪어보셨죠? JavaScript의 단락 평가(Short-Circuit Evaluation)와 Falsy 값의 특성 때문에 발생하는 이 버그의 원인을 심층 분석하고, 3가지 확실한 해결책(비교 연산자, 이중 부정, 삼항 연산자)과 React Native에서의 크래시 위험성까지 상세히 다룹니다.

Next.js 13 이상 App Router 환경에서 가장 빈번하게 마주치는 에러 중 하나입니다. 클라이언트 컴포넌트('use client')에 async 키워드를 붙이면 왜 에러가 발생하는지, React의 렌더링 메커니즘 관점에서 깊이 있게 분석하고, 이를 해결하기 위한 3가지 핵심 디자인 패턴(Container-Presenter, useEffect, React Query)을 상세한 코드 예제와 함께 정리해봤습니다.

React 성능 최적화의 첫걸음은 렌더링 규칙을 정확히 이해하는 것입니다. 부모 컴포넌트가 업데이트될 때 자식 컴포넌트의 불필요한 렌더링을 막는 React.memo, useMemo, Context API 최적화, 그리고 React 19 Compiler의 미래를 정리합니다.

빨간색 에러 메시지를 보고 당황하셨나요? 브라우저가 당신을 괴롭히는 게 아니라 보호하고 있는 겁니다.

분명히 클래스를 적었는데 화면은 그대로다? 개발자 도구엔 클래스가 있는데 스타일이 없다? Tailwind 실종 사건 수사 일지.