1. BFF 도입 배경

이번 프로젝트는 FE로만 구성된 4인 팀과 함께 교육기관에서 제공된 API를 활용하여 개발이 진행되었습니다.

이 과정에서 인증 경험이 있었던 제가 인증을 맡게 되었고, 제공된 로그인 API가 NextJS 환경에서 사용하기에 적합하지 않다는 생각이 들어 이를 개선하고자 BFF를 도입하게 되었습니다.

1.1. NextJS와 궁합이 좋지 않았던 API 명세

1.1.1. 로그인 API와 토큰

로그인 API는 다음과 같이 제공되었습니다.

  1. 토큰 발급: 로그인 성공 시 Response body로 token을 제공

    image.png

  2. 토큰 사용: 인증이 필요한 요청의 경우 Authorization 헤더에 토큰을 담아 인증 정보를 제공하도록 설계

      requestHeaders.set('Authorization', `Bearer ${token}`);

1.1.2. 토큰의 용도 생각해보기

토큰을 이용해 처리해야할 일들은 크게 아래 2가지로 생각되었습니다.

  1. 권한에 따른 API 요청 처리
  2. 권한에 따른 페이지 접근 제한(route protection)

API 요청 처리 같은 경우에는 제공된 API 서버에서 해당 기능을 지원해주지만 권한에 따른 페이지 접근 제한은 직접 구현이 필요한 상황이었습니다.

  1. 권한에 따른 API 요청 처리 → API 서버에서 해당 기능 지원
  2. 권한에 따른 페이지 접근 제한(route protection) → (직접 구현 필요)