본문 바로가기

spa

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 앱에서 사용자 세션 타이머 및 자동 로그아웃 구현하기 사용자 세션이 만료되었는데 계속 접근이 가능한 상태는 보안 리스크로 이어집니다. 반대로 너무 공격적인 타임아웃은 사용자 경험을 해칩니다. 이 글에서는 React 앱에서 사용자 활동 기반 세션 타이머와 자동 로그아웃을 실무적으로 구현하는 방법을 설명합니다.1. 목표와 설계 전략목표는 두 가지입니다. 첫째, 사용자가 일정 시간 동안 아무 활동이 없으면 자동 로그아웃합니다. 둘째, 토큰의 만료 시간을 기준으로 절대 만료를 강제합니다. 이를 위해 로컬 상태와 localStorage로 탭 간 동기화, 사용자 활동 이벤트, setTimeout 기반 타이머, JWT exp 파싱, 토큰 갱신 훅과 Axios 인터셉터를 결합합니다.2. 핵심 개념 요약활동 기반 타임아웃은 사용자의 키보드, 마우스, 터치, 스크롤 등의 이.. 더보기
React에서 단일 페이지 애플리케이션의 프린트 기능 구현하기 React SPA(Single Page Application)에서 특정 컴포넌트나 화면 내용을 프린트하는 기능은 사용자 경험을 높이는 데 매우 중요합니다. 이번 글에서는 React 환경에서 손쉽게 프린트 기능을 구현하는 방법을 실무적으로 설명하겠습니다.1. 기본 window.print() 사용하기가장 간단한 방법은 브라우저의 기본 window.print() 메서드를 호출하는 것입니다. 하지만 이 경우 페이지 전체가 인쇄되기 때문에 특정 영역만 출력하기 어렵습니다.const handlePrint = () => { window.print();};2. react-to-print 라이브러리 활용하기특정 컴포넌트만 인쇄하려면 react-to-print 라이브러리를 사용하는 것이 편리합니다. 설치는 다음과 같습니.. 더보기
React 앱에서 브라우저 히스토리 API 활용하기 SPA에서 URL은 상태 그 자체입니다. History API(pushState/replaceState/popstate)를 직접 다루면 라우팅, 쿼리 파라미터, 스크롤 복원, 애널리틱스까지 가볍게 제어할 수 있습니다. 이 글은 React 앱에서 History API를 실무적으로 활용하는 방법을 정리합니다.1. 핵심 개념 요약- pushState: URL 변경 + 기록 추가(뒤로가기 가능)입니다.- replaceState: 현재 기록 교체입니다.- popstate: 뒤/앞으로 이동 시 발생하는 이벤트입니다.- 같은 오리진 내에서만 동작합니다. 서버는 모든 경로를 index.html로 리라이트해야 새로고침 404를 피할 수 있습니다.2. 최소 예제: URL만 바꾸고 화면은 React가 렌더// URL을 /p.. 더보기
React 앱에서 사용자 권한(Role-Based Access Control) 처리하기 RBAC는 복잡한 프론트엔드에서 페이지 접근, 버튼 노출, API 호출을 안전하게 통제하는 핵심 패턴입니다. 실무에서 바로 쓸 수 있는 권한 설계, 훅/컴포넌트, 라우팅 가드, 서버 연동까지 단계별로 정리합니다.1. 왜 RBAC인가역할(roles)과 권한(permissions)을 분리하면 기능 추가/변경 시 코드 수정 범위를 최소화할 수 있습니다. 또한 UI와 라우팅, API 레벨에서 일관된 통제가 가능합니다.2. 권한 모델 설계역할-권한 매핑을 한 곳에 선언합니다. 최소 권한 원칙을 지키고, 비즈니스 용어로 이름을 짓습니다.// permissions.jsexport const Roles = { ADMIN: 'admin', EDITOR: 'editor', VIEWER: 'viewer',}export.. 더보기
React 앱에 OAuth 2.0 로그인 기능 추가하기 (Authorization Code + PKCE) 이 글은 React SPA에 OAuth 2.0 Authorization Code with PKCE 방식으로 로그인 기능을 추가하는 실무 가이입니다. 공급자 벤더에 종속되지 않고 동작하는 최소 구현을 제시하며, 보안 및 운영 팁까지 간결하게 정리합니다.1. 왜 Authorization Code + PKCE 인가SPA에서 암호화된 클라이언트 비밀을 보관할 수 없기 때문에 PKCE를 적용한 Authorization Code 플로우가 권장됩니다. 흐름은 다음과 같습니다. 사용자가 로그인 버튼을 클릭합니다. 앱이 code_challenge를 생성하고 권한 서버로 리다이렉트합니다. 로그인 완료 후 콜백에서 code를 받고, code_verifier로 토큰을 교환합니다. 토큰으로 사용자 정보 API를 호출합니다.2... 더보기
React Router v6의 최신 기능과 사용법 React Router v6는 선언적 라우팅을 단순화하고, 데이터 로딩/변경을 라우트 계층으로 끌어올리는 Data Router 기능(v6.4+)을 도입했습니다. 이 글은 실무에서 바로 쓸 수 있는 최신 v6 사용법과 베스트 프랙티스를 정리합니다.1. v6 핵심 변화 한눈에 보기- Switch → Routes, Redirect → Navigate, exact 제거, component/render → element로 변경되었습니다.- 중첩 라우팅 기본 탑재, 상대 경로 네비게이션 개선, 레이아웃은 Outlet으로 구성합니다.- Data Router(createBrowserRouter, loader, action, errorElement, useLoaderData, useNavigation, defer/Awa.. 더보기

티스토리툴바