Feat: 프론트(React Native)에서 사용자 입력 최적화하기

내 사이드 프로젝트앱에서 검색 입력 시마다 API가 과도하게 호출되어 앱 퍼포먼스에 영향을 주는 문제를 해결하기 위해 lodash.debounce를 도입했다. 또한 setInterval, throttle과 debounce를 비교 분석해보며 어느 상황에서 어떤 메서드의 사용이 적합한지 알아보았다.

1 / 5

Feat: 프론트(React Native)에서 사용자 입력 최적화하기

Optimization

3821

Yoy0z-maps

Fix: 에디터 수정 내용 미반영 이슈 해결 (Next.js fetch, React key와 상태관리, TipTap)

React

TipTap 에디터 수정 페이지에서 과거 글이 표시되는 문제를 해결한 경험을 공유합니다. Next.js의 fetch 캐싱과 React 상태 관리, 그리고 TipTap의 초기화 방식이 원인이었습니다. cache: "no-store" 설정과 useState, useEffect를 활용해 데이터 흐름을 관리하고, key 속성으로 컴포넌트를 리마운트해 최종적으로 해결했습니다. 이 경험을 통해 React의 key 개념과 캐싱 동작 방식의 중요성을 다시 체감했습니다.

3821

Yoy0z-maps

Fix: React 슬라이드 UI 이미지 지연과 깜빡임 현상 수정하기

React

프론트엔드 블로그 UI를 개발하던 중, 이미지가 텍스트보다 늦게 렌더링되면서 애니메이션 타이밍이 어긋나는 문제가 발생했다.특히 네트워크 속도가 느릴 때 이미지가 깜빡이거나 애니메이션이 제대로 작동하지 않는 현상이 자주 발생했다. 이를 해결하기 위해 onload와 decode()의 차이를 비교하고, decode()를 활용해 이미지가 렌더링까지 준비된 후에 애니메이션을 실행하도록 개선했다.

3821

Yoy0z-maps

프론트에서 데이터 캐싱을 통해 최적화 진행하기

Caching

지도 기반 부동산 검색 서비스에서 서버 과부하 문제를 해결하기 위한 캐싱 전략을 소개합니다. 모든 매물을 불러오는 초기 요청으로 인해 백엔드 서버가 과부하되자, 브라우저 localStorage를 활용한 클라이언트 캐시 방식으로 접근했습니다. 1시간 유효기간의 캐시 데이터를 기준으로 필터링과 바운드 변경을 클라이언트에서 처리해 성능을 최적화했습니다. 또한 캐시 유효성 검사, 예외처리, 재사용 가능한 유틸 함수로 추상화해 유지보수성도 높였습니다.

3821

Yoy0z-maps

사용자 입장에서 생각하고 만들어가는 웹 배너 광고

UI/UX

웹 리뉴얼과 함께 모바일 점유율을 높이기 위한 상단 띠 배너 도입 사례를 공유합니다. 팝업 대신 사용자 경험을 해치지 않는 배너를 선택하고, F-Pattern 시선 흐름을 고려해 QR코드와 간결한 문구로 구성했습니다. 또한 사용자의 스크롤 행동에 따라 배너가 자연스럽게 숨겨지고 나타나도록 애니메이션 처리해 접근성과 UX를 동시에 잡았습니다. Next.js와 Tailwind CSS로 구현된 실제 코드도 함께 소개합니다.

3821