쇠퇴한 코딩의 예술 — 2026년 12주 웹 개발
Cross-cutting frontend topics, tooling, and DX Compiled for immediate developer deployment.

2026년 쿠키 동의 관리 1부: 개요
localStorage, sessionStorage, IndexedDB까지 스캔할 수 있는 동의 관리 플랫폼을 선택해야 한다는 점이 있습니다. 성능 측면에서는 RUMVision 벤치마크 기준 경쟁사 대비 약 두 배 빠른 CookieYes를 권장합니다. 동의 배너는 초기 로딩 시 다른 스크립트를 차단하므로 성능이 특히 중요합니다. 지속적인 컴플라이언스를 위해 정기 재스캔과 도메인 간 동의 전파를 위한 서브도메인 전략도 필요합니다.
Connection Pool 고갈: 1% 누수율이 프로덕션 Node.js 서비스를 무너뜨리는 5가지 사례 시뮬레이션
try/finally 정리 없이 1%의 쿼리 오류율이 발생하면 전체 요청의 68.5%가 실패하는 반면, 올바른 정리 로직을 사용하면 30% 오류율에서도 초당 140 req/s의 처리량을 유지합니다. Acquire 타임아웃은 장애율을 바꾸지 않고 장애를 지연시킬 뿐입니다. burst size 50과 5초 타임아웃 조합에서는 59ms의 오류가 4,854ms 오류로 바뀝니다. 근본적인 해결책은 acquire-try-use-finally-release 패턴을 예외 없이 적용하는 것입니다.
2026년 쿠키 동의 관리 2부: 기술 팁
Set-Cookie 응답 헤더를 격리하고, HTTP 헤더가 원인이 아닌 경우 요청 도메인을 점진적으로 차단하여 JavaScript 범인을 좁혀나갑니다. 대규모 감사를 위해 그는 동의 전후의 쿠키를 캡처하고, 쿠키 설정 호출을 가로채 initiator 체인을 재구성하며, localStorage, sessionStorage, IndexedDB까지 확인하는 Puppeteer 기반 CLI 도구를 직접 제작했습니다. 또한 페이지를 스크롤하여 lazy-loading 쿠키를 캡처하는 기능도 추가해 수동 테스트에서 놓쳤던 결과들을 발견했습니다.
비밀번호 없는 생체 로그인을 위한 Node.js WebAuthn 설정법
generateRegistrationOptions, verifyRegistrationResponse), 인증 절차(generateAuthenticationOptions, verifyAuthenticationResponse), 복제 감지를 위한 카운터 업데이트, 그리고 장기 JWT를 express-session 기반의 단기 HTTP-only 세션 쿠키로 교체하는 방법을 포함합니다. 또한 출금 승인, API 키 생성, 권한 상승과 같은 민감한 경로에 대해 5분 유효 창을 가진 requireRecentStepUp 미들웨어로 제어하는 step-up 인증 방법도 다룹니다. 다중 디바이스 백업 및 복구 전략으로 가이드를 마무리합니다.
Next.js로 SaaS의 Core Web Vitals를 개선한 방법
React.memo, useMemo, useCallback 없이 자동 메모이제이션이 가능해졌습니다. use client를 리프 컴포넌트에만 적용하고 마크다운-HTML 파싱을 서버로 이전해 CSR 범위를 줄임으로써 Speed Index가 2.9초에서 1.2초로 단축되었습니다. 이미지 개선은 두 가지 주요 병목을 해결했습니다. 썸네일 품질을 50으로 낮춰 LCP가 15.8% 향상되었고, 작가 아바타에 작은 blurDataURL을 사용한 placeholder blur를 적용해 CLS가 0.289에서 0으로 감소했습니다. 아티클 전용 CSS(prose, 표, 구문 강조)를 global.css에서 별도의 blog.css로 분리함으로써 global CSS 번들 크기가 40% 감소하고 비아티클 페이지의 FCP가 개선되었습니다.
Simon Willison: 코딩 에이전트를 제대로 작동시키는 엔지니어링 관행
Django와 Datasette의 창시자 Simon Willison이 The Pragmatic Summit에서 코딩 에이전트를 안정적으로 활용하게 하는 엔지니어링 실천 방법을 공유합니다. 그의 핵심 방법은 red-green TDD입니다. 모든 에이전트 세션을 기존 테스트 실행으로 시작하고, 구현 전에 실패하는 테스트를 먼저 작성하도록 지시하여 에이전트가 최소한의 검증 가능한 출력만 생성하도록 유도합니다. 테스트 통과 후에는 curl 기반 수동 API 검증을 보완적으로 수행하며, curl 세션의 마크다운 감사 추적을 생성하는 새로운 Showboat 도구도 활용합니다. Willison은 또한 lethal trifecta, 즉 프라이빗 데이터 접근 권한 + 악의적 지시에 노출 + 외부 유출 경로를 동시에 갖춘 에이전트의 위험성을 설명하고, 컨테이너 및 클라우드 VM과 같은 샌드박스 환경을 주요 방어 수단으로 권장합니다. 코드 품질에 대해서는 에이전트가 코드베이스의 기존 패턴을 그대로 따르는 경향이 있으므로, 고품질 템플릿과 기존 코드를 유지하는 것이 에이전트 출력 품질을 직접적으로 좌우한다고 주장합니다.
쇠퇴한 코딩의 예술
Nolan Lawson은 LLM 코딩 에이전트가 소프트웨어 개발의 장인 정신을 어떻게 변화시켰는지 성찰합니다. 코드 리뷰에서 우아함이나 창의성을 발견하던 시대와 달리, AI가 생성한 코드에서는 그런 신호들이 흐려지며 변수명이나 루프 스타일보다 의도와 아키텍처에 집중하게 됩니다. Lawson은 이를 IKEA 공장의 설계도를 그리는 목수에 비유합니다. 취향과 판단력은 여전히 중요하지만, 장인의 손길이 아닌 감독자의 시선으로 작동합니다. 더 넓은 차원에서 그는 많은 개발자들이 코딩에서 예술적 충족감을 얻어왔으며, 직업이 조립 라인 방식으로 전환되면서 창의적 공백이 생길 수 있다고 우려합니다. 그의 조언은 vibe-coded된 일회용 소프트웨어가 아니라 회화, 댄스, 소설, 음악과 같은 인간 고유의 예술 형식에서 창작의 활력을 찾으라는 것입니다.
Read Articlearrow_forwardSimon Willison: 코딩 에이전트를 제대로 작동시키는 엔지니어링 관행
Django와 Datasette의 창시자 Simon Willison이 The Pragmatic Summit에서 코딩 에이전트를 안정적으로 활용하게 하는 엔지니어링 실천 방법을 공유합니다. 그의 핵심 방법은 red-green TDD입니다. 모든 에이전트 세션을 기존 테스트 실행으로 시작하고, 구현 전에 실패하는 테스트를 먼저 작성하도록 지시하여 에이전트가 최소한의 검증 가능한 출력만 생성하도록 유도합니다. 테스트 통과 후에는 curl 기반 수동 API 검증을 보완적으로 수행하며, curl 세션의 마크다운 감사 추적을 생성하는 새로운 Showboat 도구도 활용합니다. Willison은 또한 lethal trifecta, 즉 프라이빗 데이터 접근 권한 + 악의적 지시에 노출 + 외부 유출 경로를 동시에 갖춘 에이전트의 위험성을 설명하고, 컨테이너 및 클라우드 VM과 같은 샌드박스 환경을 주요 방어 수단으로 권장합니다. 코드 품질에 대해서는 에이전트가 코드베이스의 기존 패턴을 그대로 따르는 경향이 있으므로, 고품질 템플릿과 기존 코드를 유지하는 것이 에이전트 출력 품질을 직접적으로 좌우한다고 주장합니다.
2026년 쿠키 동의 관리 1부: 개요
CCPA와 GDPR의 법적 집행이 크게 강화되었습니다. 캘리포니아주는 Disney와의 소송에서 275만 달러 합의를 이끌어냈으며, 원고 측 변호사들은 1967년 캘리포니아 프라이버시 침해법(CIPA)을 쿠키, 세션 리플레이 도구, 분석 스크립트에 적용하고 있습니다. Cloud Four의 Jason Grigsby는 컴플라이언스를 위한 조직적·도구적 대응 방안을 설명합니다. 주요 조언으로는 사용자 옵트아웃 증가에 따른 데이터 손실을 마케팅팀과 사전 협의하고, 법무 자문을 통해 쿠키를 정확히 분류하며, 쿠키뿐 아니라 localStorage, sessionStorage, IndexedDB까지 스캔할 수 있는 동의 관리 플랫폼을 선택해야 한다는 점이 있습니다. 성능 측면에서는 RUMVision 벤치마크 기준 경쟁사 대비 약 두 배 빠른 CookieYes를 권장합니다. 동의 배너는 초기 로딩 시 다른 스크립트를 차단하므로 성능이 특히 중요합니다. 지속적인 컴플라이언스를 위해 정기 재스캔과 도메인 간 동의 전파를 위한 서브도메인 전략도 필요합니다.
Connection Pool 고갈: 1% 누수율이 프로덕션 Node.js 서비스를 무너뜨리는 5가지 사례 시뮬레이션
Ko-Hsin Liang은 이산 이벤트 커넥션 풀 시뮬레이터를 구축하고, 5가지 2차원 파라미터 실험을 통해 Node.js 서비스에서 커넥션 누수가 언제 운영 장애로 이어지는지를 정량적으로 검증했습니다. 결과는 매우 명확합니다. 커넥션 풀이 20개이고 누수율이 1%인 경우, 동시성 10에서 장애율이 48.7%, 동시성 20에서는 68.8%까지 급등합니다. 풀 크기를 200개로 두 배 늘려도 고갈 시간이 선형적으로 늘어날 뿐, 근본적인 해결이 되지 않습니다. 가장 중요한 발견은 오류율 대 정리 동작 실험에서 나왔습니다. try/finally 정리 없이 1%의 쿼리 오류율이 발생하면 전체 요청의 68.5%가 실패하는 반면, 올바른 정리 로직을 사용하면 30% 오류율에서도 초당 140 req/s의 처리량을 유지합니다. Acquire 타임아웃은 장애율을 바꾸지 않고 장애를 지연시킬 뿐입니다. burst size 50과 5초 타임아웃 조합에서는 59ms의 오류가 4,854ms 오류로 바뀝니다. 근본적인 해결책은 acquire-try-use-finally-release 패턴을 예외 없이 적용하는 것입니다.
2026년 쿠키 동의 관리 2부: 기술 팁
Jason Grigsby의 이 기술편에서는 어떤 스크립트가 어떤 쿠키를 설정하는지 파악하는 조사 워크플로를 다룹니다. 주요 함정으로는 Chrome Incognito 모드가 기본적으로 서드파티 쿠키를 차단하는 점, 그리고 스크롤 이벤트 이후에만 로드되는 lazy-loading 스크립트가 쿠키를 설정하는 점이 있습니다. Grigsby의 디버깅 접근 방식은 네트워크 패널에서 Set-Cookie 응답 헤더를 격리하고, HTTP 헤더가 원인이 아닌 경우 요청 도메인을 점진적으로 차단하여 JavaScript 범인을 좁혀나갑니다. 대규모 감사를 위해 그는 동의 전후의 쿠키를 캡처하고, 쿠키 설정 호출을 가로채 initiator 체인을 재구성하며, localStorage, sessionStorage, IndexedDB까지 확인하는 Puppeteer 기반 CLI 도구를 직접 제작했습니다. 또한 페이지를 스크롤하여 lazy-loading 쿠키를 캡처하는 기능도 추가해 수동 테스트에서 놓쳤던 결과들을 발견했습니다.
비밀번호 없는 생체 로그인을 위한 Node.js WebAuthn 설정법
Sumit Analyzen은 SimpleWebAuthn 라이브러리를 사용하여 Node.js와 TypeScript 백엔드에서 WebAuthn 등록 및 인증 플로우를 전체적으로 구현하는 방법을 설명합니다. 이 가이드는 비밀 키가 디바이스에 묶여 있고 서버는 공개 키, credential ID, 카운터만 저장하는 비대칭 암호화 모델을 다룹니다. 실제 코드는 등록 절차(generateRegistrationOptions, verifyRegistrationResponse), 인증 절차(generateAuthenticationOptions, verifyAuthenticationResponse), 복제 감지를 위한 카운터 업데이트, 그리고 장기 JWT를 express-session 기반의 단기 HTTP-only 세션 쿠키로 교체하는 방법을 포함합니다. 또한 출금 승인, API 키 생성, 권한 상승과 같은 민감한 경로에 대해 5분 유효 창을 가진 requireRecentStepUp 미들웨어로 제어하는 step-up 인증 방법도 다룹니다. 다중 디바이스 백업 및 복구 전략으로 가이드를 마무리합니다.
Next.js로 SaaS의 Core Web Vitals를 개선한 방법
Suraj Vishwakarma는 Texavor 블로그의 Next.js 15에서 16으로의 업그레이드를 통해 모바일 Core Web Vitals를 실측 개선한 과정을 상세히 설명합니다. Next.js 16으로 마이그레이션하면서 React Compiler를 활용하여 React.memo, useMemo, useCallback 없이 자동 메모이제이션이 가능해졌습니다. use client를 리프 컴포넌트에만 적용하고 마크다운-HTML 파싱을 서버로 이전해 CSR 범위를 줄임으로써 Speed Index가 2.9초에서 1.2초로 단축되었습니다. 이미지 개선은 두 가지 주요 병목을 해결했습니다. 썸네일 품질을 50으로 낮춰 LCP가 15.8% 향상되었고, 작가 아바타에 작은 blurDataURL을 사용한 placeholder blur를 적용해 CLS가 0.289에서 0으로 감소했습니다. 아티클 전용 CSS(prose, 표, 구문 강조)를 global.css에서 별도의 blog.css로 분리함으로써 global CSS 번들 크기가 40% 감소하고 비아티클 페이지의 FCP가 개선되었습니다.
12주차는 개발자 장인 정신, 개인정보 컴플라이언스, 프로덕션 안정성에 관한 중요한 장기적 질문들을 제기했습니다. Nolan Lawson의 "The Diminished Art of Coding"은 LLM 코딩 에이전트가 우아함, 창의성, 숙련도 등 장인 정신의 신호를 흐리고 개발자의 관심을 구현에서 아키텍처와 의도로 전환시키는 현상을 성찰하며, 이를 IKEA 공장의 설계도를 그리는 목수에 비유했습니다. Django와 Datasette의 창시자 Simon Willison은 The Pragmatic Summit에서 red-green TDD가 코딩 에이전트에 가장 효과적인 제약임을 주장했습니다. 모든 세션을 기존 테스트 실행으로 시작하고, 구현 전에 실패하는 테스트를 작성합니다. Showboat 도구는 curl 감사 추적을 마크다운으로 생성하며, 그는 프라이빗 데이터 접근 + 악의적 지시에 노출 + 외부 유출 경로를 동시에 갖춘 "lethal trifecta"를 샌드박스 환경이 필요한 위협 모델로 명명했습니다.
Cloud Four의 2부작 쿠키 동의 시리즈는 급격히 높아지는 법적 위험을 조명했습니다. 캘리포니아 Disney CCPA 합의 275만 달러와 1967년 CIPA를 세션 리플레이 도구에 적용하는 원고 측 변호사들의 움직임이 배경입니다. 실용 지침은 RUMVision 벤치마크 기준 경쟁사 대비 약 2배 빠른 CookieYes, 쿠키를 넘어 localStorage, sessionStorage, IndexedDB까지 스캔, 수동 테스트에서 놓친 lazy-loading 쿠키 캡처를 위한 Puppeteer 기반 CLI를 다루었습니다. Ko-Hsin Liang의 5가지 커넥션 풀 시뮬레이션은 리소스 누수의 심각성을 수치화했습니다. try/finally 정리 없는 1% 쿼리 오류율이 전체 요청의 68.5% 실패로 증폭되는 반면, 적절한 정리로 30% 오류율에서도 140 req/s를 유지합니다. 해결책은 예외 없이 acquire-try-use-finally-release 패턴을 적용하는 것입니다. SimpleWebAuthn을 활용한 Node.js WebAuthn 구현과 Next.js 16(React Compiler, CSR 축소, AVIF/blur placeholder)을 통한 Core Web Vitals 최적화로 실용 중심의 한 주를 마무리했습니다.
- try/finally 정리 없는 1% 커넥션 누수율이 Node.js 서비스에서 요청 실패율 68.5%로 증폭됩니다. acquire-try-use-finally-release 패턴만이 유일한 해결책이며, 풀 크기 두 배 증가는 고갈을 선형적으로 지연할 뿐입니다.
- CCPA와 GDPR 집행이 강화되고 있습니다. 캘리포니아 Disney 합의 275만 달러와 세션 리플레이 도구에 대한 CIPA 적용으로 인해 동의 관리는 이제 쿠키만이 아닌 localStorage, sessionStorage, IndexedDB까지 스캔해야 합니다.
- Simon Willison의 에이전트 워크플로(red-green TDD 우선, curl 기반 API 검증, 항상 샌드박스 환경)는 보안 노출 없이 코딩 에이전트를 안정적으로 활용하기 위한 가장 구체적인 공개 지침입니다.