앱 성공을 위한 필수 요소: 장애 모니터링
모바일 앱 장애 모니터링을 위해 Sentry와 Flutter 기반의 이벤트 수집, 로그 레벨 설계, 대시보드 구성 방법을 정리했습니다. 핵심 이벤트부터 시작해 알림과 대응 루틴을 단계적으로 확장하는 운영 방식을 소개했습니다.
#Flutter#Sentry
14500
프론트엔드 기술 블로그 최신 글
필터 0
핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기
GraphQL 기반 BFF의 역할과 프론트엔드 활용 사례를 설명했습니다. Apollo Client 캐싱 문제와 BFF 도입 시 고려할 점도 함께 정리했습니다.
#GraphQL#BFF
13500
핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기
MSA 환경의 복잡도를 줄이기 위한 GraphQL 기반 BFF 구조와 프론트엔드 활용 방식을 소개했습니다. Apollo 캐시 키 충돌 해결과 BFF 도입에 따른 운영 복잡도도 함께 짚었습니다.
#GraphQL#BFF
200
오늘도 엔지니어가 된다고 말했다 - 당근페이 이용 내역 개편기
당근페이는 이용내역 개편을 위해 서버 드리븐 UI에서 클라이언트 주도 구조로 전환하고 GraphQL을 도입했습니다. 단계적 마이그레이션과 명확한 스키마 원칙으로 안정성과 확장성을 함께 확보했습니다.
#GraphQL#REST API
19100
WWDC25: Liquid Glass와 Foundation Models로 본 애플의 미래
WWDC25: Liquid Glass와 Foundation Models로 본 애플의 미래
WWDC25에서 애플의 Liquid Glass UI와 Foundation Models framework를 중심으로 미래 방향을 살펴보았습니다. 온디바이스 AI와 새로운 인터랙션 패러다임이 iOS 생태계에 가져올 변화를 정리했습니다.
#iOS#UI/UX
2500
![[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기](https://miro.medium.com/v2/resize:fit:1200/1*kCf05hhyLPa7iBp2vBTJAA.png)
[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기
요기요는 디자인 시스템 아이콘을 개별 SVG 컴포넌트와 전용 라이브러리로 재구축했습니다. 자동 변환, 접근성, 토큰 연동, 변경 내역 자동화로 운영 효율을 높였습니다.
#React#SVG
13500
React 상태 관리 라이브러리 비교: Zustand vs Recoil vs Jotai
React 상태 관리 라이브러리로 Zustand, Recoil, Jotai를 비교했습니다. 프로젝트 규모와 상태 복잡도에 따라 적절한 도구를 선택하는 기준을 정리했습니다.
#React#Zustand
19200
GraphQL 커스텀 디렉티브로 만드는 선언적 지연 로딩
SSR에서 개인화 필드 동기화와 중복 요청 문제를 GraphQL 커스텀 디렉티브로 해결한 사례를 소개했습니다. `@lazy`로 필요한 필드만 재조회해 네트워크 비용을 줄이고 개발자 경험을 개선했습니다.
#GraphQL#Apollo Client
7800
Cursor AI를 활용하여 Frontend 손쉽게 개발하기
Cursor AI로 Vue.js 프론트엔드를 빠르게 구성하고, 백엔드 API와 ECharts 차트·CloudWatch 모니터링을 연동하는 과정을 소개했습니다. 단순 작업은 효율적이지만 복잡한 기능은 반복 피드백과 디버깅이 필요했습니다.
#Tuist#Vue.js
18500
레퍼런스 없는 광고센터 UX, 어떻게 풀었을까?
레퍼런스가 거의 없는 광고센터를 만들기 위해 영업 사원의 업무 루틴과 기존 운영 방식을 먼저 파악했습니다. 엑셀 기반 관리 구조를 힌트로 삼아 제휴점 단위의 주문·결제 흐름에 맞는 UX로 재설계했습니다.
#UX/UX Design#B2B
7400
Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기
Next.js App Router에서 React Query v5.40.0과 Suspense로 데이터 로딩 전략을 비교했습니다. await 없는 prefetch와 점진적 렌더링으로 더 자연스러운 UX를 얻을 수 있음을 실험했습니다.
#Next.js#App Router
12600
![[Jetpack Compose — Part 2] Compose, 실전에서 빛을 발하다: 코드는 1/4로, 생산성은 4배로!](https://miro.medium.com/v2/resize:fit:1024/1*diRzxSehQGYWsFlGDct9sw.png)
[Jetpack Compose — Part 2] Compose, 실전에서 빛을 발하다: 코드는 1/4로, 생산성은 4배로!
Jetpack Compose를 사내 서비스 UI에 적용한 실전 사례를 소개했습니다. 코드량과 파일 수를 줄이고, 디자인 시스템과 스크린샷 테스트로 생산성과 품질을 함께 높였습니다.
#Android#Jetpack Compose
8300
"이 버튼 왜 안 눌려요?" 물류 현장의 목소리로 PDA 시스템 완성하기
물류 현장 PDA의 제약을 웹과 PWA로 개선한 사례를 다뤘습니다. 스캐너 연동, 화면 최적화, 키패드 이슈 해결로 작업 효율을 높였습니다.
#PWA#웹
12900
React Native에서 Kollus SDK 연동하기
React Native에서 Kollus SDK 연동하기
React Native에서 Kollus SDK를 연동하기 위해 Android와 iOS 네이티브 브릿지 구성 방법을 정리했습니다. 또한 SDK 초기화와 영상 재생 URL 전달 흐름까지 단계별로 설명했습니다.
#React Native#Kotlin
8400