feat:4주차 bff

권현지_HyeonjiKwon/4. BFF 란?.md

@@ -0,0 +1,71 @@
+## 📌 BFF(Backend for Frontend)란?
+
+### 🔹 정의
+
+BFF는 프론트엔드 팀이 사용하는 API를 프론트엔드에 맞게 최적화한 백엔드 계층.
+
+일반적인 백엔드 서버와 별도로, 화면 단에서 필요한 데이터만을 가공해서 제공해주는 서버라고 할 수 있음.
+
+### 🔹 왜 필요할까?
+
+	1.	클라이언트 요구사항에 최적화된 응답 제공
+	2.	불필요한 데이터 제거 및 병합 로직 단순화
+	3.	모바일, 웹, 워치 등 다양한 클라이언트 대응 가능
+	4.	보안 강화 (토큰 처리, 요청 필터링 등)
+
+### ✨ 예시 API 기반 활용 예
+
+예를 들어, 아래와 같은 상황을 가정해보자:
+
+#### 🎯 기존 API 구조
+
+```Json
+// GET /users/123
+{
+  "id": 123,
+  "name": "현지",
+  "email": "hj@example.com",
+  "address": {
+    "city": "Seoul",
+    "zipcode": "12345"
+  },
+  "orderHistory": [
+    { "id": 1, "item": "골프채", "price": 300000 },
+    ...
+  ]
+}
+```
+
+위 데이터에서 프론트엔드는 name, city, recentOrderItem 만 필요하다고 해보자.
+
+#### 🧠 BFF에서 가공한 응답
+```Json
+// GET /bff/user-profile/123
+{
+  "userName": "현지",
+  "city": "Seoul",
+  "recentOrderItem": "골프채"
+}
+```
+
+#### 🛠️ BFF 코드 예시 (Node.js + Express)
+```javascript
+app.get('/bff/user-profile/:id', async (req, res) => {
+  const user = await axios.get(`http://api.example.com/users/${req.params.id}`);
+  const data = user.data;
+
+  res.json({
+    userName: data.name,
+    city: data.address.city,
+    recentOrderItem: data.orderHistory?.[0]?.item || null
+  });
+});
+```
+
+## 🧩 BFF의 구성 방식과 팁
+
+•	API Gateway와 구분: API Gateway는 인증, 라우팅, 로깅 등 인프라적인 역할 / BFF는 데이터 가공과 API 응답 최적화
+
+•	SSR, CSR과 연계: React/Vue 등에서 서버 측 렌더링이 필요할 때도 BFF는 유용
+
+•	GraphQL과 혼용: GraphQL로 유연하게 데이터 구성 + BFF로 응답 포맷 조절