diff --git "a/\352\266\214\355\230\204\354\247\200_HyeonjiKwon/4. BFF \353\236\200?.md" "b/\352\266\214\355\230\204\354\247\200_HyeonjiKwon/4. BFF \353\236\200?.md" new file mode 100644 index 0000000..e1b39fc --- /dev/null +++ "b/\352\266\214\355\230\204\354\247\200_HyeonjiKwon/4. BFF \353\236\200?.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๋กœ ์‘๋‹ต ํฌ๋งท ์กฐ์ ˆ