프론트엔드 아티클

필터 0

선택된 필터 없음

· 2025년 10월 27일

프론트엔드

R-tree를 사용한 가까운 마커 찾기 기능 구현과 개선기

지도에서 드래그 중인 마커의 최근접 마커를 찾는 기능을 구현하고, R-tree와 knn으로 탐색을 최적화했습니다. 최적화 후 CPU 사용률이 줄어들어 지도 UI 성능이 개선되었습니다.

[Jetpack Compose — Part 3] Jetpack Compose, 데이터로 성능과 안정성을 증명하다

Jetpack Compose 도입 후 성능 불안을 CPU 프로파일러와 내부 원리 이해로 해결한 사례를 다루었습니다. 상태 분리, remember, 전환 개선으로 스크롤 버벅임과 깜빡임을 줄였습니다.

#Jetpack Compose#Android

89005분

· 2025년 10월 23일

프론트엔드

기기 없이 앱을 테스트하는 법, 멀티버스가 알려드립니다

가상 기기로 앱 테스트를 쉽게 만들고, 환경 구축과 디버깅 부담을 줄인 사내 플랫폼 멀티버스를 소개했습니다. 다양한 직군이 공통으로 겪는 테스트 불편을 기능으로 풀어낸 사례를 다뤘습니다.

#iOS#test

203005분

우아한 디버깅 툴 2부: 좀 더 편하게 일하기 위한 개선들

· 2025년 10월 23일

프론트엔드

우아한 디버깅 툴 2부: 좀 더 편하게 일하기 위한 개선들

QA 재현과 기록, 티켓 전달을 자동화해 업무 흐름을 단방향으로 개선했습니다. rrweb 세션 리플레이와 어드민, Network Rewrite로 이슈 처리 효율을 높였습니다.

#QA#rrweb

41005분

우아한 디버깅 툴 1부: 웹뷰/웹페이지 원격으로 디버깅하기

· 2025년 10월 23일

프론트엔드

우아한 디버깅 툴 1부: 웹뷰/웹페이지 원격으로 디버깅하기

웹뷰·웹페이지 이슈를 당시 DevTools 상태 그대로 원격 재현하는 디버깅 툴을 소개했습니다. Chrome DevTools Protocol과 WebSocket으로 기록·재생하는 구조를 설명했습니다.

#Chrome DevTools Protocol#webview

36005분

반복은 줄이고, 가능성을 넓히다: AI 플러그인이 만든 디자인의 새로운 전환

· 2025년 10월 20일

프론트엔드

반복은 줄이고, 가능성을 넓히다: AI 플러그인이 만든 디자인의 새로운 전환

반복적인 프로모션 카드 제작을 줄이기 위해 Figma 플러그인을 개발한 사례입니다.\n상품 URL 한 줄로 카드 10장을 약 90초에 생성하며 팀의 업무 방식을 바꿨습니다.

앱 성공을 위한 필수 요소: 장애 모니터링

모바일 앱 장애 모니터링을 위해 Sentry와 Flutter 기반의 이벤트 수집, 로그 레벨 설계, 대시보드 구성 방법을 정리했습니다.\n핵심 이벤트부터 시작해 알림과 대응 루틴을 단계적으로 확장하는 운영 방식을 소개했습니다.

핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기

GraphQL 기반 BFF의 역할과 프론트엔드 활용 사례를 설명했습니다. Apollo Client 캐싱 문제와 BFF 도입 시 고려할 점도 함께 정리했습니다.

오늘도 엔지니어가 된다고 말했다 - 당근페이 이용 내역 개편기

당근페이는 이용내역 개편을 위해 서버 드리븐 UI에서 클라이언트 주도 구조로 전환하고 GraphQL을 도입했습니다. 단계적 마이그레이션과 명확한 스키마 원칙으로 안정성과 확장성을 함께 확보했습니다.

#GraphQL#REST API

172005분

WWDC25: Liquid Glass와 Foundation Models로 본 애플의 미래

· 2025년 10월 10일

프론트엔드

WWDC25: Liquid Glass와 Foundation Models로 본 애플의 미래

WWDC25에서 애플의 Liquid Glass UI와 Foundation Models framework를 중심으로 미래 방향을 살펴보았습니다. 온디바이스 AI와 새로운 인터랙션 패러다임이 iOS 생태계에 가져올 변화를 정리했습니다.

[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기

요기요는 디자인 시스템 아이콘을 개별 SVG 컴포넌트와 전용 라이브러리로 재구축했습니다. 자동 변환, 접근성, 토큰 연동, 변경 내역 자동화로 운영 효율을 높였습니다.

React 상태 관리 라이브러리 비교: Zustand vs Recoil vs Jotai

React 상태 관리 라이브러리로 Zustand, Recoil, Jotai를 비교했습니다. 프로젝트 규모와 상태 복잡도에 따라 적절한 도구를 선택하는 기준을 정리했습니다.

#React#Zustand

182005분