개발하며 겪은 판단을 적어요
React, Next.js, 브라우저 생태계와 UI 개발 흐름을 다룹니다.
현재 6개의 발행 글이 이 주제에 속해 있습니다.
Next.js App Router에서 'use client' 한 줄이 서버·클라이언트 영역을 가르면 번들 크기, 데이터 페칭, 상태 관리 전략이 전부 흔들린다. 경계를 잘못 그으면 번들 비대화와 중복 페칭이 뒤늦게 한꺼번에 터진다. 이 메모는 계층별 책임과 데이터 소유권을 기준으로 경계를 다시 그리는 판단 원칙과, 이미 잘못 그어진 경계를 리팩터링하는 우선순위를 정리한다.
한글 웹 폰트는 글리프 하나당 용량이 커서 로딩을 지연시키고, 폰트가 늦게 뜰수록 CLS 지표가 요동친다. 이 글에서는 subset으로 글리프를 걸러내고 preload 타이밍을 잡고 font-display 전략을 고르는 과정을 실제 수치와 함께 살펴본다. Next.js의 next/font가 자체적으로 처리하는 일과 처리하지 않는 일을 구분해, 퍼포먼스 예산을 넘지 않으면서 텍스트가 안정적으로 렌더링되는 폰트 파이프라인을 설계하는 방법을 다룬다.
LCP 개선을 위해 무작정 이미지를 압축하고 CDN을 도입하기 전에, next/image의 sizes 속성과 priority 플래그가 실제로 어떤 영향을 미치는지 정량적으로 이해해야 한다. 이 글은 next/image 설정값이 LCP에 미치는 영향을 실제 코드 레벨에서 분석하고, 이미지 CDN이 진짜 필요한 상황과 불필요하게 최적화를 도입했다가 역효과를 보는 사례까지 함께 다룬다.
App Router 기반 블로그에서 generateMetadata 누락, OG 이미지 경로 오류, JSON-LD 렌더링 실패, sitemap 구성 실수 등 실제 배포 후에야 드러나는 SEO 취약 지점을 진단하고 수정하는 실전 체크리스트.
타입스크립트 프로젝트에서 CK 메트릭(WMC, DIT, NOC, CBO, RFC, LCOM)을 측정하는 CLI 도구 Artie-lens를 활용해 CI 파이프라인에 설계 품질 게이트를 구축하는 방법을 다룬다. 코드 복잡도와 결합도가 임계치를 넘으면 자동으로 빌드를 실패시켜 기술 부채 누적을 사전에 차단하는 실전 가이드.
AI가 웹사이트를 코딩한다는 시대, CSS를 단순한 취미로 치부하는 시선이 늘고 있다. 하지만 AI가 생성한 코드가 깨지는 순간, 스태킹 컨텍스트와 명시도 전쟁을 해결하는 건 여전히 개발자의 몫이다. CSS는 단순한 스타일링이 아니라 사용자 경험의 근간이 되는 실용적 엔지니어링이다.