number-flow를 구형 브라우저로 이식하기: 다섯 가지 결정과 두 가지 번복
number-flow가 애니메이션을 켜는 최소 버전은 Chrome 125, Safari 17.2다. 이 하한을 Chrome 66과 WebKit 16.4까지 내리는 포크를 만들면서 내린 결정들과, 뒤집게 된 판단 두 가지, 그리고 자동 강등을 포기한 Safari 버그 조사의 기록.
20 POSTS
Frontend 1
typescript@7을 설치하면 벌어지는 일들: 블로그 모노레포 마이그레이션 기록
pnpm lint가 12분 32초 걸리던 모노레포에 typescript 7.0.2를 넣어봤다. 타입체크는 조용히 지나갔는데 next build가 깨졌고, lint는 크래시했다. eslint와 prettier를 oxlint와 oxfmt로 갈아탄 하루의 연쇄 반응과 전후 실측 기록. 미리 말해두면, 빌드는 빨라지지 않았다.
- ◆ 프론트엔드 개발자가 알아야 할 쿠버네티스
오토스케일링은 자동이지만 즉시가 아니다: HPA의 시간을 구간별로 실측한 기록
트래픽을 12배로 올리고 새 파드가 첫 요청을 받기까지 31.5초. 그 31.5초의 내역서를 스톱워치로 뽑았다. 감지 창이 지배하는 구조, 배포 직후 5분 창에서 오토스케일러가 눈을 잃는 조건, 안정화 창의 계단, 메모리 HPA가 Node에서 불발되는 이유, KEDA의 선제 확장까지. 프론트엔드 개발자를 위한 쿠버네티스 시리즈의 다섯 번째 편이다.
- ◆ 프론트엔드 개발자가 알아야 할 쿠버네티스
파드는 어떻게 종료되는가: 배포 중 에러의 원인과 해결을 실측한 기록
코드를 한 줄도 바꾸지 않은 배포에서도 에러는 샌다. 롤링 배포 중 새는 실패를 유형과 시각까지 태깅해 원인 네 가지를 부검하고, 처방을 한 층씩 얹어 0으로 만들기까지의 실측 기록이다. Next.js의 종료 코드 원문과 인질 드레인, CrashLoopBackOff의 실제 시간표까지. 프론트엔드 개발자를 위한 쿠버네티스 시리즈의 네 번째 편이다.
- ◆ 프론트엔드 개발자가 알아야 할 쿠버네티스
트래픽은 어떻게 내 파드에 도착하는가: ClusterIP부터 port-forward까지
Service의 ClusterIP는 어느 기계에도 붙어 있지 않은 IP인데 curl은 어떻게 닿는가. iptables 규칙과 conntrack, EndpointSlice, 클러스터 DNS의 ndots, Gateway, port-forward까지, 요청이 파드에 도착하는 경로 전체를 kind 클러스터에서 직접 열어본 기록이다. 프론트엔드 개발자를 위한 쿠버네티스 시리즈의 세 번째 편이다.
- ◆ 프론트엔드 개발자가 알아야 할 쿠버네티스
내 Next.js 앱은 어떻게 파드가 되는가: 컨테이너와 파드를 직접 열어본 기록
같은 Next.js 앱인데 이미지 하나는 1.72GB, 하나는 208MB였다. 사라진 1.5GB를 레이어에서 역추적하고, 컨테이너가 격리된 프로세스라는 것을 PID와 cgroup 파일로 직접 확인한다. 프론트엔드 개발자를 위한 쿠버네티스 시리즈의 두 번째 편이다.
- ◆ 프론트엔드 개발자가 알아야 할 쿠버네티스
프론트엔드 개발자를 위한 쿠버네티스 개념 지도: 파드에서 오토스케일러까지
SSR을 운영하는 프론트엔드 개발자가 마주치는 쿠버네티스 용어와 구조를 실무 흐름 순서로 정리했다. 클러스터의 전체 구조부터 배포, 파드의 상태와 자원, 트래픽 경로, 오토스케일링까지. 시리즈의 첫 편이자 이후 편들의 참조 지도다.
- ◆ 프론트엔드 개발자가 알아야 할 쿠버네티스
Node.js 파드는 왜 그 크기인가: NODE_OPTIONS부터 파드 수까지 직접 재본 사이징
같은 워크로드에 GC 튜닝 플래그 한 줄을 붙였더니 peak RSS가 201MB에서 593MB로 뛰었다. 살아있는 데이터는 그대로였다. 왜 그게 당연한 결과인지 V8 New Space를 직접 측정해 역추적하고, 프론트엔드 개발자가 Node.js 파드를 사이징하는 세 축을 정리한다.
프론트엔드는 어디서 왔고, 에이전트 이후 어디로 가는가
층은 왜 쌓였고, 왜 서버로 돌아왔고, 에이전트 이후에도 스택이 남는 이유는 무엇인가. 그리고 스택이 이기는 것과 그 스택을 아는 사람의 가치는 왜 별개인가
React cache() 딥다이브: 소스 코드로 읽는 요청 단위 메모이제이션
React cache() 함수의 모든 이상한 규칙은 30여 줄짜리 구현에서 직접 따라 나온다. dispatcher, getCacheForType, WeakMap/Map 트리를 소스 레벨로 따라가며 요청 단위 메모이제이션의 동작을 끝까지 본다.
오래 쓸 수 있는 패키지는 무엇이 다른가
좋은 패키지는 기능뿐 아니라 의존성, 버전업, 호환성, 릴리즈 정책까지 사용자 친화적이어야 한다.
PR diff에서는 보이지 않는 비용: 우리는 사용자가 받는 코드를 리뷰하고 있지 않다
코드 리뷰가 놓치는 bundle 비용, PR에 어떻게 띄울 것인가.
- ◆ 디렉티브 딥다이브
'use cache' 디렉티브 딥다이브: 캐시 경계의 끝까지
"use cache" 한 줄이 만드는 빌드 타임 변환, 캐시 키 직렬화, ResumeDataCache, cacheHandler, 그리고 Cache Components까지
- ◆ 디렉티브 딥다이브
'use client' 디렉티브 딥다이브: 클라이언트 경계의 끝까지
"use client" 한 줄이 만드는 모듈 경계, 빌드 타임 변환, Flight 직렬화, 그리고 성능까지
- ◆ Next.js의 현주소
왜 여전히 Next.js를 쓰는가
기술 우위보다 강한 전환 비용
- ◆ 디렉티브 딥다이브
React 서버 함수 딥다이브: "use server"의 끝까지
"use server" 한 줄 뒤에서 무슨 일이 벌어지고 있는가?
Infinite Scroll의 몰락 — Google은 왜 무한 스크롤을 걷어냈는가
무한 스크롤이 UX, 성능, 접근성, 그리고 법률의 관점에서 어떻게 재평가되고 있는지 살펴본다
React Compiler 딥다이브: 원리부터 결과물까지
React Compiler가 코드를 어떻게 분석하고, 무엇을 만들어내는지 파이프라인부터 결과물까지 깊이 파헤쳐본다.
AI가 코드를 짜는 시대, 프론트엔드 엔지니어링은 어디로 가는가
AI 코딩 도구가 바꾸는 건 개발자가 아니라, 개발자가 하던 일의 형태다.
IntersectionObserver 싱글톤 패턴과 WeakMap으로 메모리 누수 방지하기
수백 개의 요소를 효율적으로 관찰하면서 메모리 누수도 방지하는 방법