인프런 커뮤니티 질문&답변
작성한 질문수
Next.js API Route를 이용한 API 통합이 BFF 패턴에 해당하는지 궁금합니다
작성
·
10
·
수정됨
0
안녕하세요. 프론트엔드 취준생입니다.
최근 대시보드 페이지를 리팩토링하면서 Next.js의 API Route를 사용해 여러 API 호출을 하나로 통합했습니다. 이 방식이 BFF(Backend for Frontend) 패턴을 올바르게 적용한 것인지, 혹은 제가 오해한 부분이 있는지 궁금해서 질문을 올립니다.
AS-IS (기존 방식)
기존 대시보드 페이지에서는 두 개의 다른 API를 직접 호출했습니다.
이로 인해 다음과 같은 문제들이 있었습니다.
프론트엔드에서 두 번의 개별 네트워크 요청이 발생했습니다.
두 API에서 받은 데이터를 프론트엔드에서 직접 조합 후 가공 했습니다.
TO-BE (개선한 방식)
문제를 해결하기 위해 Next.js의 API Route를 도입했습니다.
프론트엔드는 이제 새로 만든 엔드포인트 하나만 호출합니다.
Api Route 내에서
Promise.all을 사용해 기존의 두 API를 서버 사이드에서 병렬로 호출합니다.두 API의 응답을 서버에서 조합하고 데이터 가공 로직까지 수행합니다.
프론트엔드에는 렌더링에 즉시 사용할 수 있는 가공된 단일 JSON 객체를 반환합니다.
-> 코드양 약 47% 감소했으며 데이터 가공 로직을 컴포넌트에서 제거
질문
제가 위에서 적용한 방식(Next.js의 API Route를 중간 레이어로 사용하여 API를 통합하고 데이터를 가공)이 BFF 패턴을 올바르게 구현한 사례가 맞을까요?
만약 맞다면, 이런 방식의 장점을 극대화하기 위해 추가로 고려하면 좋을 점이 있을까요?
만약 잘못된 접근 방식이라면, 어떤 점을 오해하고 있는지 궁금합니다.
현업 전문가분들의 조언을 부탁드립니다. 감사합니다!
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
DeokMan님이 적용하신 방식이 BFF 패턴에 부합하는지 자세히 알아보겠습니다.
BFF 패턴의 구현 여부:
DeokMan님이 설명하신 방식은 BFF (Backend for Frontend) 패턴의 핵심 개념을 상당 부분 포함하고 있습니다. BFF 패턴은 클라이언트에 특화된 백엔드 레이어를 제공하여 각각의 클라이언트가 필요로 하는 데이터를 맞춤형으로 제공하는 것입니다. Next.js의 API Route를 통해 여러 API 호출을 통합하고 데이터 가공을 서버 사이드에서 수행하여 클라이언트에 최적화된 형태로 제공한 것은 BFF 패턴의 본질에 가까운 구현이라고 할 수 있습니다.장점을 극대화하기 위한 추가 고려 사항:
- 보안: 서버에서 데이터를 조합하고 가공하는 과정에서 API 키나 민감한 정보를 관리하는데 주의가 필요합니다.
- 캐싱: API 응답을 캐싱하여 성능과 응답 속도를 개선할 수 있습니다.
- 리소스 관리: 서버에서 여러 API 호출을 병렬로 수행하므로 서버 자원의 사용량도 중요하게 관리되어야 합니다.
- 보안: 서버에서 데이터를 조합하고 가공하는 과정에서 API 키나 민감한 정보를 관리하는데 주의가 필요합니다.
잘못된 접근 방식일 경우의 오해:
만약 잘못된 접근 방식이라면, BFF 패턴을 단순히 API 통합으로만 이해하는 부분이 있을 수 있습니다. BFF는 클라이언트 특화 백엔드를 제공하는 것이 목표로, 각기 다른 클라이언트(모바일, 웹 등)가 고유의 요구사항을 충족하도록 맞추는 것도 중요합니다.
관련하여 추가적인 정보가 필요하거나 구체적인 기술적 도움을 얻고자 하신다면 Spring Boot의 가이드 문서도 큰 도움이 될 수 있습니다. 적극적으로 활용해보시길 추천 드립니다.