웨더타고 - TAVE 15기 연합프로젝트 프론트엔드 회고

웨더타고 프로젝트 회고

[교통약자를 위한 기상에 따른 지하철 혼잡도 예측 정보 및 편의시설 제공 서비스] 웨더타고 - TAVE 15기 연합 프로젝트

---

참여한 주요 기능

• 온보딩 및 로그인 인증 플로우 개발
• 지하철역 즐겨찾기 기능 구현
• 리모트 알림 서비스 개발

---

기술 스택 및 선택 배경

프레임워크	React Native (Expo)	React와 유사한 문법을 그대로 활용할 수 있고, Expo가 네이티브 설정을 간소화해줘서 앱 입문에 적합
언어	TypeScript	컴파일 타임에 에러를 잡아줘 디버깅 효율 향상, 런타임까지 가기 전 안전장치로 유용
상태 관리	Context API	Redux나 Zustand보다 학습 부담이 적어, React 기본 기능부터 체득하기 위해 선택
네트워크	Axios	익숙한 방식의 요청/응답 처리, 인터셉터 구현이 간단하여 선택
네비게이션	Expo Router	파일 기반 라우팅으로 생산성 향상, 기존 React 경험과 연결성이 좋음
스타일링	Emotion	앱 환경에서 Tailwind 적용이 어려워 CSS-in-JS 방식을 선택. Styled-Components의 대안으로 채택

---

 

주요 이슈 및 회고

📅 6/25 – 환경변수 관리, 초기 설정 이슈

• .env 파일에서 EXPO_PUBLIC_ 접두사를 붙이면 Expo에서 안전하게 환경변수 사용 가능
• babel과 expo-router의 충돌이 발생했으나, 설정 우선순위 확인으로 해결

✅ 교훈: 기술 문서만으로 부족할 땐 ChatGPT로 빠르게 방향을 잡고, 정확한 디버깅은 직접 설정을 뜯어봐야 함

---

📅 6/26 – 흐름이 정립되지 않은 개발의 위험

• 백엔드 명세 없이 먼저 프론트 개발을 진행했더니, 추후 리팩토링 범위가 커짐
• 화면 흐름도 불명확한 채 진행한 탓에 작업 중단 및 재설계가 필요했음

✅ 교훈: 애매한 상태로 "일단 구현"하기보다는 명확한 흐름, API 구조가 확보된 뒤 착수하는 것이 오히려 빠르고 안정적

---

📅 6/27 – 앱 초기화 구조 설계

• 앱 초기화(Splash) 단계에서 인증 정보를 로딩하려 했지만, AuthProvider와 AppLoader의 렌더링 타이밍이 맞지 않아 충돌 발생
• 결국 앱 초기화와 사용자 인증을 분리하는 방식으로 구조 재설계

✅ 교훈: 모든 역할은 분리해서 설계하는 것이 유지보수성과 디버깅 편의성을 높여준다

---

📅 7/21 – 탈퇴 후 인증 상태 제어 문제

• 탈퇴 API 호출 후 "이미 탈퇴된 사용자"라는 에러 발생
• 원인은 탈퇴 후 인증이 끊긴 상태에서 Authorization이 필요한 API를 요청한 것이었음
• 인증 확인 후 요청하도록 로직을 정리해 해결

✅ 교훈: 인증 상태가 바뀐 직후의 API 요청은 항상 신중하게 다뤄야 한다. 상태 변화 이후의 흐름 제어가 중요

---

📅 7/23 – querystring stringify 에러 & Stack Overflow 기반 해결

• querystring.stringify is not a function 에러 발생, 원인은 의존성 버전 충돌
• 구글링 중 Stack Overflow에서 같은 문제를 겪은 사례를 발견하여, package.json의 overrides 설정으로 해결

✅ 교훈: GPT보다 같은 에러를 겪은 개발자의 실전 경험이 더 정확한 힌트를 줄 수 있다. 복잡한 디버깅은 구글링이 훨씬 강력하다

---

📅 7/26 – 탭 전환 UX 개선 & Optimistic UI

• 탭 전환 시 화면이 늦게 반응한다는 피드백 발생
• Optimistic UI를 고려했지만, 과거 favoriteIds를 로컬에서 낙관적으로 처리하다가 데이터 정합성 문제가 발생한 경험이 있어 주의가 필요하다는 점을 떠올림
• 이를 바탕으로 Tanstack Query의 staleTime, gcTime, queryKey 등을 활용한 캐시 기반 조회 구조로 개선하는 방향을 고민함

✅ 교훈: Optimistic UI는 UX를 향상시키지만, 로컬 상태와 결합되면 정합성 관리가 어렵다. 서버 기반 캐시 구조로 단순화하는 설계가 더 효과적이다

---

총괄 회고

이번 프로젝트를 통해 처음으로 앱을 직접 개발하면서, 웹과는 전혀 다른 앱 환경의 제약과 흐름을 체험했다.
단순히 기능 구현에 집중하는 단계를 넘어, 상태 관리, 인증 흐름, 네트워크 요청 구조, UI 반응성, 캐시 설계 등 다양한 차원의 고민을 할 수 있었고, 그 과정에서 실제 문제를 마주하고 해결해보며 개발자로서 한층 성장할 수 있었다.

특히, 다음과 같은 점에서 많은 인사이트를 얻었다:

• 낙관적 업데이트 설계의 이면
• AI와 구글링의 각기 다른 장점
• 구조 설계와 역할 분리의 중요성

앞으로는 기능을 빠르게 구현하는 것뿐만 아니라, 데이터 흐름을 예측 가능하게 유지하고, 구조적으로 유지보수하기 쉬운 코드를 짜는 데 더 집중할 계획이다.