본문 바로가기

전체 글525

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.
[ 자바스크립트(JavaScript) ] addEventListener의 passive option을 알아보자 📍 addEventListener의 passive option을 알아보자 touchstart 이벤트를 이용해 IOS에서 기존 swipe gesture를 block하고 custom swipe를 적용하던 중 console 창에서 Violation을 마주했다. (Violation은 chrome browser 혹은 web에서 에러를 나타내는 것이 아니라 앱 개선에 도움이 되는 경고를 의미한다.) [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event... 해당 코드는 다음과 같다. const handleTouchStart = useCallback((event: TouchEvent) => { const { client.. 2023. 10. 16.