Cross-cutting frontend topics, tooling, and DX Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 10-2026
article
Cloud Four의 코드 리뷰 방식
TAG: 가이드
Scott Vandehey가 Cloud Four의 코드 리뷰 문화를 소개합니다. 이 에이전시는 클라이언트 개발자 및 외부 계약자와 함께 작업하는 경우가 많아, 모든 production 변경 사항은 반드시 pull request를 통해 리뷰받아야 한다는 엄격한 규칙을 두고 있습니다. GitHub branch protection으로 이를 강제하며, 일부 시니어 개발자에게만 의존성 업데이트 같은 안전한 변경에 한해 bypass 권한을 부여합니다. 또한 lint 규칙 변경, 코드 이동, 무관한 버그 수정은 별도의 PR로 분리할 것을 권장합니다. 각 PR에는 변경 이유와 함께, 해당 기능을 처음 보는 리뷰어도 따를 수 있는 단계별 테스트 체크리스트를 포함해야 합니다.
Justin Duke가 Stripe에서 영감을 받은 Buttondown의 API versioning 시스템을 설명합니다. semver 대신 날짜 기반 버전 문자열(예: "2025-06-01")을 사용하며, 각 API 요청은 "X-API-Version" 헤더, API 키의 고정 버전, 시스템 기본값 순서로 버전을 결정합니다. transformation pipeline은 migration을 양방향으로 체인 적용하여, request는 현재 스키마로 변환해 route handler에 전달하고 response는 클라이언트가 기대하는 이전 형식으로 되돌립니다. 필드 이름 변경, 태그 배열에서 filter 객체로의 구조 변환, 전체 응답 트리를 재귀 탐색하는 TypeID migration, 중첩 필드 이동 등 실제 migration 사례도 상세히 다룹니다. 이 시스템은 18개월 동안 수정 없이 운영되며 대규모 인프라 변경을 지원했습니다.
Nicholas Zakas가 주요 서버 사이드 JavaScript 런타임 네 가지에서 fetch() 요청을 프록시하는 방법을 정리합니다. Node.js는 v22.21.0 및 v24.5.0부터 NODE_USE_ENV_PROXY=1 설정 시 HTTP_PROXY / HTTPS_PROXY 환경 변수로 프록시를 지원하며, 프로그래밍 방식으로는 undici의 ProxyAgent를 dispatcher 옵션으로 전달합니다. Deno는 Deno.createHttpClient()로 프록시 URL을 설정하고 client 옵션으로 fetch에 전달합니다. Bun은 fetch 옵션 객체에 proxy 문자열을 직접 지정합니다. 네이티브 프록시 지원이 없는 Cloudflare Workers의 경우, @humanwhocodes/proxy-fetch-server npm 패키지를 Node.js Docker 컨테이너에서 Durable Object로 바인딩해 우회하는 방법을 제시합니다.
Platformatic이 Intelligent Command Center(ICC)에 실험적인 Skew Protection 기능을 도입했습니다. CI/CD 파이프라인 변경 없이 Kubernetes 환경에 Vercel 스타일의 버전 고정을 제공합니다. 이 기능이 해결하는 문제는 새 버전 배포 시 기존 frontend를 로드한 사용자가 새 backend에 요청을 보내면서 React Server Components hydration 오류, API 계약 위반, TypeScript 타입 불일치가 발생하는 상황입니다. ICC는 "__plt_dpl" 쿠키를 통해 각 브라우저 세션을 시작 시점의 배포 버전에 고정하고, Kubernetes Gateway API의 HTTPRoute 규칙으로 트래픽을 라우팅합니다. 구버전 배포는 Active → Draining → Expired 상태를 거치며, Prometheus로 트래픽을 모니터링하고 설정된 유예 기간(기본 24시간) 또는 30분간 트래픽이 없으면 replica를 0으로 줄입니다.
Corbin Crutchley는 유일한 시니어 엔지니어가 떠난 PDRT에 frontend lead로 합류하면서 마주한 상황을 공유합니다. 불안정한 기반 위에 여러 차례 재작성된 프로젝트와 두 명의 주니어 엔지니어가 남아 있었습니다. 전면 재작성 대신 A/B 전환, view 임베딩, 페이지별 tech stack 전환 등을 활용해 기존 코드와 신규 코드를 동일 제품 안에 통합하는 incremental migration을 선택했습니다. iOS, Android, 웹 등 다양한 플랫폼의 코드 중복을 없애기 위해 TypeScript·HTML·CSS 기반 웹 기술로 통합하고, 공유 컴포넌트 레이어를 갖춘 monorepo로 전환했습니다. 결과적으로 6개월 내 재작성 완료, 1년 내 웹사이트 출시, 주요 클라이언트 앱 사용량 350% 증가라는 성과를 달성했습니다.
이 글에서는 Claude Code와 Cursor 양쪽에서 shell 명령이 실행되기 전 이를 가로채어, 에이전트가 npx vitest나 npx playwright test 대신 프로젝트의 커스텀 test runner를 사용하도록 강제하는 TypeScript hook 스크립트 구축 방법을 설명합니다. 가장 큰 과제는 두 플랫폼이 stdin으로 다른 JSON 구조를 보낸다는 점입니다. Claude Code는 PreToolUse 이벤트의 tool_input 안에 명령을 중첩하고, Cursor의 beforeShellExecution은 최상위 레벨에 명령을 위치시킵니다. hook은 두 입력을 정규화하고 regex로 차단 패턴을 매칭한 뒤, 플랫폼별 allow/deny 응답과 함께 올바른 yarn test:unit / test:e2e 스크립트를 안내하는 메시지를 반환합니다. Node.js 22.6+--experimental-strip-types를 활용해 빌드 단계 없이 TypeScript 파일 그대로 실행되며, 파싱 오류 시 fail-open으로 동작합니다.
Test Double 공동 창업자이자 현재 일본에서 1인 개발자로 활동하는 Justin Searls는, 2025년 2월 출시된 Claude Code(Sonnet 3.7부터 실용적 수준 도달)가 기존 copilot 스타일 도구와는 질적으로 다른 변곡점이라고 주장합니다. 그는 개발자를 스펙을 그대로 이행하는 "order taker"와 전체 소프트웨어 lifecycle과 비즈니스 가치를 고려하는 "야망 있는" 개발자로 구분하며, 전자는 약 9개월 안에 적응하지 못하면 도태될 것이라고 경고합니다. 핵심 논지는 에이전트 개발에서 아직 해결되지 않은 문제는 생성 속도가 아닌 verifiability(검증 가능성)라는 것입니다. 빠른 자동화 피드백 루프 없이는 에이전트가 제자리를 맴돌 뿐이라고 강조합니다. 또한 입문자에게는 LLM을 개인 튜터로 삼아 기초를 배우는 동시에 에이전트를 100% 활용할 것을 권하며, 안정적인 수입이 없는 경우 취업을 기다리기보다 가치 있는 개인 프로젝트를 처음부터 완성하는 경험을 쌓으라고 조언합니다.
Scott Vandehey가 Cloud Four의 코드 리뷰 문화를 소개합니다. 이 에이전시는 클라이언트 개발자 및 외부 계약자와 함께 작업하는 경우가 많아, 모든 production 변경 사항은 반드시 pull request를 통해 리뷰받아야 한다는 엄격한 규칙을 두고 있습니다. GitHub branch protection으로 이를 강제하며, 일부 시니어 개발자에게만 의존성 업데이트 같은 안전한 변경에 한해 bypass 권한을 부여합니다. 또한 lint 규칙 변경, 코드 이동, 무관한 버그 수정은 별도의 PR로 분리할 것을 권장합니다. 각 PR에는 변경 이유와 함께, 해당 기능을 처음 보는 리뷰어도 따를 수 있는 단계별 테스트 체크리스트를 포함해야 합니다.
Test Double 공동 창업자이자 현재 일본에서 1인 개발자로 활동하는 Justin Searls는, 2025년 2월 출시된 Claude Code(Sonnet 3.7부터 실용적 수준 도달)가 기존 copilot 스타일 도구와는 질적으로 다른 변곡점이라고 주장합니다. 그는 개발자를 스펙을 그대로 이행하는 "order taker"와 전체 소프트웨어 lifecycle과 비즈니스 가치를 고려하는 "야망 있는" 개발자로 구분하며, 전자는 약 9개월 안에 적응하지 못하면 도태될 것이라고 경고합니다. 핵심 논지는 에이전트 개발에서 아직 해결되지 않은 문제는 생성 속도가 아닌 verifiability(검증 가능성)라는 것입니다. 빠른 자동화 피드백 루프 없이는 에이전트가 제자리를 맴돌 뿐이라고 강조합니다. 또한 입문자에게는 LLM을 개인 튜터로 삼아 기초를 배우는 동시에 에이전트를 100% 활용할 것을 권하며, 안정적인 수입이 없는 경우 취업을 기다리기보다 가치 있는 개인 프로젝트를 처음부터 완성하는 경험을 쌓으라고 조언합니다.
Justin Duke가 Stripe에서 영감을 받은 Buttondown의 API versioning 시스템을 설명합니다. semver 대신 날짜 기반 버전 문자열(예: "2025-06-01")을 사용하며, 각 API 요청은 "X-API-Version" 헤더, API 키의 고정 버전, 시스템 기본값 순서로 버전을 결정합니다. transformation pipeline은 migration을 양방향으로 체인 적용하여, request는 현재 스키마로 변환해 route handler에 전달하고 response는 클라이언트가 기대하는 이전 형식으로 되돌립니다. 필드 이름 변경, 태그 배열에서 filter 객체로의 구조 변환, 전체 응답 트리를 재귀 탐색하는 TypeID migration, 중첩 필드 이동 등 실제 migration 사례도 상세히 다룹니다. 이 시스템은 18개월 동안 수정 없이 운영되며 대규모 인프라 변경을 지원했습니다.
Nicholas Zakas가 주요 서버 사이드 JavaScript 런타임 네 가지에서 fetch() 요청을 프록시하는 방법을 정리합니다. Node.js는 v22.21.0 및 v24.5.0부터 NODE_USE_ENV_PROXY=1 설정 시 HTTP_PROXY / HTTPS_PROXY 환경 변수로 프록시를 지원하며, 프로그래밍 방식으로는 undici의 ProxyAgent를 dispatcher 옵션으로 전달합니다. Deno는 Deno.createHttpClient()로 프록시 URL을 설정하고 client 옵션으로 fetch에 전달합니다. Bun은 fetch 옵션 객체에 proxy 문자열을 직접 지정합니다. 네이티브 프록시 지원이 없는 Cloudflare Workers의 경우, @humanwhocodes/proxy-fetch-server npm 패키지를 Node.js Docker 컨테이너에서 Durable Object로 바인딩해 우회하는 방법을 제시합니다.
Platformatic이 Intelligent Command Center(ICC)에 실험적인 Skew Protection 기능을 도입했습니다. CI/CD 파이프라인 변경 없이 Kubernetes 환경에 Vercel 스타일의 버전 고정을 제공합니다. 이 기능이 해결하는 문제는 새 버전 배포 시 기존 frontend를 로드한 사용자가 새 backend에 요청을 보내면서 React Server Components hydration 오류, API 계약 위반, TypeScript 타입 불일치가 발생하는 상황입니다. ICC는 "__plt_dpl" 쿠키를 통해 각 브라우저 세션을 시작 시점의 배포 버전에 고정하고, Kubernetes Gateway API의 HTTPRoute 규칙으로 트래픽을 라우팅합니다. 구버전 배포는 Active → Draining → Expired 상태를 거치며, Prometheus로 트래픽을 모니터링하고 설정된 유예 기간(기본 24시간) 또는 30분간 트래픽이 없으면 replica를 0으로 줄입니다.
Corbin Crutchley는 유일한 시니어 엔지니어가 떠난 PDRT에 frontend lead로 합류하면서 마주한 상황을 공유합니다. 불안정한 기반 위에 여러 차례 재작성된 프로젝트와 두 명의 주니어 엔지니어가 남아 있었습니다. 전면 재작성 대신 A/B 전환, view 임베딩, 페이지별 tech stack 전환 등을 활용해 기존 코드와 신규 코드를 동일 제품 안에 통합하는 incremental migration을 선택했습니다. iOS, Android, 웹 등 다양한 플랫폼의 코드 중복을 없애기 위해 TypeScript·HTML·CSS 기반 웹 기술로 통합하고, 공유 컴포넌트 레이어를 갖춘 monorepo로 전환했습니다. 결과적으로 6개월 내 재작성 완료, 1년 내 웹사이트 출시, 주요 클라이언트 앱 사용량 350% 증가라는 성과를 달성했습니다.
이 글에서는 Claude Code와 Cursor 양쪽에서 shell 명령이 실행되기 전 이를 가로채어, 에이전트가 npx vitest나 npx playwright test 대신 프로젝트의 커스텀 test runner를 사용하도록 강제하는 TypeScript hook 스크립트 구축 방법을 설명합니다. 가장 큰 과제는 두 플랫폼이 stdin으로 다른 JSON 구조를 보낸다는 점입니다. Claude Code는 PreToolUse 이벤트의 tool_input 안에 명령을 중첩하고, Cursor의 beforeShellExecution은 최상위 레벨에 명령을 위치시킵니다. hook은 두 입력을 정규화하고 regex로 차단 패턴을 매칭한 뒤, 플랫폼별 allow/deny 응답과 함께 올바른 yarn test:unit / test:e2e 스크립트를 안내하는 메시지를 반환합니다. Node.js 22.6+--experimental-strip-types를 활용해 빌드 단계 없이 TypeScript 파일 그대로 실행되며, 파싱 오류 시 fail-open으로 동작합니다.
Cloud Four의 코드 리뷰 가이드가 이번 주 피처 기사이며, 가장 유용한 통찰은 구조적입니다. 모든 PR은 무엇이 바뀌었는지뿐 아니라 왜 바뀌었는지를 설명해야 하며, 해당 기능을 처음 보는 리뷰어도 따를 수 있는 단계별 테스트 체크리스트를 포함해야 합니다. lint 변경, 코드 이동, 버그 수정을 별도 PR로 분리하는 이 규율이 소규모 에이전시가 클라이언트 개발자와 외부 계약자 사이에서도 일관성을 유지하는 비결입니다.
나머지 기사들은 아키텍처 사고가 중심입니다. Corbin Crutchley의 PDRT 경험담은 전면 재작성 대신 incremental migration을 선택하는 실용적 플레이북입니다. A/B 전환, view 임베딩, 페이지별 tech stack 전환을 통해 18개월 만에 사용량 350% 증가라는 성과를 달성했습니다. Buttondown의 날짜 기반 API versioning 시스템은 양방향 transformation pipeline을 통해 18개월간 무변경으로 스키마 진화를 지원했습니다. Platformatic의 Kubernetes Skew Protection은 Vercel 스타일의 버전 고정을 자체 호스팅 환경에 가져와, 구버전 frontend가 신버전 backend에 요청할 때 발생하는 hydration 오류를 해결합니다.
Nicholas Zakas의 Node.js, Deno, Bun, Cloudflare Workers 간 fetch() 프록시 지원 현황 정리와, Justin Searls의 팟캐스트 인터뷰 — 에이전트 개발의 미해결 과제는 생성 속도가 아닌 verifiability이며 "order taker"와 "야망 있는" 개발자의 격차가 빠르게 벌어지고 있다는 주장 — 으로 한 주를 마무리합니다.
Key Takeaways
모든 PR은 변경 이유와 함께 해당 기능을 처음 접하는 리뷰어를 위한 단계별 테스트 체크리스트를 포함해야 합니다. 이 작은 구조적 습관이 리뷰 전에 버그를 잡아냅니다.
Incremental migration이 전면 재작성보다 낫습니다. A/B 전환, view 임베딩, 페이지별 스택 전환은 flag-day 전환의 위험 없이 현대화를 가능하게 합니다.
에이전트 개발의 미해결 병목은 빠른 자동화 피드백 루프, 즉 verifiability입니다. 지금 견고한 테스트 인프라에 투자하는 팀이 복리 수익을 얻게 됩니다.
![개발자는 두 종류다. 한쪽은 망했다. Justin Searls 인터뷰[팟캐스트 #210]](/_next/image?url=https%3A%2F%2Fbusansashimi-digest-media.s3.ap-northeast-2.amazonaws.com%2Fdigest%2Fweek-10-2026%2Fvideo-freecodecamp-org-hP931079TMw.jpg&w=3840&q=75)