REACT 2

[React] 사용자 경험을 극대화하는 '낙관적 업데이트(Optimistic Update)'와 주의할 점

개발을 하다 보면 "서버 응답을 기다리는 짧은 시간조차 사용자에게는 지루함이 될 수 있다"는 고민을 하게 되었다. 특히 좋아요 버튼, 삭제, 수정처럼 사소하고 빈번하게 일어나는 작업에서 더더욱... 오늘은 진행 중인 프로젝트 '코르크차지(CorkCharge)'의 그룹 관리 기능을 구현하며 적용한 낙관적 업데이트와 그 과정에서 마주친 Race Condition(경쟁 상태) 문제 해결 과정을 적어보려고 한다.1. 낙관적 업데이트(Optimistic Update)란?낙관적 업데이트는 "서버로 보낸 요청이 성공할 것이라고 낙관적으로 가정"하고, 서버 응답이 오기 전에 UI를 먼저 업데이트하는 기법이다.일반적인 방식: 요청 → 대기(Loding) → 응답 완료 → UI 업데이트 (느린 네트워크에서 답답함 유발)낙..

[project] 코르크차지 바텀시트 중첩구조로 인한 topSnapVh 관련 이슈 해결을 위해 DOM 조작하기

문제 상황우리 프로젝트는 현재 지도 페이지에서 특정 버튼 또는 클릭의 여부에 따라 사전에 구현해둔 바텀 시트에 children 컴포넌트를 각각 분기처리하여 그때 그때 필요한 컴포넌트를 바텀시트로 띄우곤 한다. 현재 프로젝트의 코드 구조는 간략히 아래와 같다.// CorkageMap.tsx 의 일부. 각 컴포넌트의 props는 생략...... {/* 바텀시트: 저장한 매장 or 멀티핀 리스트 */} {sheetView === 'list' && ( )} {sheetView === 'store' && } {sheetView === 'multipin' && } {/* [추가] Detail 컴포넌트 렌더링 (ID ..

개발/프로젝트 2026.02.21