Latest

켄트 벡은 "AI 가 사람보다 코딩을 잘한다"는 말에 반대한다. 기능(features)을 하나 넣을 때마다 앞으로 바꿀 여지(futures)가 타들어 가고, 예전엔 100명이 10년 걸려 도착하던 "아무것도 못 고치는 프로젝트"에 이제 혼자 1주일이면 도착한다. 해법은 기능 사이에 멈춰 리팩터링으로 여지를 되찾는 것, 스펙 주도 개발이라는 이름의 워터폴과 코드 줄 수 같은 노력 지표를 경계하는 것이다.

Theo 가 TypeScript 컴파일러·타입 체커·LSP 를 에이전트만으로 Rust 에 포팅한 TS Rust 를 공개했다. Codex 토큰 40만 달러는 실패했고 Opus 5.5 로 2만 달러·2주 만에 TSGO 대비 2배 빠른 드롭인 대체품이 나왔는데, 에이전트는 JS 가 아니라 Go 버전을 옮겼다. 진짜 목적은 성능이 아니라 GC 없는 WASM 으로 에이전트의 개발 루프 전체를 V8 isolate 안에 넣는 것이다.

프레임 헤더의 수수께끼였던 RSV1 비트가 주인을 만난다 — 메시지를 DEFLATE로 압축하는 유일한 표준 확장 permessage-deflate. Sec-WebSocket-Extensions 협상, 꼬리 4바이트 절단, context takeover의 압축률↔메모리 저울, 그리고 CRIME 계열 공격 때문에 기본으로 켜지 않는 이유까지.

HTTP/2는 Upgrade와 101을 아예 제거했다 — 연결이 스트림의 다발이 된 세계에서 "연결 통째로 전환"은 성립하지 않기 때문. 그 대신 생긴 문 Extended CONNECT의 세 단계(SETTINGS 능력 광고 → CONNECT + :protocol → 200), 사라진 헤더와 살아남은 헤더, 그리고 실전에서는 왜 여전히 소켓이 http/1.1로 열리는지까지.

연결은 "살아 있다"고 말해주지 않는다 — 침묵할 뿐이다. 그 침묵이 유휴인지 죽음인지 구분하는 프로토콜의 장치 ping/pong, 브라우저가 그 장치를 JS에 숨겨버린 탓에 래퍼가 앱 수준 하트비트를 직접 구현하게 된 사연, 그리고 주기·타임아웃을 정하는 실무 기준까지.

재연결 래퍼의 모든 판단 — "이 끊김은 재연결해야 하는 끊김인가?" — 의 스펙 근거를 본다. Close 프레임 교환 절차, wasClean과 readyState 상태 기계, 1006이 와이어에 존재하지 않는 이유, 브라우저 close()의 코드 제약, 그리고 지수 백오프가 스펙의 SHOULD인 이유까지.

ws.send("Hello") 한 줄이 와이어에 놓는 실제 11바이트를 RFC 6455 §5.2 다이어그램 그대로 읽는다. 2바이트 헤더에 압축된 FIN·opcode·MASK·길이, 컨트롤 프레임이 데이터 조각 사이에 끼어드는 원리, 그리고 마스킹이 암호화가 아니라 캐시 오염 방어인 이유까지.

매일 쓰는 new WebSocket(url) 한 줄 뒤에서 정확히 무슨 일이 일어나는지, RFC 6455 원문 수준에서 본다. WebSocket은 HTTP로 시작하지만 HTTP가 아니다 — 열림 핸드셰이크의 실물, Sec-WebSocket-Key의 진짜 목적, 그리고 IETF/WHATWG 이중 표준 구조까지.

WebSocket 프로토콜 시리즈에서 쓰는 용어를 한곳에 정리한다. 열림 핸드셰이크부터 프레임, opcode, 마스킹, 단편화, 종료 핸드셰이크와 close code, HTTP/2·3의 Extended CONNECT, permessage-deflate 압축 확장까지 — 모든 레슨은 이 용어집의 표기를 따르며, 새 용어는 등장한 레슨에서 추가된다.

