es-toolkit, 사내 작은 라이브러리가 전세계적인 라이브러리가 되기까지
토스의 es-toolkit이 lodash 대체를 목표로 성능과 번들 크기를 개선하며 성장한 과정을 소개했습니다. 국내외 커뮤니티 기여와 대형 오픈소스 채택으로 주간 다운로드 2천만 회를 넘겼습니다.
#JavaScript#TypeScript
11400
프론트엔드 기술 블로그 최신 글
필터 0
왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
왓챠 웹에 Document PiP를 적용한 과정과 원리를 설명했습니다. React 상태 유지, 재생 정체 복구, 종료 제어 같은 실서비스 이슈를 함께 다뤘습니다.
#React#CSS
6900
“왓챠 PiP 안 됨?” — 됩니다, 이제부터.
“왓챠 PiP 안 됨?” — 됩니다, 이제부터.
왓챠 웹에서 PiP 기능을 지원하게 된 소식을 소개했습니다. 기존 미니플레이어 한계와 브라우저별 PiP 차이도 함께 안내했습니다.
#web#browser
7400
디자이너가 시안 대신 앱을 만든 이유
디자이너가 SwiftUI와 AI를 활용해 시안 대신 동작하는 앱을 만들고 인터랙션을 직접 검증했습니다. 레포를 스펙처럼 전달해 개발 완성도와 전달 효율을 함께 높였습니다.
#SwiftUI#Xcode
22400
쓱닷컴이 접근성을 대하는 방식
쓱닷컴이 접근성을 대하는 방식
쓱닷컴 WEB개발팀의 웹 접근성 개선 사례를 소개했습니다. 컴포넌트, OCR, 성능 측정을 함께 다루며 실무 적용 방안을 정리했습니다.
#접근성#Chakra UI
6500
AI 에이전트를 위한 Playwright E2E 테스트 하네스 구축하기
AI 에이전트를 위한 Playwright E2E 테스트 하네스 구축하기
AI 에이전트가 작성한 코드를 검증하기 위한 Playwright 기반 E2E 테스트 하네스 구축 사례를 공유했습니다. 에이전트가 테스트 작성과 수정까지 맡는 워크플로우를 소개했습니다.
#Playwright#E2E 테스트
21200
웹뷰 속 무한 CSS 애니메이션의 숨은 비용
웹뷰 속 무한 CSS 애니메이션의 숨은 비용
Android 웹뷰에서 무한 CSS 애니메이션이 앱 CPU를 크게 올리는 현상을 조사했습니다. transform 최적화만으로는 해결되지 않았고, 지속 애니메이션 자체를 줄이는 방향이 필요했습니다.
#CSS#React Native
9700
디자인시스템 팀은 디자인시스템만 잘 만들면 될까
디자인시스템 팀은 디자인시스템만 잘 만들면 될까
디자인시스템은 컴포넌트만 만드는 일이 아니라 제품 판단 기준을 쌓는 일이라고 설명했습니다. AI가 UI를 빠르게 만들수록 패턴과 맥락을 정리하는 역할이 더 중요해졌습니다.
#UI/UX#design
31400
Android 앱의 의도치 않은 변경 방지하기
Android 앱의 의도치 않은 변경 방지하기
Android 앱에서 외부 라이브러리 업데이트로 생기는 의도치 않은 변경을 막는 방법을 소개했습니다. Baseline 기반 방어 체계와 Manifest Shield의 내부 동작, AI 활용 방향을 다뤘습니다.
#Android
4700
AI로 디자인시스템 마이그레이션하기 (1): 여정의 시작
AI 에이전트와 codemod를 활용해 Mantine v6 디자인시스템을 v8로 점진 마이그레이션했습니다. v6·v8 공존, 자동 검증, QA 보강으로 전환 위험을 낮췄습니다.
#Mantine#디자인 시스템
000
AI와 함께 만든 콘서트팩 아카이빙 웹페이지
AI와 함께 만든 콘서트팩 아카이빙 웹페이지
디자이너 혼자 AI를 활용해 콘서트팩 아카이빙 웹페이지를 제작한 과정을 소개했습니다. 여러 AI의 코드를 비교하고 시안 이미지를 활용해 브랜드 경험을 구현한 방식이 핵심입니다.
#web#Framer
5000
FE News 26년 6월 소식을 전해드립니다.
FE News 26년 6월 소식을 전해드립니다.
2026년 6월 FE 뉴스에서는 AI 개발 트렌드, 최신 웹 UI 기능, npm 공급망 보안 이슈를 함께 다뤘습니다. 또한 폰트 애니메이션 라이브러리와 AI 에이전트 상태 표시 도구도 소개했습니다.
#TypeScript#JavaScript
11300
DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다
DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다
캔버스 에디터 드래그 성능 저하의 원인을 React가 아닌 Layout Thrashing으로 분석했습니다. Read와 Write를 분리한 4-Phase 배칭으로 reflow를 줄여 60fps를 회복했습니다.
#React#DOM
9400
베베핀 타운 AR 도입기: Unity AR Foundation 선택부터 적용까지 (1편)
베베핀 타운 AR 도입기: Unity AR Foundation 선택부터 적용까지 (1편)
Unity AR Foundation으로 iOS와 Android의 Face Tracking을 공통 구조로 통합하는 과정을 정리했습니다. 영유아 서비스 특성에 맞춰 기기 기준과 개인정보 처리 원칙까지 함께 고려했습니다.
#Unity#AR Foundation
16000