항공 프론트엔드 구축기 (8/10): 토큰이 세 군데서 온다
Summary
웹과 웹뷰의 영원한 난제, 인증 토큰을 우아하게 일원화하는 방법
쿠키, 앱 세션, 직접 요청까지 3갈래 토큰 길을 하나로 묶어낸 하이브리드 인증 구축 가이드
웹과 하이브리드 앱 웹뷰 환경이 공존하는 복잡한 서비스에서 어떻게 안전하고 깔끔하게 로그인 상태를 유지할 수 있을까요? 이 아티클은 각 환경의 토큰 공급 채널 분기 문제를 httpOnly 쿠키와 서버 액션을 활용한 단일 파이프라인으로 통합하는 실무 아키텍처를 소개합니다. 프론트엔드 비즈니스 레이어에 환경별 예외 처리가 오염되지 않도록 비동기 마운팅 문제를 해결하는 영리한 기법들을 엿볼 수 있습니다.
- 01쿠키와 앱 웹뷰 브릿지라는 상이한 토큰 수급 구조를 서버 액션을 활용해 httpOnly 쿠키 단일 모델로 대통합
- 02Next.js에 대한 의존성을 제거하고 이식성을 높이기 위해 비즈니스 조건부 로직만 추상화한 공용 라이브러리 useAuthCore 설계
- 03로그인 완료 후 React Context 영역 밖에서 발생하는 동기화 시차 문제를 DOM의 데이터 속성(data-logged-in)을 활용해 완벽하게 극복
- 04앱 빌드의 모바일 브라우저 테스트 등 특수 상황을 고려한 분기 조건 관리 및 좀비 토큰의 클라이언트 단 사후 정화 처리
RECOMMENDATION
웹과 웹뷰를 동시에 지원하는 하이브리드 앱을 설계 중이거나, 프론트엔드 비즈니스 로직에 플랫폼(Web/App) 의존성이 침투해 유지보수에 고통받는 개발자에게 강력히 권장합니다.
The Problem
웹(쿠키)과 앱 웹뷰(브릿지) 등 접속 환경에 따라 인증 토큰이 제공되는 경로가 달라, 각 화면단 코드에서 이를 분기 처리할 경우 토큰 노출 보안 위협(XSS) 및 환경별 비즈니스 로직 결합 문제가 발생했습니다.
The Solution
웹, 앱 세션, 앱 직접 요청의 세 가지 경로로 들어오는 토큰을 서버 사이드를 통해 단일 'httpOnly' 쿠키에 통합 저장하고, Next.js 의존성 없는 공용 커스텀 훅 useAuthCore를 설계하여 환경과 무관하게 회원 조회를 일원화했습니다.
The Result
화면단 코드를 단축(useAuth)하였고 SSR 환경에서도 일관되게 토큰을 처리해 첫 화면 로딩을 최적화했으며, React 외부의 브릿지 호출 상태도 DOM 속성 기반 관찰로 정밀하게 제어해 비동기 상태 불일치 현상을 제거했습니다.
Trade-off
화면 코드가 단순화된 대신 라이브러리 내부 복잡도가 증가해 의존성 배열 오설정 시 무한 루프가 생길 위험이 있고, SSR 환경에서 유효하지 않은 '좀비 토큰'을 실시간으로 즉시 삭제하지 못해 클라이언트 사이드 하이드레이션 이후 삭제해야 하는 한계가 존재합니다.
Key Concepts
More from 여기어때
View all posts from 여기어때항공 프론트엔드 구축기 (10/10): 폴더 이름 앞의 기호 하나
Frontend ArchitectureDirectory StructureFeature-Sliced Design3시간 전AI가 내 하루를 기억하게 하는 법 (1/2): 먼저, 기억할 곳을 만들었다 — 개인 LLM 위키
LLMMarkdown WikiContext Window3시간 전[2편] Grafana 커스텀 패널로 10만 점 산점도 그리기 — 만들고 나서야 보인 함정 3가지
GrafanaCanvas APIReact3시간 전[1편] APM 스캐터 차트 직접 만들기 — OpenTelemetry 수집과 ClickHouse 저장
OpenTelemetryClickHouseAPM3시간 전전시 QA에서 예약·정산 QA로 넘어가며 달라진 관점들
QA-TestingData-ConsistencyState-Table3시간 전