AI Briefing#frontend
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
컬리 핀테크그룹이 NestJS와 GraphQL 기반 BFF를 도입해 프론트엔드 생산성을 높이고 백엔드 변경 영향을 차단했다.
올리브영이 블록 기반 CMS를 직접 구축하여 콘텐츠 제작 시간을 7일에서 20분으로 단축하고 프레임워크 독립적인 에디터를 구현했다.
SPA 환경에서 데이터 로딩 및 동적 콘텐츠 변화로 발생하는 스크롤 복구 문제를 해결하기 위한 상황별 전략을 다룬다.
Framelink Figma MCP를 활용해 디자인 시안을 React 컴포넌트로 자동 변환하며 개발 시간을 대폭 단축했다.
Next.js SSR 환경에서 발생하는 CORS 에러와 Version Skew 문제의 원인을 분석하고 해결한 실무 경험을 공유한다.
올리브영 커뮤니티 셔터에 끊김 없는 숏폼 경험을 제공하기 위해 HLS 포맷을 도입하고 하이브리드 업로드 방식을 구현했다.
올리브영 셔터 서비스에서 고해상도 이미지 처리 시 발생하는 메인 스레드 부하와 UI 저하 문제를 Web Worker 도입으로 해결하는 과정을 다룬다.
SK플래닛 Syrup이 Design System과 Figma-Storybook 연동을 통해 디자인-개발 핸드오프를 자동화하고 개발 생산성을 높였다.
가상 스크롤, 비제어 컴포넌트, Message Queue batching 등을 적용해 Lighthouse 점수를 70점대에서 90점대로 개선했다.
카카오 스토리FE개발팀이 TurboRepo 모노레포에 Just-in-Time Packages를 적용해 컴파일 없이 소스를 직접 참조하며 개발 경험을 개선했다.
12월 18일 판교 아지트에서 AI 에이전트, TDD, 사내 RAG 봇 등 3개 세션 진행
SK플래닛 UPTN Station이 스켈레톤 UI와 Tanstack-Query 도입으로 FCP를 699ms에서 204ms로 개선하고 UX를 최적화했다.
올리브영이 기존 JSP 기반 기획전 시스템을 Next.js로 전환하며 직면한 렌더링 이슈와 해결 방법을 공유한다.
10월 23일 카카오맵 TDD 적용기부터 웹 성능 모니터링 서비스 '파루스' 사례까지 발표한다.
사람 개입이 필요한 Slack bot을 버리고 배포 트리거형 자동화로 전환했다.
JavaScript Proxy API를 활용해 gRPC 통신용 프론트엔드 클라이언트를 동적으로 구현하여 개발 생산성을 높이는 방법을 소개한다.
카카오페이 개발자들이 기술 공유 문화를 활성화하기 위해 자동화 및 TIL 기록 기능을 갖춘 슬랙봇 '앙몬드'를 개발했다.
올리브영이 복잡한 상품 데이터를 안정적으로 관리하기 위해 TypeScript의 타입 시스템을 어떻게 활용하는지 설명한다.
서버 환경의 데이터 유출 위험을 AsyncLocalStorage로 해결하고 클라이언트와 동일한 로직을 구현했다.
광고 템플릿 적용 후 A/B 테스트로 효과를 입증해 사내 공유 라이브러리로 확장했다.
Next.js를 AWS ECS에서 직접 운영할 때 성능을 높이는 CDN 연동법과 도커 이미지 경량화 전략을 소개한다.
사내 사이드 프로젝트로 1년 반 동안 개발된 라이브러리를 다음 달 실제 서비스에 적용할 예정이다.