Ayden's Journal

프레임워크가 바뀌어도 Form Devtools까지 다시 만들 필요는 없다. 관찰 계약에서 Custom Element, Shadow DOM, Lit, React 통합까지 하나의 구현을 여러 사용 표면으로 연결하는 경계를 따라간다.

실행 컨텍스트, 스코프, this, 객체 모델, Promise와 이벤트 루프를 따라가며 ECMAScript와 호스트 런타임이 코드를 처리하는 방식을 살펴본다.

에이든 피자는 처음부터 복잡한 시스템을 만들 생각이 없었다. 처음에는 메뉴 몇 개만 만들면 됐다. 그런데 손님은 커스텀 주문을 넣기 시작했고, 주방은 상태를 나눠야 했고, 결제와 배달앱과 알림이 하나씩 붙었다. 코드도 가게를 닮는다. 장사가 잘될수록 이상하게 더 쉽게 망가진다. 디자인…

이 포스트는 Google에서 Chrome 개발자 경험을 이끌었으며 현재 Anthropic에서 Claude Code를 개발하고 있는 애디 오스마니(Addy Osmani)가 자신의 트위터에 올린 Critical thinking when agents do the work 게시글을 번역한 것이…

지난 7월부터 나는 오랫동안 유지보수되지 않던 사내 프로젝트 하나를 리팩터링하는 일을 맡아서 하고 있다. 업무를 받고서 내가 제일 처음 올린 티켓은 refactor: Next 16 업그레이드 및 품질 도구 정리 였다. 기존 Next 14 버전의 프로젝트를 16으로 끌어올리면서, 관련된…

리액트에서 memo를 사용하다 보면 조금 이상한 상태에 놓인다. 컴포넌트는 같은 prop을 받으면 다시 렌더링하지 않도록 만들었는데, 정작 타입만 봐서는 그 prop이 다음 렌더링에서도 같은 참조로 전달될지 알 수 없다. Item[]은 배열 안에 무엇이 들어 있는지는 알려주지만, 그 배…

앞서 작성한 Domain-Oriented Data Fetching 포스트에서는 fetcher를 한 단락 정도로만 소개했다. openapi-typescript가 만든 paths 안에는 경로와 HTTP 메서드, 요청 인자와 응답의 관계가 이미 들어 있다. 그런데 API를 호출할 때마다 그…

Webpack, Babel, TypeScript를 한 프로젝트에서 함께 쓰다 보면 역할이 겹쳐 보인다. Webpack도 코드를 변환하고, Babel도 자바스크립트를 출력하며, tsc 역시 타입스크립트를 자바스크립트로 바꾼다. 설정 파일만 보면 같은 일을 세 번 하는 것 같고, 그래서 하…

Fluo를 만들면서 중요하게 생각한 것 중 하나는, 이미 만든 기능을 다른 실행 환경에서도 다시 쓸 수 있어야 한다는 것이었다. 인증이나 검증, 데이터베이스 연동을 만들어 놓고 새로운 서버를 지원할 때마다 그 기능들을 다시 연결해야 한다면, 패키지를 나눠 둔 보람이 별로 없을 것 같았다…