Web Frontend Developer

원문: https://nolanlawson.com/2026/01/31/building-a-browser-api-in-one-shot/TL;DR 프롬프트 하나로 Claude Code와 Ralph 루프를 사용해 IndexedDB 구현체를 만들었습니다. 목표로 삼은 Web Platform Tests 하위 집합의 95%를 통과했고, 더 엄격한 테스트 하위 집합은 77.4%를 통과했습니다.정작 놀라웠던 점은 두 프로젝트 모두 Web Platform Tests(WPT)를 제대로 활용하지 않는 듯 보였다는 것입니다. WPT에는 헤아릴 수 없이 많은 사람의 시간이 들어간 전문 지식이 응축되어 있습니다. 브라우저가 어떻게 동작해야 하는지를 가장 기이한 엣지 케이스까지 정밀하게 정의해 둔 결과물이죠. (두 번째 프로젝트는..

원문: https://www.matuzo.at/blog/2025/whats-an-interactive-element2년 전에 저는 dialog 요소에 관한 글을 썼습니다. showModal() 메서드로 모달 다이얼로그를 열었을 때 포커스가 어디로 가는지 테스트했습니다. 요소와 속성을 여러 조합으로 바꿔 가며 어떤 일이 일어나는지 살펴봤는데, 2023년 당시에는 동작이 무척 일관되지 않았기 때문입니다.테스트 중 하나에서 저는 dialog 요소에 tabindex 속성을 넣었습니다. 이번 주 초에 Joy가 저에게 연락한 것도 그래서였습니다. MDN의 dialog 요소 페이지에 다음과 같이 쓰여 있어서, 그게 좋은 방법인지 확신이 서지 않았던 겁니다.그리고 사용 시 주의 사항은 이렇습니다. 요소는 인터랙티브하지..

원문: https://jakearchibald.com/2025/present-and-future-of-progressive-image-rendering/프로그레시브 이미지 포맷을 쓰면 이미지 리소스의 일부만 받은 상태에서도 디코더가 부분 렌더링을 만들어낼 수 있습니다. 이미지의 일부만 표시되기도 하고, 저품질·저해상도 버전으로 표시되기도 합니다. 최근 이 주제를 깊이 파고들다가 흔한 오해 몇 가지를 발견했고, AVIF에서 좀 더 실용적인 해결책이 나오면 좋겠다는 생각을 하게 됐습니다.지금 브라우저가 기본으로 지원하는 프로그레시브 렌더링이 어떤 것들인지부터 살펴보겠습니다.브라우저의 프로그레시브 이미지 렌더링 현황비교에 쓸 이미지를 소개합니다. 이 글을 다 읽을 때쯤이면 이 이미지가 눈에 아른거릴 겁니다.해..

원문: https://jakearchibald.com/2025/fetch-streams-not-for-progress/Mozilla에서 제 역할 중 하나는 우리가 올바른 기능에 집중하고 있는지 확인하는 것인데, 이번에는 fetch 업로드 스트림 주제를 다루게 됐습니다. Chrome이 한동안 지원해 온 기능이지만, Firefox나 Safari에서는 아직 지원되지 않습니다.저는 다양한 소셜 플랫폼에서 이 기능을 어떻게 생각하는지, 무엇에 활용할 것인지를 물어봤습니다. 단연 가장 많은 답변은 "업로드 진행 상황을 측정하기 위해"였습니다. 하지만 그 목적으로 쓰면 부정확한 결과가 나오고, 심지어 브라우저에서 잘못된 구현으로 이어질 수도 있습니다.자세히 살펴보겠습니다…응답 스트림스트리밍 응답은 수년 전부터 모든 ..

원문: https://hidde.blog/component-conformance/접근성을 고려해 UI 컴포넌트를 만들 수 있습니다. 개발하면서 컴포넌트와 함께 접근성 관련 사항을 문서화하거나, 명백한 장애물이 없는지 검토해도 됩니다. 모두 도움이 되고 권장할 만한 일입니다. 그렇다면 적합성을 주장하는 건 어떨까요? 이 글에서는 WCAG가 기술적으로 그것을 허용하지 않는 이유와, 그 판단이 옳다고 보는 이유를 이야기합니다.이 글의 일부는 제가 진행해 온 "내장 접근성: 축복인가 저주인가?"라는 발표 시리즈에서 비롯되었습니다. 이 발표에서는 "접근 가능한 웹 플랫폼 기능"과 저작 도구도 다룹니다. JS Heroes 2025 유튜브 영상을 확인하실 수 있습니다.평소와 같이, 이 글의 의견은 제 개인적인 견해이..

원문: https://www.viget.com/articles/fixing-typescript-performance-problems대규모 타입스크립트 모노레포(monorepo)에서 심각한 성능 문제를 디버깅한 경험을 소개합니다.최근 진행한 타입스크립트 프로젝트에서 에디터 성능이 점점 저하됐습니다. 타입스크립트 컴파일러(언어 서버 포함)가 코드베이스의 특정 영역에서 버벅이기 시작하면서 인텔리센스가 느려지고 타입 검사 시간이 길어졌습니다. 타입 정보가 오래된 상태로 남아 있는 일도 잦아졌고, 팀원들의 불만도 커졌습니다.이 프로젝트는 타입스크립트 패키지 7개로 구성된 모노레포입니다. 이전 개발자들이 프로젝트 참조(project references)(composite 설정 필수)와 증분 컴파일(increment..

원문: https://www.lorenstew.art/blog/react-won-by-default/React-by-default에는 숨겨진 비용이 있습니다. 이 글은 작업에 맞는 올바른 프레임워크를 선택하기 위해 의도적인 선택을 내려야 한다는 주장입니다.리액트는 더 이상 기술적 우위로 승리하고 있지 않습니다. 지금은 기본 선택지라는 이유만으로 승리하고 있습니다. 이 기본값이 프런트엔드 생태계 전반의 혁신을 늦추고 있습니다.팀이 새로운 프런트엔드를 만들어야 할 때, 대화는 좀처럼 "제약 조건이 무엇이고, 어떤 도구가 가장 적합한가?"로 시작하지 않습니다. 대부분 "리액트를 쓰자. 다들 리액트는 알잖아."로 시작합니다. 이 반사적인 선택은 기술적 적합성이 아닌 네트워크 효과가 아키텍처를 결정하는 자기 강화..

원문: https://philna.sh/blog/2026/01/11/javascript-date-calculation/문제2025년 1월, 저는 미국 캘리포니아주 산타클라라에서 보고서를 만들기 위한 자바스크립트를 작성하고 있었습니다. 한 달 동안 발생한 이벤트 수를 구하고 싶었기 때문에, 해당 월의 첫째 날로 날짜 객체를 만들고, 한 달을 더한 뒤, 하루를 빼서 마지막 날을 구하려 했습니다. 간단해 보이죠?그런데 정말 이상한 결과가 나왔습니다. 문제를 다음 코드로 재현할 수 있었습니다.const date = new Date("2024-01-01T00:00:00.000Z");date.toISOString();// => "2024-01-01T00:00:00.000Z" as expecteddate.setMon..