본문 바로가기

API

React 앱에서 OAuth 1.0 인증 처리하기 OAuth 1.0은 요청 서명(HMAC-SHA1), nonce, timestamp를 기반으로 동작하는 인증 방식입니다. React 같은 프론트엔드 앱에서 직접 서명을 처리하면 비밀키 노출 위험이 있어, 일반적으로 백엔드 프록시가 서명과 토큰 교환을 담당하고 프론트엔드는 최소한의 흐름만 제어합니다.1. OAuth 1.0 흐름 요약일반적인 3-legged OAuth 1.0a 흐름은 다음과 같습니다.1) 요청 토큰 받기: 서버가 consumer key/secret으로 서명한 POST를 제공자에 보내 요청 토큰(oauth_token, oauth_token_secret)을 받습니다.2) 사용자 승인: 프론트엔드가 제공자의 authorize URL로 리다이렉트하여 사용자가 승인을 완료합니다.3) 액세스 토큰 교환:.. 더보기
React Query로 API 데이터 관리 자동화하기 React 프로젝트에서 API 데이터를 관리하는 것은 복잡하고 반복적인 작업일 수 있습니다. 상태 관리, 캐싱, 리패칭 등을 직접 구현하기보다 React Query를 활용하면 자동화된 데이터 관리를 쉽게 할 수 있습니다.1. React Query란?React Query는 서버 상태 관리를 간편하게 해주는 라이브러리입니다. 데이터 패칭, 캐싱, 백그라운드 리패칭, 에러 핸들링 등 비동기 데이터를 효율적으로 다룹니다.2. React Query 설치와 기본 사용법먼저 React Query와 필수 의존성인 react-query 패키지를 설치합니다.npm install @tanstack/react-query기본적인 사용법은 QueryClient와 QueryClientProvider를 최상위 컴포넌트에 설정한 뒤,.. 더보기