개발자 하민아빠의 Dev & Money

최근 회사에서 기존 메인 서비스(A) 외에 새로운 보너스 성격의 서비스(B)를 런칭하게 되었습니다. 이때 "A 서비스에 로그인한 유저가 B 서비스로 넘어갈 때, 다시 로그인하지 않게(SSO) 해주세요"라는 요구사항을 받았어요.문제는 두 서비스의 도메인이 완전히 다를 예정이라는 점이었습니다.도메인이 다르면 브라우저 보안 정책 때문에 기존의 HttpOnly 쿠키(RefreshToken)를 넘겨줄 수가 없거든요. "그럼 URL 파라미터로 AccessToken을 찔러 넣어줄까?" 고민도 했지만, 이는 보안상 절대 해서는 안 될 위험한 행동이었습니다.오늘 포스팅에서는 이 문제를 일회용 티켓(One-Time Ticket) 방식을 통해 어떻게 안전하고 효율적으로 해결했는지 그 설계와 구현 과정을 공유해보려고 합니다...

지난 6편까지 우리는 컴포넌트를 만들고, 상태(State)를 관리하고, 커스텀 훅으로 코드를 깔끔하게 정리하는 방법까지 리액트의 '단일 화면'을 다루는 모든 기초를 마스터했습니다. 하지만 우리가 평소에 사용하는 웹 서비스는 화면이 하나뿐인 경우가 없죠.홈 화면, 로그인 화면, 상품 상세 페이지 등 수많은 페이지로 이루어져 있습니다.이렇게 여러 페이지를 이동할 수 있게 길을 뚫어주는 작업을 '라우팅(Routing)'이라고 하는데요. 오늘은 리액트 생태계의 절대 표준 라우팅 라이브러리인 React Router Dom (v6)을 사용하여, 화면 깜빡임 없이 부드럽게 페이지를 이동하는 SPA(Single Page Application)를 완벽하게 구현하는 방법을 실무 예제와 함께 알아보겠습니다!1. 리액트에서 ..