Abdul Bari 의 MVC 설명 영상을 정리했다. 모든 공학 제품은 사용자 인터페이스·메커니즘·저장소 세 부분으로 나뉜다는 관점에서 출발해, 소프트웨어의 View / Controller / Model 로 대응시키고, 세 컴포넌트의 상호작용과 각각을 만드는 역할·기술까지 다룬다.

Abdul Bari 의 클라우드 컴퓨팅 4부작을 한 편으로 정리했다. 데스크톱 → 클라이언트-서버 → 클러스터 → 그리드로 이어지는 컴퓨팅 모델의 진화, ARPANET 에서 데이터센터까지의 역사, 웨딩홀 비유로 푸는 IaaS/PaaS/SaaS, 그리고 클라우드의 9가지 장점.

TanStack Intent 는 Agent Skills 를 npm 패키지에 번들해서 라이브러리 버전과 스킬 버전을 동기화하려는 시도다. 아이디어는 좋지만 AGENTS.md 에 LLM 으로 복사하는 방식이라 동기화가 다시 깨진다. 에이전트 설정 파일로 node_modules 안의 스킬을 직접 참조하는 편이 낫다.

제네릭은 타입 함수(type helper)라는 관점에서 출발해, 런타임 인자로부터의 추론, extends 제약, 다중 제네릭, 타입 파라미터 기본값, Zod 스키마 연동까지 — Matt Pocock 이 꼽은 제네릭 실전 팁 10가지를 정리했다.

display: none ↔ display: grid 전환은 discrete 속성이라 transition 이 안 걸렸다. transition-behavior: allow-discrete 로 닫힐 때의 페이드아웃을, @starting-style 로 열릴 때의 시작 상태를 지정하면 양방향 모두 transition 된다. 두 줄이면 끝난다.

flexbox 는 직계 자식에만 적용되기 때문에, 그룹핑용 wrapper div 를 추가하는 순간 레이아웃이 깨지고 wrapper 안에 같은 flexbox 코드를 또 써야 했다. display: contents 한 줄이면 wrapper 를 레이아웃 흐름에서 지워서 자식들이 원래 flex 컨테이너의 아이템처럼 배치된다. 대신 wrapper 의 시각적 스타일이 전부 사라지는 함정을 알아야 한다.

유니온 타입으로 충분한데 제네릭을 쓰고 있진 않은가? Matt Pocock 은 한 가지 질문으로 판단하라고 한다 — "함수를 만드는 시점에 모든 요소를 알고 있는가?" 알고 있다면 유니온, 입력에 따라 반환 타입이 달라져야 하는 순간부터 제네릭이다.

'a' | 'b' | 'c' 에서 'c' 만 빼고 싶다. 객체나 배열은 map 으로 순회하면 되는데, 유니온의 iterator 는 뭘까? 답은 "직접 순회할 필요가 없다" — 조건부 타입이 유니온을 만나면 TypeScript 가 멤버 하나하나에 자동으로 분배(distribute)해 준다. Matt Pocock 의 영상을 보고 정리했다.

이벤트 타입에 따라 payload 가 필수이기도, 아예 없어야 하기도 한 함수. 옵셔널 인자(?)로는 이걸 표현할 수 없다. Matt Pocock 의 영상을 보고 제네릭 + 조건부 타입 + named tuple 로 함수 시그니처 자체를 동적으로 바꾸는 패턴을 정리했다.

두 텍스트를 비교하는 PegDiff 를 짰다. 핵심은 diff 알고리즘을 한 줄도 안 짰다는 것 — diff·diff-match-patch 같은 라이브러리도 안 썼다. 비교 자체는 Monaco 의 DiffEditor 에 통째로 위임하고, 내가 짠 코드는 전부 diff *바깥*에 있다: 청크 네비게이션, 추가/삭제 통계, localStorage 영속, 그리고 Monaco 위젯을 깔끔하게 떼어내는 두 개의 war story.

예전에 nostrss.me에 JS 플레이그라운드를 한 번 짰었다. 이번엔 Pegboard의 peg-app으로 다시 짜면서 — 같은 iframe 샌드박스 뼈대인데도 광고·공유 localStorage·스모크 게이트·GA4·타입 진단이라는 제약이 실행 엔진, 에디터 선택, 공유 방식을 전부 다시 그었다. PegCode(ADR-0014) 구현 기록.