조용진의 개발 블로그블로그 자동화 토큰을 권한별 Credential로 바꾼 이유
하나의 정적 토큰을 원문 비저장, scope, 만료, 폐기와 감사 로그를 갖춘 Credential로 바꾸고 초안 작성과 공개 발행 권한을 분리한 과정입니다.
기록하고,
배우고,
나눕니다.
복잡한 문제를 풀며 얻은 배움과 오래 남기고 싶은 생각을 차분히 기록합니다.
최근 글
23:30~01:00 수업을 어떻게 저장할까: 자정 넘김 시간표 모델링
종료 요일 오프셋을 도입하고 주간 좌표로 겹침을 판정해 자정 넘김 일정을 API·관리자 화면·학부모 시간표·PDF까지 일관되게 처리한 과정입니다.
브라우저 TTS를 Web Worker와 WebGPU 폴백으로 안정화한 과정
브라우저 TTS 추론을 Worker로 분리하고 WASM·WebGPU 실행 경로와 폴백을 구성해 UI 응답성을 지킨 과정을 정리합니다.
Vite 초기 번들에서 선택 기능 의존성을 분리한 방법
lodash 사용 범위를 줄이고 xlsx·Firebase 등 선택 기능을 지연 로딩과 manualChunks로 분리한 번들 최적화 과정을 정리합니다.
SwiftUI와 libmtp 사이에 취소 가능한 파일 전송 큐 만들기
macOS와 Android 사이의 MTP 파일 전송을 Swift actor로 직렬화하고 C 콜백을 진행률·취소·실패 재시도가 가능한 큐로 연결한 개인 프로토타입 기록입니다.
삭제는 숨김이 아니었다: 수업 소프트 삭제를 조회·신청·승인까지 연결한 과정
참조 이력을 보존하면서 삭제 수업을 신규 선택에서 제외하고, 오래된 신청의 저장·승인을 API와 UI 양쪽에서 차단한 과정을 정리합니다.
React Native 앱에 패스키를 붙이며 웹과 달랐던 세 가지
Android·iOS 네이티브 브리지, WebAuthn begin·finish API, origin 설정과 도메인 association 배포를 하나의 패스키 신뢰 관계로 연결한 과정입니다.
중복 결제 요청을 하나의 결과로 수렴시키는 다층 멱등성 설계
결제 버튼, 로컬 재전송, 여러 API 인스턴스의 동시 요청을 프런트 잠금·Redis 분산 락·기존 거래 재조회로 한 결과에 수렴시킨 과정을 정리합니다.
승인과 저장 사이의 실패를 보상 거래로 복구한 결제 무결성 설계
결제 승인 뒤 데이터 불일치·중복 승인·저장 전 예외가 발생하면 자동 승인 취소로 복구하는 보상 거래 설계를 정리합니다.
카카오 인앱 브라우저와 결제 WebView의 터치 동작을 보강한 과정
카카오 인앱 브라우저의 외부 브라우저 전환과 결제 WebView의 safe area·스크롤·터치 동작을 개선한 과정을 정리합니다.
캐시를 지웠는데도 불안했던 이유: React Query queryKey에 데이터의 소유자를 담기
지점 전환 뒤 이전 지점 데이터가 노출되던 문제를 캐시 삭제로 먼저 막고, queryKey에 지점 식별자를 포함하는 구조로 개선한 과정을 정리합니다.
동시 401 요청을 하나의 토큰 갱신 Promise로 합친 방법
여러 요청에서 동시에 발생한 401 응답이 토큰 갱신을 중복 실행하지 않도록 Promise를 공유하고 재시도 횟수를 제한한 과정을 정리합니다.
지문 인식 프로토콜을 TypeScript npm 패키지로 만든 과정
SFM 지문 인식기의 패킷 생성·검증을 공통화하고 Serial·TCP 전송 계층을 분리해 npm 패키지로 배포한 과정을 정리합니다.
React Native 청구서 화면의 하드코딩 문구를 i18n으로 모듈화한 과정
React Native 관리자 앱의 청구서 문구를 도메인별 한국어·영어 리소스로 분리하고 react-i18next 번역 키로 단계적으로 전환한 과정을 정리합니다.
느려진 React 테이블을 가볍게: 1만 건 검증과 프로덕션 적용
1만 건 데이터에서 React 테이블의 전체 DOM 렌더링 병목을 확인하고 가상화를 적용해 프로덕션에 반영한 과정을 정리합니다.
MQTT 재연결의 네이티브 스레드 누수를 막은 과정
키오스크 MQTT 연결에 Socket 폴백과 재연결 상태 제어를 추가하고 클라이언트 제거로 네이티브 스레드 누수를 막은 과정을 정리합니다.
Loki 라벨 카디널리티를 화이트리스트로 제어한 과정
React Native 키오스크 로그의 배치 전송을 구성하고 고유값을 본문으로 분리해 Loki 라벨 카디널리티를 제한한 과정을 정리합니다.
React Native 0.79 전환과 Android 16KB 페이지 대응기
React Native 0.79 전환, Swift AppDelegate 변경과 Android ABI·native library 구성을 함께 정비한 과정을 정리합니다.
React Native 키오스크의 Detox E2E를 iOS·Android로 분리한 과정
React Native 키오스크의 핵심 사용자 흐름을 Detox로 자동화하고 testID, 플랫폼별 실행 조건, 실패 artifacts를 정비한 과정을 정리합니다.
React Native 0.79 전환 중 Recoil을 Zustand로 교체한 과정
React Native 0.79 마이그레이션과 함께 Recoil 전역 상태를 Zustand 5 store로 옮기고 초기화 책임을 단순화한 과정을 정리합니다.
페이지 권한에서 Feature·Role 권한 매트릭스로 확장한 과정
사용자·요금제 단위의 초기 권한 검사에서 그룹 권한과 Feature·Role 권한 매트릭스로 확장한 과정을 정리합니다.
키오스크 테마 표준화와 배리어프리 입력 충돌을 해결한 과정
키오스크 공통 테마와 컴포넌트를 정비하고 배리어프리 모드에서 터치 이벤트가 겹치던 문제를 해결한 과정을 정리합니다.
Lambda handler를 ECS 상시 실행 컨테이너로 옮긴 과정
Express 기반 LLM API에서 serverless handler를 제거하고 Docker·ECR·ECS Fargate와 GitHub Actions 배포 흐름을 구성한 과정을 정리합니다.
React 랜딩을 Next.js SSG로 전환해 검색봇이 읽을 HTML을 만든 과정
기존 React SPA 랜딩의 JavaScript 렌더링 의존성을 줄이기 위해 Next.js App Router와 SSG를 도입하고 Googlebot·네이버 Yeti가 읽을 HTML, metadata, sitemap을 구성한 과정을 정리합니다.
결제 구간만 Session Replay를 수동 수집한 관측성 설계
Datadog Session Replay를 결제 구간에서만 수동으로 시작·종료하고 입력값 마스킹과 화면 추적을 적용한 과정을 정리합니다.
라우트 사이 관리자 정보를 Zustand로 공유해 Props Drilling을 없앤 방법
서로 다른 라우트에서 필요한 관리자 정보를 Zustand store로 공유하고, 화면 계층의 props 전달과 세션 상태 책임을 분리한 과정을 정리합니다.
키오스크 하드웨어 이벤트를 Custom Hook으로 분리한 과정
지문 인식기·소켓·QR·원격 제어 로직을 역할별 Custom Hook으로 분리하고 이벤트 구독과 정리 책임을 명확히 한 과정을 정리합니다.
메시지 내역을 서버 페이지네이션으로 전환한 과정
전체 메시지 내역을 한 번에 조회하던 구조를 페이지 단위 서버 조회로 바꾸고 검색 시 페이지 상태를 일관되게 관리한 과정을 정리합니다.