프론트엔드 뉴스레터
#29
이번 이슈 한눈에
- TypeScript 7의 플러그인 변경에 CSS·GraphQL 검사가 대응하는 방법
- DeltaDB, 에이전트의 대화와 파일 편집을 함께 기록
- 같은 폰트를 세 번 받은 원인은 파일 내부의 길이 정보
- 01
jovidecroock.com
TypeScript 7에서 달라지는 CSS·GraphQL 검사 연동
원문 읽기 ↗TypeScript 7은 기존
tsserver플러그인을 로드하지 않아요. GraphQL 타입 추론 라이브러리 gql.tada의 결과 타입은 유지되지만, 플러그인이 제공하던 필드 오타 등의 에디터 진단은 사라집니다.Jovi De Croock은 7.1 beta에서 CSS·GraphQL 파일을 가상 TypeScript로 바꾸는 content mapper를 구현했어요. CSS는 별도
.d.ts생성 없이 클래스명을 검사하고, 별도 파일로 작성한 GraphQL 문서는tsc와 에디터에서 스키마 오류를 표시하는 방식입니다.- GraphQL mapper는 아직 PR 단계예요. mapper는
.ts·.tsx안의graphql()호출을 직접 처리하지 못하므로, 인라인 문서에는 별도 검사가 필요합니다. - CLI에서는
--runExternalCode가 필요하고, VS Code에서는 workspace trust와 content mapper 실행을 허용해야 해요.
- GraphQL mapper는 아직 PR 단계예요. mapper는
- 02
delta.dev
DeltaDB, 에이전트의 대화와 파일 편집을 함께 기록해요
원문 읽기 ↗Zed를 만든 팀이 코딩 에이전트의 대화와 파일 편집을 함께 기록하는 버전 관리 시스템 DeltaDB의 설계를 공개했어요. commit 사이에 일어난 수정까지 저장해, 대화와 작업 디렉터리를 같은 시점의 상태로 되돌려 볼 수 있습니다.
여러 사람과 에이전트가 동시에 수정해도 각자의 변경을 로컬에 먼저 저장하고, 연결이 복구되면 동기화해요. subagent의 작업 이력도 따로 분기했다가 합칠 수 있어, 에이전트끼리 작업을 주고받을 때마다 Git commit을 만들 필요가 없습니다.
- CLI와 외부 코딩 에이전트용 플러그인으로 사용할 수 있어요. 파일이 이동한 뒤에도 글자 단위로 원래 대화까지 추적하는 기능은 후속 작업으로 설명했습니다.
- 03
paulcalvano.com
같은 폰트를 세 번 받은 원인은 파일 내부의 길이 정보였어요
원문 읽기 ↗Paul Calvano가 10월 18일 공개한 분석에서는 한 전자상거래 사이트가 같은 아이콘 폰트를 WOFF2 → WOFF → TTF 순서로 내려받고 있었어요. 앞선 두 파일을 해석하지 못해 브라우저가
@font-face의 다음 파일로 넘어간 겁니다.HTTP
Content-Length와 다운로드한 파일 크기는 같았지만, 폰트 파일 내부에 기록된 길이가 실제 크기와 달랐어요. 정상 폰트 파일로 교체하는 것이 해결책이며, 파일이 손상된 경위는 확인되지 않았습니다.