Fly:On

• 사용자는 여러 비행·관광 일정을 손가락으로 끌어 원하는 순서에 놓아야 했습니다. React Native에는 이 흐름을 그대로 제공하는 Drag & Drop API가 없어 제스처, 카드 위치 계산, 목록 순서 변경을 직접 연결해야 했습니다.
• 이 과정에서 드래그 좌표가 바뀔 때마다 목록 전체가 다시 렌더링되면 카드가 손가락 움직임을 늦게 따라왔습니다.

• PanResponder로 손가락 이동을 추적하고 각 카드의 layout을 측정해 어느 위치로 옮길지 계산했습니다. 이동 중인 카드는 floating layer에서 따로 그려 목록 전체가 제스처 좌표를 따라 갱신되지 않게 했습니다.
• React DevTools Profiler로 같은 동작을 전후 비교한 뒤 React.memo와 Zustand selector를 적용했습니다.

같은 로컬 동작을 전후 비교한 결과, React DevTools Profiler의 total commit duration은 211.5ms → 72.9ms, 평균 commit duration은 17.6ms → 6.6ms로 줄었습니다.

• 사용자가 아직 저장하지 않은 선택값과 서버에 이미 저장된 일정 데이터를 같은 상태로 관리하면, 단계 이동이나 재조회 때 작성 중인 값이 덮일 수 있었습니다.

• 일정 생성 단계와 사용자의 선택값은 Zustand의 useScheduleStore가 관리하고, 일정·관광지·숙소처럼 서버가 원본인 데이터는 TanStack Query가 관리하도록 나눴습니다.
• 다음 단계로 이동할 수 있는 조건은 validateNextStepEnabled 순수 함수로 분리하고 Jest 테스트를 작성해 화면과 무관하게 검증했습니다.

• 사용자가 제주 지역을 골랐는데도 지도가 전국 범위로 열리거나 이동할 때마다 장소를 다시 요청하면, 원하는 장소를 찾기 어렵고 네트워크 요청도 늘어났습니다.

• 지도 이동 범위를 선택 지역의 boundary로 제한했습니다. marker 조회에는 TanStack Query의 enabled와 staleTime을 적용해 좌표가 준비된 뒤 요청하고, 짧은 시간 안에는 같은 데이터를 다시 가져오지 않게 했습니다.

• 앱을 시작하자마자 로그인 여부를 판단하면 보안 저장소에서 token을 읽기 전까지 기존 사용자도 비로그인 상태로 처리됐습니다. 이때 로그인 화면이 잠시 나타나거나 인증이 필요한 API가 먼저 실행될 수 있었습니다.

• 앱 시작 시 SecureStore에서 token을 복원하는 준비 상태를 두었습니다. 복원이 끝난 뒤에만 인증이 필요한 화면과 Query를 활성화해 화면 깜빡임과 불필요한 요청을 막았습니다.