여기어때 해외투어 프론트엔드 구축기록
프론트엔드
여기어때 해외투어 프론트엔드 구축기록
두줄요약
모노레포 기반으로 웹·앱 웹뷰·채팅을 병렬 구축한 과정을 정리했습니다. 컴포넌트 중심 설계와 API 계층화로 QA 대응과 후속 확장을 개선했습니다.
구조와 흐름
- 모노레포 기반으로 웹 19개·앱 웹뷰 18개 라우트와 별도 React·Vite 채팅 앱 병렬 구축
- 플랫폼 Provider와 공통 디자인 시스템을 재사용하고, 웹·웹뷰는 동일 화면 컴포넌트와 일부 플랫폼 분기 공유
- 앱 전용 딥링크·뒤로가기·세션·찜 동기화는 브릿지로 처리
해결 방법
- 아토믹 컴포넌트·복합 컴포넌트·페이지·mock·실 API 순서의 단계적 개발
- 화면에서 transport 함수만 호출하고 mock과 실 API 전환을 함수 내부로 한정
- HTTP 200으로 내려오는 주문 BFF 비즈니스 오류를 예외로 변환하는 공통 래퍼 적용
성능/운영 포인트
- Storybook 스토리 123개와 테스트 파일 41개로 컴포넌트 단위 검수 및 QA 수정 범위 축소
- 공유 패키지 변경을 서비스 브랜치에서 격리하고 master 머지로만 타 서비스 반영
- 상품 이미지 CDN 파라미터 적용으로 전송량 90% 절감
적용해볼 점
- API 함수 위치를 재사용성 대신 소비 범위로 결정하고 호출 함수 단일화
- 결제 진입 방식은 플랫폼별로 분리하되 결과 처리 흐름은 공통화
- 원인 확정 전 프론트 수정 대신 실제 영향 범위 우선 조사
