피드로 돌아가기
Dev.toFrontend
원문 읽기
React Native 기반 캠퍼스 앱의 레거시 버그 해결 및 실시간 아키텍처 고도화
I abandoned my campus app 3 years ago. The Finish-Up-A-Thon made me fix it
AI 요약
Context
3년 전 구축된 React Native 기반 공지사항 애그리게이터의 기술적 부채 해결이 필요함. Redux 비동기 업데이트로 인한 Race Condition, AsyncStorage의 타입 불일치로 인한 캐싱 실패, CORS 설정 오류 등 런타임 안정성 결여가 주요 병목 지점임.
Technical Solution
- Redux State 업데이트 지연 문제를 해결하기 위해 useEffect 기반의 isAuthenticated 상태 관찰 패턴 도입
- AsyncStorage 반환값인 String 타입을 parseInt로 명시적 변환하여 타임스탬프 비교 로직의 NaN 발생 원인 제거
- 중복된 prefix 매핑 로직을 단일 유틸리티(prefixMap.js)로 통합하여 단일 진실 공급원(Single Source of Truth) 구조 설계
- Socket.io를 활용하여 실시간 채팅 룸 및 타이핑 인디케이터를 구현한 Event-Driven 통신 구조 구축
- PanResponder와 rotateX/Y 보간법을 적용하여 3D Campus ID Card의 인터랙티브 UI 구현
- 하드코딩된 API URL 및 디자인 토큰을 constants 폴더로 중앙 집중화하여 유지보수성 향상
실천 포인트
- 비동기 상태 업데이트 후 즉시 페이지 이동 시, Closure 내 stale value 참조 여부를 확인하고 useEffect 등의 상태 관찰 패턴 적용 - AsyncStorage 등 키-값 저장소 이용 시 반환 타입이 항상 String임을 인지하고 명시적 타입 캐스팅 수행 - 다수의 파일에서 반복되는 조건문 분기 로직은 별도 맵(Map) 객체나 유틸리티 함수로 추상화하여 중복 제거 - 외부 라이브러리 업데이트 시 Breaking Changes를 방지하기 위해 버전 관리 전략 및 마이그레이션 가이드 확인