이야기를 디버깅하는 개발자.

개발과 창작 사이에서, 사람들이 자기만의 이야기를 만들 수 있는 도구와 기록을 만듭니다.

roslyn.dev 자세히보기

BFF 3

BFF 구조에서 리액트는 화면에 집중하고 인증은 서버가 맡는 방식

프론트엔드를 리액트로 만들다 보면 어느 순간 인증 처리를 어디까지 맡겨야 하는지 고민하게 됩니다. 화면을 그리는 일은 리액트가 잘합니다. 상태를 다루고, 컴포넌트를 나누고, 사용자와 빠르게 상호작용하는 것도 리액트의 장점입니다. 하지만 인증은 조금 다릅니다. 토큰을 어디에 저장할지, 쿠키는 어떻게 다룰지, API 호출 권한은 어디서 확인할지, 새로고침 후 세션은 어떻게 유지할지 같은 문제들이 따라옵니다. 처음에는 단순해 보이지만, 실제 서비스를 운영하려고 하면 생각보다 신경 쓸 부분이 많아집니다. 그래서 요즘 다시 관심을 두고 있는 구조가 BFF입니다. Backend for Frontend의 줄임말인데, 이름 그대로 프론트엔드를 위한 백엔드 계층을 하나 두는 방식입니다. 저는 이 구조를 “서버사이드가 프..

IdentityServer 학습 #10 - BFF without backend

본문 글은 원문(https://docs.duendesoftware.com/identityserver/v7/quickstarts/js_clients/js_without_backend/)을 참고하여 작성되었습니다. (1) 먼저 사용할 프로젝트를 생성해 줍니다. (예시에서는 SPA) dotnet new web -n SPA (2) 해당 프로젝트를 솔루션에 추가해 줍니다. dotnet sln add ./{프로젝트경로} (3) wwwroot 디렉토리를 만들어 주고, package.json 파일을 생성해 줍니다. npm init (4) oidc-client 라이브러리를 설치해 줍니다. (시작파일은 app.js로 지정) npm i oidc-client (5) 설치된 라이브러리에 있는 js 파일을 wwwroot 로 복사..

IdentityServer 학습 #9 - BFF with backend

본 내용은 원문(https://docs.duendesoftware.com/identityserver/v7/quickstarts/js_clients/js_with_backend/) 내용을 참고하여 작성되었습니다. (1) JavaScript기반 클라이언트로 사용할 프로젝트를 추가해 줍니다. dotnet new web -n JavaScriptClient 이렇게 하면 빈 Asp.net Core 프로젝트가 생성됩니다. (2) 다음으로 솔루션에 해당 프로젝트를 추가해 줍니다. dotnet sln add ./{프로젝트경로} (3) IdentityServer의 BFF관련 라이브러리들을 추가해 줍니다. dotnet add package Microsoft.AspNetCore.Authentication.OpenIdConne..

반응형