BEER&DEV

BFF(BackEnd-For-FrontEnd) 본문

DEV/React

BFF(BackEnd-For-FrontEnd)

사당맥주 2023. 1. 6. 17:23

지금(2022-01-06 기준)까지 기획 된 서비스의 기능을 가볍게 훑어보면 IU/UX에 공을 들이고 있다.

  • 개발자가 원하는 검색 결과는 어떠한 모습일까?
  • 다양한 검색 결과를 효과적으로 제공할 수 있을까?
  • 기존 검색엔진의 기능 중 개발자에게 도움 되지 않는 걷어내야 할 기능은 있을까?

위 처럼 현재 기획 된 내용을 봐선 Front-end 에서 많은 연산을 요구하는 기능은 없을 것으로 예상되어, 따로 Server를 구성하지 않고 Next.js에서 모든 서비스를 처리할 계획이다.

Server없이 개발이 가능할까?

우리가 사용할 Next.js 는 Isomorphic JavaScript 프레임 워크로 Front-end, Back-end 구분 없이 Javascript 를 사용하는 것을 칭한다. 두 영역을 Javascript를 사용하면서 개발자의 개발 편의성과 속도 또한 향상될 것이고, 따로 Server를 구성함에 따른 아키텍처에 대한 고민도 많이 줄어들게 된다.

그럼 Next.js는 만능인가?

우리와 같이 소규모 프로젝트에 한하여 만능으로 생각된다. 웹 개발에 있어 필요한 기능과 설정이 내장되어 있고, 심지어 이러한 기능들을 간단한 설정 만으로 사용 가능하다. 현재로선 최대한 개발 속도를 내기 위한 최고의 선택이라고 볼 수 있겠다. Next.js 는 아래와 같은 특징을 자랑한다.

 
Next.js 공식 사이트 발췌

나중에라도 서비스가 커지고 이에 분리가 된다면?

1차 기획까지 개발이 무리 없이 완료한다면, 기능 추가 및 서비스 확장은 불가피할 것이다. 2차 기획 및 개발시 예상되는 몇몇 서비스(LiveCode)의 경우 많은 연산을 요구 할 수 있다. 이땐 프런트앤드를 위한 백앤드 즉, BFF를 도입을 고민해야 한다. Next.js 는 백앤드로서 기능도 수행할 수 있기 때문에 BFF패턴을 적용하기 어렵지 않을 것으로 예상된다.

BFF는 무엇인가?

단어를 그대로 풀면 “프런트앤드를 위한 백앤드” 이다. 서비스의 규모가 커지고 다양해질수록 코드가 복잡해지고, 이를 대비하여 명확하게 코드를 분리하여 관리한다고 해도 이러한 문제는 시간이 지날수록 문제가 되어 나타나게 된다. 프로젝트 내부에서 관리되는 서비스도 있겠지만 외부 서비스(결제, 인증)까지 합세 한다면 더욱 관리가 어려워진다. BFF는 별도의 도구가 아닌 위와 같은 문제를 해결하기 위한 디자인 패턴으로, 프런트앤드는 UI/UX 및 상태관리에만 집중하고 내/외부 서비스 호출 과 비즈니스 로직을 따로 분리시키는 관심사분리 목적을 가진 Interface 역할을 하게 된다.
<서비스 분리(관심사 분리) 그림 첨부>

프런트와 백앤드를 어떻게 나눌 것인가?

결론부터 얘기하면 물리적으로는 나누지 않을 예정이고, DevOps에서 사용되는 IaC 에 아이디어를 얻어 Next.js 내부에서 분리된 비즈니스 로직 및 외부 호출을 코드로 나누어 관리 할 것이다. IaC는 직역하면 “코드로서 인프라” 라는 뜻으로 인프라 관련 설정들을 코드로 관리하여 비용과 속도 두 가지를 모두 취할 수 있고 실제 물리적인 인프라를 구성하기 전 프로토 타입으로도 사용하는 프로세스이다.

마치며..

가장 우선순위가 높은 목표는 개발자가 개발을 시작하는것으로, 지금 적용하기에는 시기상조이다. 하지만 개발을 진행하다 보면 꼭 필요해지는 날이 올 것이고 타이밍 맞춰 적용할 예정이다. 나중에라도 BFF 가 구성이 된다면 빠른 검색과 개발 비용을 줄이기 위해 Apollo와 React-Query도 함께 적용해야 할 것으로 보인다.
 

 

반응형