Frontend173 타임 아웃 처리로 Braze Feature flag 로딩 UX 개선하기 Braze Feature flag 로딩 타임 아웃 처리로 UX 개선하기문제 상황Braze 툴로 A/B 테스트를 구현하는데, braze initialize 후 getFeatureFlag() 호출 시점에서 featureFlag 데이터가 준비되지않아 undefined가 반환되는 이슈가 발생했다. 이로인해 FeatureFlagProvider 내부에서 children이 null로 반환되어 페이지 전체가 렌더링되지 않는 문제가 있었다.접근/해결 방식재시도 로직 추가: feature flag가 없을 경우 refreshFeatureFlags 메서드로 한번 더 호출타임아웃 설정: 네트워크 지연으로 인한 무한 대기를 방지하기 위해 최대 대기 시간 설정로딩 상태 관리: 사용자에게 로딩 중임을 알리고, 타임아웃 후에는 기존 .. 2025. 8. 20. Safari 애플 로그인 이슈 극복기(feat. firebase) ( 이 글은 사내에서 발표한 자료를 바탕으로 작성했습니다. ) 트리플 서비스를 100% 이용하고 싶을 때 필수로 거쳐야 하는 관문이 하나 있습니다. 바로 로그인인데요. 트리플에서는 5가지 방법(이메일, 카카오, 네이버, 페이스북, 애플)으로 로그인할 수 있고, 다양한 방식의 로그인을 쉽게 사용하도록 도와주는 firebase를 사용하고 있습니다. 이처럼 트리플에서는 firebase의 도움을 받아 다양한 로그인(이메일 / 비밀번호 기반 인증, ID 공급업체 인증, 전화번호 인증, 커스텀 인증 등)을 쉽고 빠르게 구현할 수 있었습니다. firebase API Reference를 살펴보면 카카오와 네이버는 커스텀 인증(signInWithCustomToken)을 사용하고, 애플만 ID 공급업체 인증방식(sign.. 2025. 8. 14. CHANGELOG 자동화하기 ( 이 글은 사내에서 발표한 자료를 바탕으로 작성했습니다. ) 개인 프로젝트 혹은 다른 동료와 협업을 할 때 각 버전에 맞는 변경사항을 시간순서대로 작성하기 위해 우리는 CHANGELOG.md 파일을 이용하고 있습니다. 덕분에 기계가 아닌 사람들(개발자 혹은 User)이 해당 프로젝트의 각 릴리즈 버전 간의 차이점을 한눈에 파악해 어떤 점이 왜 바뀌었는지 명확하게 알 수 있습니다. 기계가 아닌 사람이 필요로 하기 때문인지는 몰라도 매번 프로젝트의 버전이 바뀔 때마다 직접 손으로 작성합니다. 버전을 드문드문 (예를 들면 2주에 한 번 정도..)변경한다면 불편함이 없겠지만, 팀원이 많거나 FEATURE/FIX 작업이 많을 때 3일에 한 번 혹은 하루에 한 번씩 버전을 변경하는 때도 있습니다. (최근 TF에.. 2025. 8. 14. 혼자보다 둘이 작업하는, 페어 프로그래밍을 해볼까? ( 이 글은 사내에서 발표한 자료를 바탕으로 작성했습니다. ) 안녕하세요! 입사 6개월차를 향해 달려가는 서비스 프론트엔드 팀의 ted입니다. 👋🏾👋🏾 입사 4개월 정도까지 새로운 기능 및 디자인 추가/수정하는 작업을 맡았으나, 최근엔 오래된 패키지를 새로운 패키지로 대체하는 작업(e.g. MUI-DateAndTimePickers -> TC-DateInput), 오래된 버전을 최신 버전으로 업그레이드하는 작업(e.g. TF 패키지 ^1.34.0 -> 9.6.0), 어드민 페이지에 새로운 기능을 추가하여 각 프로젝트에 적용하는 작업(e.g. 아티클 어드민 이미지 분할, 카탈로그 어드민 라운드 탭 기능 적용)등을 담당했습니다. 제 관점에서는 작업이 쉽지 않다 보니 빠른 속도로 결과물을 만들기 어렵고.. 2025. 8. 14. 결제 콜백 페이지 적용 중 serverRuntimeConfig를 다뤄보며.. 📍 결제 콜백 페이지 적용 중 serverRuntimeConfig를 다뤄보며..기존에 하나의 서비스에서만 사용하던 빌링 모듈을 인터파크와 놀 모두에서 사용할 수 있는 통합 빌링 모듈로 마이그레이션하는 작업을 진행했다. 이 과정에서 결제수단을 신용카드로 선택하면, 기존에 없던 이니시스(Inicis) 콜백 페이지가 새로 필요하게되었다. (기존에는 토스페이먼츠만 사용하고있었다.)이니시스의 경우, 결제 콜백이 /api/payments/[id]/[paymentAgency]와 같은 API 라우터 내부에서 실행된다. 이 구조는 기존 토스페이먼츠와 달리 서버사이드에서만 동작하기 때문에 serverRuntimeConfig 환경변수를 사용하고있다.✅ serverRuntimeConfig란?serverRuntimeConfi.. 2025. 8. 5. 이전 1 2 3 4 ··· 35 다음
