FE News 26년 5월 소식을 전해드립니다.
주요소식 Going under the hood of MDN's new front-end MDN이 React 기반 Yari 아키텍처를 Web Components와 Lit 기반의 새 아키텍처(fred)로 전면 교체한 과정을 기술적으로 풀어낸 글이다. 페이지에 등장하는 <mdn-*> 태그를 동적으로 감지해 해당 컴포넌트의 JS·CSS만 lazy-load하며, Declarative Shadow DOM으로 레이아웃 시프트 없이 SSR 결과를 그대로 받는
프롬프트 한 줄로 화면이 나오는 시대, ‘당근스러운 화면’을 만드는 법
AI를 활용한 Web 성능개선 실전 사례
한달 걸릴 작업을 AI를 사용해서 하루만에 임팩트 내기
ODW #4: 코파일럿에서 파일럿으로, 에이전틱 코딩으로 구현부터 PR까지 자동화
안녕하세요. LY Corporation의 Hirano입니다. Yahoo! 파이낸스에서 프런트엔드 영역을 개발하고 있으며 스크럼 마스터도 담당하고 있습니다. 또한 LY Corpora...
AI 네이티브 디자인 플레이북
이 글은 영문 원본을 바탕으로 작성되었습니다. 지난 한 달간, 버즈빌 디자인 팀은 단 6명으로 5개의 웹 애플리케이션을 배포하고 344건의 커밋을 기록했습니다. 놀랍게도 이 과정에서 Figma는 거의 사용되지 않았습니다. 엔지니어링 스프린트 할당도, 핸드오프 티켓도, 지루한 대기 시간도 없었습니다. 제가 Figma에 쓰는 시간 자체도 이전의 10% 수준으로…
카카오톡 예약하기에서 그려 본 캘린더
안녕하세요 저는 카카오톡 예약하기라는 서비스에서 FE 개발을 담당하고 있는 Joy 라고 합니다. 이 글에서는 우리에게 친근한 캘린더를 직접 만들어보면서 경험한 이야기를 해보자 합니다. WHY ? 판매자들을 위한 예약하기 파트너센터 서비스에는 들어온 예약을 모아볼 수 있는 예약 관리라는 탭이 존재합니다. 이 예약 관리 탭에서는 무수히 많은 수의 예약을 카드 형태로 보여주고 있는데요. 이러한 카드 목록 형태의 UI는 한눈에 재고와 예약 건을 파악하
Nobody Owned the Website. Now Everybody Does.
이 글은 영문 원본을 바탕으로 작성되었습니다. 회사 웹사이트, 누가 담당하고 계신가요? 단순한 질문 같지만, 대부분의 회사에서 솔직한 답은 "마케팅팀이 일단은요" 아니면 "글쎄요, 딱히 아무도…" 사이 어딘가일 겁니다. 브랜드를 잘 아는 사람은 웹사이트를 만들지 않고, 만들 수 있는 사람은 제품 개발로 바쁩니다. 웹사이트는 그 사이에 어정쩡하게 놓여서, 마…
AI로 리뷰 정체를 해소하다 - PR 리뷰 지원과 사내 워크숍으로 리뷰 문화 바꾸기
Orchestration 길드 멤버인 Fukuyama입니다. Yahoo!プレイス(이하 Yahoo!플레이스)라는 서비스에서 프런트엔드 개발을 담당하고 있습니다.먼저 Orchestra...
하마터면 못생겨질 뻔했다 - 토스 프론트 2 제작기
아름다우면서 사용성까지 챙긴 토스 프론트 2, 그 뒤에는 “이게 정말 최선일까?”를 끝까지 놓지 않았던 집요한 고민이 있었어요.
Self-POS(무인 계산대) : 무신사다운 오프라인 고객경험을 설계하다.
Stereoscopy의 이해: 무안경 3D 게임 개발 방법론
무안경 3D 기술은 안경 3D 시스템의 한계를 넘어 초기 시차 격벽 기반의 무안경 하드웨어를 거쳐 현재와 같은 지능형 기술로 진화했습니다. 이 글에서는 무안경 3D 기술의 개요와 오디세이 3D 모니터를 활용한 게임 개발 방법론에 대해 알아봅니다.
5년 동안 못 푼 배민 다국어 숙제, AI와 함께 한 달 만에 끝내기
들어가며 한국을 찾는 외국인이 연간 약 2천만 명을 넘어선 지금, 배민 앱은 이들을 위해 준비되어 있었을까? 메뉴를 주문하려면 우선 가게 이름과 메뉴명을 읽을 수 있어야 합니다. 하지만 한국어만 제공되는 배민 앱에서 외국인이 경험하는 첫 번째 장벽이 바로 여기 있었습니다. 배민은 이 문제를 알고 있었고, 5년 전부터 해결하려 해왔습니다. 그리고 매년 멈췄습니다. 2026년 1월, 우리는 다시 […] The post 5년 동안 못 푼 배민 다국어
97% Smaller, 2x Faster: How es-toolkit Reached 10 Million Weekly Downloads
A drop-in lodash replacement built for how JavaScript actually works today — ES Modules, TypeScript, and significantly smaller bundles. Adopted by Microsoft, Storybook, and Yarn. 10M+ weekly npm downloads.
Product Engineer: 전직 백엔드 개발자, AI와 함께한 프론트엔드 도전기
사이드 프로젝트로 프로덕트 엔지니어가 된 사람: 불편하면 직접 만든다
pnpm 모노레포에서 React 19 마이그레이션하기: 숨겨진 호이스팅 레이어가 만든 타입 충돌 트러블슈팅
배경: React 19 마이그레이션과 pnpm Catalogs pnpm workspace 기반의 모노레포 환경을 구축하여 프론트엔드 애플리케이션을 운영하고 있습니다. 기존에는 모노레포 내 여러 워크스페이스(앱)의 라이브러리 파편화를 막기 위해, 모든 의존성을 최상단(root)에서 일괄 관리해 왔습니다. 이에 따라 모든 앱이 동일하게 React 18 버전을 사용하고 있었으나, 최근 React 19로의 마이그레이션을 계획하게 되었습니다. 하지만 규
개인화 추천 템플릿 메인 페이지에 유저를 부드럽게 랜딩시키기
KMP/CMP 마이그레이션, 정말 프로덕션에서 가능할까? - 키친보드 앱 마이그레이션 도전기
안녕하세요. 스포카 FE팀의 Android 개발자 김진우입니다. “Kotlin/Compose Multiplatform(이하 KMP/CMP) 마이그레이션, 정말 프로덕션에서 가능할까?” 이 질문에 대한 답을 찾기 위해 저희 팀은 키친보드 Android 앱의 KMP/CMP 마이그레이션에 도전했습니다. 그 과정에서 가장 큰 난관은 Compose Navigation의 한계로 인한 WebView 화면 상태 유실 문제였습니다. 이로 인해 마이그레이션 자체