문제 해결

1. 마지막 응답이 아니라 최신 요청이 이기게 만들기 — Vue·Pinia 비동기 경합 방어

   웰컴 체크인 구매미션 화면은 상품 목록과 오늘 참여 가능한 횟수를 조회합니다. 처음에는 화면 진입 시 한 번 조회하는 단순한 흐름처럼 보였습니다. 기능이 확장되면서 같은 조회가 화면 재진입, 참여 성공 후 silent refresh, 슬롯 충돌 복구에서 반복됐습니다.

2. BO 미리보기 페이지와 운영페이지의 중복 제거

   - BO 미리보기 페이지와 운영 중인 페이지를 보여주는 컴포넌트가 각각 다르고, 거의 대부분이 중복된 코드로 되어있습니다. - api 데이터가 정상적으로 받아졌는지 확인 후, 컴포넌트에 데이터를 삽입하는 로직이 모든 컴포넌트에 중복됩니다.

3. common에 선언한 window 프로퍼티가 vueapp 중복 생성으로 Overide

   vue 페이지들을 관할하는 app과 jsp에 vue 컴포넌트를 심기 위해 구현한 eappCommonContainer로 2개의 vueapp이 존재합니다.

4. JavascriptInterface 사용해 동시 호출 씹힙 현상 방지하기

   1. 2개 이상의 앱 스킴을 동시에 호출할 경우, 1개를 제외한 나머지는 씹히는 현상이 있었습니다. typescript emart.app.cmd('페이지 이동'); emart.app.cmd('페이스 아이디 열기'); // 동작하지 않음.

5. 개발 서버에서 웹소켓 프로토콜이 운영서버로 프록시 되는 현상

   앱 Datadog에서 운영 서버에 https://[production-domain]:443/ws 에러가 단기간 100회 이상 추출되었습니다.

6. 순환 참조 문제

   hooks/common.ts 에 선언한 throttle 함수를 pinia stores/modules/api.ts 에서 호출하다가 throttle 함수를 찾지 못하는 에러가 발생했습니다. 이 원인을 모듈시스템의 순환참조 문제로 보고 접근했습니다.

7. 알림함 목록 디코딩

   네이티브로 구현되어있던 알림함 페이지를 vue로 옮기게 되었습니다.

8. 프론트 모니터링 script error 해결책에 대하여

   재현

9. grep이 침묵하는 하이브리드 앱에서 DynamoDB 저장 HTML과 iOS 델리게이트 추적으로 브릿지 수정 지점을 확정하기까지

   이커머스 모바일앱은 네이티브 셸 위에 여러 웹뷰가 얹힌 하이브리드 구조다. 웹 페이지는 커스텀 스킴(emart-today://...)을 iframe에 실어 발화하고, 네이티브가 이를 가로채 페이지 이동, 앱 기능 호출 등을 수행한다.

10. CDP 하네스가 실기와 다른 결과를 낼 때, orca tap + simctl log stream으로 웹뷰-네이티브 레이스를 ms 단위로 확정하기

    하이브리드 앱의 웹뷰 이벤트 페이지에서, 사용자가 룰렛을 돌려 쿠폰을 받는 플로우의 마지막 단계 — 커스텀 스킴 발화와 iframe 내비게이션이 거의 동시에 일어나는 구간 — 에서 결과가 갈리는 레이스가 의심됐다.

11. 문서 커밋이 pending 타이머를 폐기하는 WebView 제약에서, 스킴 동기 발화 + reload 지연으로 순서를 뒤집어 앱스킴 레이스를 제거하다

    하이브리드 앱의 웹 페이지에서 네이티브 기능을 호출할 때, 오래된 방식이지만 여전히 널리 쓰이는 패턴이 있다. 숨겨진 iframe의 src에 커스텀 스킴 URL을 할당하면 WebView가 이를 가로채 네이티브 핸들러로 전달하는 방식이다.

12. 재현 안 되는 웹뷰 앱스킴 버그에서, CDP 하네스를 기각하고 네이티브 로그 ms 판정으로 9ms 타이머-reload 레이스를 확정하기

    하이브리드 앱의 이벤트 페이지(룰렛)에는 당첨 시 웹에서 앱스킴을 호출해 네이티브 화면으로 전환하는 흐름이 있다. 필드 리포트는 한 줄이었다. "페이지를 새로고침한 뒤에만 앱스킴이 동작하지 않는다."

13. 운영 로그 1% 걸음수 초기화 — 네이티브-웹 상태 불일치 디버깅 3회 피봇으로 root cause 추적

    이마트 모바일앱 내 걷기 미션 서비스에서, 운영 중 약 1%의 유저 걸음수가 갑자기 0으로 초기화되는 현상이 보고됐습니다.

14. BrowserStack App Live에서 네이티브 앱 웹뷰 → 로컬 dev 서버 연결 환경 구축 (DNS/SSL/쿠키/ALB 4중 장벽 해결)

    BrowserStack 실기 디바이스에서 네이티브 앱 웹뷰로 로컬 dev 서버를 접속할 수 있는 환경을 구축. DNS NXDOMAIN, SSL 인증