์ค๋์ BoB 10๊ธฐ ๋ณด์์ ํ๊ฐ๋ฐ ํธ๋์ ๋ณด์ ์๋ฃจ์ ์ ์ ์์ ์์ ํ๋ฌ๋์ ์งํํ 1์ฐจ ํ ํ๋ก์ ํธ์ ๋ํด์ ์ด์ผ๊ธฐํด๋ณด๋ ค ํ๋ค.

ํด๋น ๊ธ์ ์ด 5๋ถ์์ผ๋ก ํ ๋น๋ฉ๊ณผ ํ์ ๊ณผ์ ๊ทธ๋ฆฌ๊ณ ์๋น์ค ์ค๋ช ๋ฐ ๊ฐ๋ฐ ๊ณผ์ ์ผ๋ก ๋๋์ด์ ธ ์์ต๋๋ค.
- 1์ฐจ ํ ํ๋ก์ ํธ ํ ๋น๋ฉ ๋ฐ ํ์ ์ ๊ณ ๋ฏผ๋ค
- 1์ฐจ ํ ํ๋ก์ ํธ ํ๋ก ํธ์๋๋ฅผ ๊ฐ๋ฐํ๋ฉฐ ํ๋ ๊ณ ๋ฏผ๋ค
- 1์ฐจ ํ ํ๋ก์ ํธ ๋ฐฑ์๋๋ฅผ ๊ฐ๋ฐํ๋ฉฐ ํ๋ ๊ณ ๋ฏผ๋ค
- 1์ฐจ ํ ํ๋ก์ ํธ ์ธํ๋ผ๋ฅผ ๊ฐ๋ฐํ๋ฉฐ ํ๋ ๊ณ ๋ฏผ๋ค
ํ๋ก์ ํธ github ๋ฐ๋ก๊ฐ๊ธฐ -> ๋ณด์ ์ํ ํธ๋ํฝ ๋ถ์ ์๋ฃจ์ github
GitHub - dhslrl321/L7-monitor: ๐ L7 ์์ ๋์ํ๋ Access Log ๊ธฐ๋ฐ ํธ๋ํฝ ๋ถ์ ๋ฐ ๋ณด์ ์ํ ๋ถ์ ์๋น์ค
๐ L7 ์์ ๋์ํ๋ Access Log ๊ธฐ๋ฐ ํธ๋ํฝ ๋ถ์ ๋ฐ ๋ณด์ ์ํ ๋ถ์ ์๋น์ค (BoB 10 ๊ธฐ ๋ณด์์ ํ๊ฐ๋ฐ 1์ฐจ ํ ํ๋ก์ ํธ) - GitHub - dhslrl321/L7-monitor: ๐ L7 ์์ ๋์ํ๋ Access Log ๊ธฐ๋ฐ ํธ๋ํฝ ๋ถ์ ๋ฐ ๋ณด
github.com
์ง๋ ์๊ฐ ์ฐ๋ฆฌ๊ฐ ํ๋ ๊ณ ๋ฏผ๋ค๊ณผ ๋ฌธ์ ๋ค, ๊ทธ๋ฆฌ๊ณ ํ์ ์ ๋ํ ๋ด์ฉ์ ์ ๋ฆฌํด๋ณด์๋ค.
์ค๋์ ์ฐ๋ฆฌ๊ฐ ๊ฐ๋ฐํ ์๋น์ค๋ฅผ ์ข ๋ ๊ธฐ์ ์ ์ธ ๊ด์ ์์ ์์๋ณด๋ ค ํ๋ค.
๊ฐ๋ฐํ๋ ๊ณผ์ ์ด ์ด๋ป๊ฒ ์งํ๋๊ณ ์ด๋ค ๋ฌธ์ ๋ค์ ๋ง๋ฌ์ผ๋ฉฐ ์ด๋ค ๋ฐฉ๋ฒ์ ์ทจํ๋์ง!
๋๋ Web ํํธ๋ฅผ ๋งก์๊ธฐ ๋๋ฌธ์ ๋ด๊ฐ ๊ฐ๋ฐํ ๊ธฐ๋ฅ๊ณผ API์ ๋ํด์๋ง ์ค๋ช ์ ํ ์๋ ์๋ค ใ ใ ..
์๋น์ค ๊ตฌ์กฐ
์ฐ์ ์๋น์ค์ ๋ชฉ์ ์ ์ง๋ ์๊ฐ์ ์ด์ผ๊ธฐํ๋ ๊ฒ ์ฒ๋ผ Access Log ๊ธฐ๋ฐ ํธ๋ํฝ ๋ถ์ ๋ฐ ๋ณด์ ์ํ ๋ถ์ ์ด๋ค.
์ฌ๋ด์ Web Application ์ด ๊ธฐ์กด์ ์์๋๋ Access Log ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ฌ ๋ถ์ํ๊ณ ๋ณด์ ์ํ์ ์๊ฐํ ํด์ค๋ค.
์๋น์ค์ ํฐ ํ๋ก์ฐ๋ ๋ค์๊ณผ ๊ฐ๋ค.
์๋น์ค ํ๋ก์ฐ

- ๊ณ ๊ฐ์ฌ๋ ๊ธฐ์กด์ ์ด์์ค์ด๋ ์๋ฒ์ ํด๋น ์๋ฒ๊ฐ ์ ์ฅํ๋ access.log ๊ฐ ์กด์ฌํ๋ค.
- ์ฐ๋ฆฌ๊ฐ ๊ฐ๋ฐํ Agent ํจํค์ง๋ฅผ ์ค์นํ๋ค.
- ํด๋น Agent์์ access log ์ ์์น๋ฅผ ์ง์ ํ๊ณ ๋ถ์ ์๋ฒ๋ก access log ๋ฅผ ์ ๋ฌํ๋ค.
- ์ด์ ์๋ฒ์ ์ฑ๋ฅ์ ์ํด์ ๋ถ์์ ๋ค๋ฅธ ์๋ฒ์์ ์งํํ๋ค.
- ๋ถ์ ์๋ฒ๋ก ๋ค์ด์จ access log ๋ ๋ถ์์ ์งํํ์ฌ ๊ณต๊ฒฉ ์ ํ์ ๋ฐ๋ผ์ DB์ ์ ์ฅํ๋ค.
- ํด๋น DB ์ ๊ฐ๋ค์ ํ ๋๋ก ๋ณด์ ๋ ๋ฒจ์ ์ฐ์ถํ๊ณ ๊ฐ์ข ์๊ฐํ์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ์ ์ ํ์ฌ Front๋ก ๋ฐํํ๋ค.
- Front Server๋ Backend ์๊ฒ ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ ๋์๋ณด๋์์ ์๊ฐํ๋ฅผ ์ํํ๋ค.
์๋ ์ฒ์ ๊ธฐํ์ SaaS ํํ์๊ธฐ ๋๋ฌธ์ ๋ถ์ ์๋ฒ๋ ์ฐ๋ฆฌ๊ฐ ์ด์ํ๋ ์๋ฒ์ฌ์ผ ํ์ง๋ง ์๊ฐ์ ๋ฌธ์ ๋ก ์ธํด On-Premise ํํ๋ก ๊ตฌ์ฑํ๋ ๋ฐฉํฅ์ผ๋ก ์งํํ๋ค.
์ฆ, Client๋ ๊ธฐ์กด์ ์ด์์ค์ด๋ ์๋ฒ + ๋ถ์ ์๋ฒ๋ฅผ ์ด์ํ๋ ๋ฐฉํฅ์ธ๋ฐ, ์ด๊ฒ ์กฐ๊ธ ์๋น์ค ๊ด์ ์์ ๋ง์ ์๋ฌธ๊ณผ ๋นํจ์จ์ด ์กด์ฌํ๋ค.
์ด์ฉ ์ ์๋ค๊ณ ํํํ์ง๋ง ์์ง ๋ง์ด ์์ฝ๋ค..
ํ๋ก ํธ์๋์ ๊ธฐ์ ์ ๊ณ ๋ฏผ

์์ ์ด์ผ๊ธฐํ๋ฏ, ์ฐ๋ฆฌ๋ Front End๋ฅผ React๋ก ๊ฐ๋ฐํ์๋ค.
์ด ๊ณผ์ ์์ ํ๋ ๊ณ ๋ฏผ๋ค์ ํฌ๊ฒ 3๊ฐ์ง ์ด๋ค.
- HTML Rendering Server ์ ๊ฒฐ์
- ๋ฆฌ์กํธ์ state ๊ด๋ฆฌ ๋๊ตฌ
- ํต์ ๋ชจ๋์ ์ ํ
- ๋์์ธ ํจํด์ ๋์
ํ๋์ฉ ์์๋ณด์!
HTML Rendering Server ์ ๊ฒฐ์
Front End๋ฅผ ์ฒ์๋ถํฐ React๋ก ํ๋ ค๋ ์๊ฐ์ ์์๋ค.
์ฒ์์๋ ์์ HTML๊ณผ Vanila Javascript ๋ฅผ ์ด์ฉํ ์๊ฐ์ด์๋ค.
๊ทธ๋ฆฌ๊ณ ์ฌ๋ฌ ๊ธฐ์ ์กฐ์ฌ๋ฅผ ํ์ ๋, ๊ฐ๋จํ ๋ค์๋ ์๊ฐ์ ๋ฐ๋ก Express.js๋ฅผ ์ด์ฉํด static file render ์๋ฒ๋ฅผ ๊ตฌ์ถํ๋ ๊ฒ์ด์๋ค.
Expressjs ๋ Template Engine ํ๋ ์์ํฌ์ด๊ธฐ ๋๋ฌธ์ html render server ๋ก์ฌ์ฉํ๊ธฐ ์ํด์ ๋ช ๊ฐ์ง ์์ ์ ํด์ค์ผ ํ๋ค.
์ฐ์ app.js ์์ express.static()
์ ์ด์ฉํด์ static ํ์ผ์ ๋ ๋ํ๋๋ก ๊ตฌ์ฑํ๋ค.
import express from "express";
import path from "path";
const __dirname = path.resolve();
const app = express();
const port = 3000;
const setRenderPage = (filename) => __dirname + "/views/" + filename;
app.use("/script", express.static("script"));
app.use("/static", express.static("static"));
app.get("/", (req, res) => {
res.sendFile(setRenderPage("index.html"));
});
app.listen(port, () => {
console.log("server started on " + port);
});
์ด ๋ฐฉ๋ฒ์๋ ํ ๊ฐ์ง ๋ฌธ์ ๊ฐ ์๊ฒผ๋๋ฐ, ๋ฐ๋ก css, images, js ํ์ผ์ ๊ฐ๊ฐ render ํ url ์ ์ด์ด์ค์ผ ํ์๋ค.
๊ทธ๋์ <head>
ํ๊ทธ ๋ด๋ถ์ url routing path ๋ฅผ ์๊ฐํ๋ฉด์ static file ์ ๋ฐํํ์ง๋ง, ์ด๋ ์์ฐ์ฑ์ ์ ํด์ํค๋ ๊ฒ์ผ๋ก ๋ณด์๋ค.
์ด๊ฑด ๊ทธ๋ ํด๊ฒฐ ๊ฐ๋ฅํ๋ฐ, ๋ฌธ์ ๋ ๋ฐ๋ก es6 ์์ Module์ Bundling ํ๋๋ฐ ์ ๋ง ํ๋ค์๋ค.
์๋ฅผ ๋ค๋ฉด es6 ์ด์ ์๋ ๋ชจ๋์ ๊ฐ์ ธ์ฌ ๋, const express = require('express')
์ ๊ฐ์ ๋ฐฉ์์ ์ด์ฉํ์ง๋ง es6 ์ด์์ import express from 'express'
ํํ๋ก ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์ด๋ค ์ฌ์ด์ ํจ๋ฌ๋ค์ ๋ถ์ผ์น?๋ฅผ ํด๊ฒฐํ์ด์ผ ํ๊ณ , ๊ฐ๊ฐ ๋ฐ๋ก ๋ฒ๋ค๋ง์ ํ๋ ๋ฐฉ๋ฒ์ด ํ์ํ๋ค.
์ ๋ฌธ Front ๊ฐ๋ฐ์๊ฐ ์๋ ๋์๊ฒ๋ ์กฐ๊ธ ์ด๋ ค์ ๋ค..
๊ทธ๋์ ์๊ฐํด๋ธ ๋ฐฉ๋ฒ์ด ๋ฐ๋ก Webpack ์ด์๋ค.

์นํฉ์ ๋ชจ๋ js๋ฅผ ์ํ static ๋ชจ๋ bundler ๋ผ๊ณ ํ๋ค.
๊ฐ๋จํ๊ฒ ์นํฉ์ ๋ํด์ ์ด์ผ๊ธฐํ์๋ฉด, main.js ํ์ผ์ ๋ง๋ค์ด์ ํ๋์ main.js ์ ์ฐ๋ฆฌ๊ฐ ๋ง๋ ๋ค์ํ ๋ชจ๋๋ค์ ๋ฃ๊ณ main.js ํ๋๋ง url ๋ก ๊ฐ๋ฐฉํด์ฃผ๋ ๋ฐฉ๋ฒ๊ณผ ๋น์ทํ๊ฒ ๊ฐ์๋ค.
๊ทธ๋์ ์์ ๋ฐ์ํ๋ ๋ฌธ์ ๋ค์ ๋ ๊น๋ํ๊ณ ํ๋์ ์ธ ๋ฐฉ๋ฒ์ผ๋ก ํด๊ฒฐํ ์ ์์๋ค.
์ฌ์ค ๋ฆฌ์กํธ๋ ์นํฉ์ ์ด์ฉํ๊ณ ์๊ณ ๋๋ ์นํฉ์ ๋ํ ์ธ๊ธ์ ๋ค์ด๋ดค์ง๋ง ๊น๊ฒ ๊ณต๋ถํด๋ณธ ์ ์ด ์์๋๋ฐ, ์ด์ ์นํฉ์ด ๋ฌด์์ ํ๋ ๊ธฐ์ ์ธ๊ฐ? ์ ๋ํ ๋ต์ ์ด๋์ ๋ ํ ์ ์๊ฒ ๋์ด์ ๋งค์ฐ ์ ๋ฌ์๋ค ใ ใ ..
์์ธํ ์ฌํญ์ ๊ธฐ์ ๊ณ ๋ฏผ์ ์ ๋ฆฌํ github์์ ํ์ธํ ์ ์์ต๋๋ค -> Webpack ์ผ๋ก Front-Server ๊ตฌ์ฑํ๊ธฐ
ํ์ง๋ง ์ด ๋ง์ ๋ ์๋ฒฝํ ๊ธฐ์ ์ ์ ์ ์๋์๋ค.
๋๋ Vanila js ๋ก ํ๋์ ์น์ ๊ฐ๋ฐํด๋ณธ ๊ฒฝํ์ด ์์๊ธฐ์ ๋ง์ฝ ํ๋ก ํธ ๊ฐ๋ฐ ํ์์ด ๋์์ ์์ฒญํ ๋, ํฐ ๋์์ ์ค ์ ์์๊ฒ ๊ฐ์๋ค.
๋ฆฌ์กํธ์์๋ data fetching ์ ํ๋ฉด state๋ฅผ ๋ฐ๊ฟ์ฃผ์ด ๋ ๋๋ง์ ์ํํ์ง๋ง, ๋ฐ๋๋ผ js ์์๋ ์ง์ document ๊ฐ์ฒด๋ฅผ ์ด์ฉํด์ dom ์ ์กฐ์ํด์ผ ํ๊ณ , ajax ํต์ ์์๋ ์ด๋ป๊ฒ ๋ ๋๋ฅผ ๋ฐ๊ฟ์ผ ํ๋์ง ํ์คํ ์ดํด๊ฐ ๋ถ์กฑํ์๋ค.
๊ฐ๋จํ ๊ฒ์ํ ์ ๋๋ ๊ฐ๋ฐํ ์ ์์ด์ ๋จธ๋ฆฌ์์ผ๋ก๋ ์ด๋ป๊ฒ ํด์ผ๊ฒ ๋ค! ์ถ์ง๋ง ๋ง์ ๊ท๋ชจ๊ฐ ์๋ ์ฑ์ ๊ฐ๋ฐํ ๋, ๋ฐ์ํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ ์์ ๊ฐ์ด ๋ถ์กฑํ๋ค.
์ ๋ง ๋คํ์ธ ๊ฒ์ ํ๋ก ํธ๋ฅผ ๋งก์ ํ์์ด ๋ฆฌ์กํธ ๊ฒฝํ์ด ์๋ค๊ณ ํ์ฌ ๋ฆฌ์กํธ๋ก ํ๋ ๊ฒ์ ์ด๋ป๊ฒ ๋๋ ์๊ฒฌ์ ๋ด์๊ณ , ๊ธ์ ์ ์ผ๋ก ๋ฐ์๋ค์ฌ์ค์ ์ฐ๋ฆฌ๋ ํ๋ก ํธ๋ฅผ ๋ฆฌ์กํธ๋ก ๊ตฌ์ฑํ๊ธฐ๋ก ํ์๋ค.
๊ฒฐ๊ตญ ํ์๋ค์ ์ํด๋ฅผ ๊ตฌํด ๋ฆฌ์กํธ๋ก ๋ณ๊ฒฝ!
์ง๋ ๋ด ๊ฒฝํ์์๋ ์ง์ Design๊ณผ Style ๊ฐ๋ฐ์ ํ์์ง๋ง, ์ด๋ฒ ํ๋ก์ ํธ์์๋ Backend ์์ ํด์ผํ ์ผ๋ค์ด ์กฐ๊ธ ์์๊ณ , ๋ด๊ฐ ์ธํ๋ผ๊น์ง ๊ตฌ์ฑ์ ํ์ด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋์์ธ ์ชฝ์ ์์ ํ ์ ์์๋ค.
๋ํ UI๋ฅผ ์ ๋ฌธ์ ์ผ๋ก ๊ณต๋ถํ๋ ํ์๋ค์ด ์์๊ธฐ์ React Bootstrap์ ์ด์ฉํ๊ธฐ๋ก ํ๋ค.
๋๋ Bootstrap ์ ํ ๋ฒ๋ ์ฌ์ฉํด๋ณธ ์ ์ด ์์๊ธฐ์ ํ๋ก ํธ๋ฅผ ๋งก์ ํ์์ด Bootstrap ์ ๋ง์ ธ๋ณด๋ฉฐ ์ฐ๋ฆฌ์๊ฒ ํ์ํ Chart ๋ค๊ณผ ์ปดํฌ๋ํธ๋ฅผ ๋ฐ๋ก ๋นผ์ ๋ชจ๋ํ๋ฅผ ํด ์ฃผ์๋ค.
๊ทธ๋ฆฌ๊ณ ํ๋ก์ ํธ Repository ์์ create-react-app
์ ์ด์ฉํด์ ๊ธฐ๋ณธ Building ์ ํ๊ณ , ํด๋น ์ปดํฌ๋ํธ๋ค์ ๊ฐ์ ธ์ ์ฌ์ฉ์ ํ์๋ค.
๋ฆฌ์กํธ์ state ๊ด๋ฆฌ ๋๊ตฌ
React ์ ํฐ ํน์ง ๋ ๊ฐ์ง๋ฅผ ์ด์ผ๊ธฐ ํ์๋ฉด ๋ฐ๋ก State์ Props ์ด๋ค.
Props์ State๋ ์ผ๋ฐ Js ๊ฐ์ฒด๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ ๋์ ์ํฅ์ ์ฃผ๋ ๋ฐ์ดํฐ๋ฅผ ์๋ฏธํ๋ค.
state๋ ํ๋์ ์ปดํฌ๋ํธ ๋ด๋ถ์์ ์ฌ์ฉ๋๋ ๋ณ์ํ ๋ฐ์ดํฐ์ธ๋ฐ, ํด๋น state๋ฅผ ์ด์ฉํด์ ๋์ ์ธ ๋ฐ์ดํฐ๋ฅผ ๊ฒฐ์ ํ๊ณ ์ปดํฌ๋ํธ UI์ ์ฝ์ ํด์ ๋ ๋๋งํ๋ค.
์ด ๊ณผ์ ์์ state๋ ํ๋์ ์ปดํฌ๋ํธ ๋ด๋ถ์ ์์นํ์ฌ ์ปดํฌ๋ํธ ๋ ๋ ํธ๋ฆฌ๋ฅผ ์ ์๊ฐํด์ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ฑํด์ผ ํ๋ค.
์ด๋ฐ ํน์ฑ์ ์๋ชป ์ด์ฉํ๋ค๋ฉด ์ํ๋ ๊ฒฐ๊ณผ๊ฐ ์ ๋ ๋๋ง๋์ง ์๊ฒ ๋๋๋ฐ, ์ด๋ฅผ ์ ๋๋ก ์ฌ์ฉํ๊ธฐ๋ ์กฐ๊ธ ๊น๋ค๋กญ๋ค.
๊ทธ๋์ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ผ๋ก๋ ๋ค์ํ ์ ํ์ง๊ฐ ์์๋ค.
- ์์ State + Props ์ด์ฉํ๊ธฐ
- ์ ์ญ State ๊ด๋ฆฌ ๋๊ตฌ ์ด์ฉํ๊ธฐ (Mobx, Context API, Redux)
์์ State + Props ์ด์ฉํ๊ธฐ
์์ state๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ์ปดํฌ๋ํธ ๋ ๋ ํธ๋ฆฌ์ ๊ตฌ์กฐ๋ฅผ ์ ํ์ ํ๊ณ ์ ์ ํ props๋ก ๋ด๋ ค์ค์ผ ํ๋ค.
๊ทธ๋์ ์ฝ๋๊ฐ ์์นซ ์๋ชปํ๋ฉด ์ข ๋๋ฌ์์ง๊ฑฐ๋ ๊ฐ๋ ์ฑ์ด ๋๋น ์ง๋ค.
์ ์ญ state ๊ด๋ฆฌ ๋๊ตฌ ์ด์ฉํ๊ธฐ
ํ์ฌ ๊ฐ์ธ์ ์ธ ํ๋ก์ ํธ์์ ํ๋ก ํธ์๋๋ฅผ redux์ redux-thunk ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค.
ํ์คํ ์์ state์ props ๋ฅผ ์ฌ์ฉํ ๋ ๋ณด๋ค ๋ค์ํ๊ณ ๋ ์ฌ์ด ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ์ง๋ง ํ๊ฒฝ์ ๊ตฌ์ฑํ๊ธฐ ๊น์ง ์กฐ๊ธ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ฉฐ, ๋ฌด์๋ณด๋ค ์ด ์๊ฐ์ด ์์ฐ๋ค.
๊ณผ์ฐ ์ฐ๋ฆฌ ์๋น์ค์์ Redux๊ฐ ํ์ํ ๊น??
์ ๋ต์ No ์ด๋ค.
์ฌ์ค ๋์ Data Fetching ๋ ์๊ณ ๋จ์ง ์ปดํฌ๋ํธ์ Depth ๋ ๊น์ด๋ดค์ 5๊ฐ? ์ ๋์๋ค.
๊ทธ๋์ Redux๋ ๊ณผ๊นํ Pass ํ๊ณ ์์ state์ props์ useState ํ ์ ์ฃผ๋ก ์ด์ฉํ๊ธฐ๋ก ํ์๋ค.
ํต์ ๋ชจ๋์ ์ ํ
๋ธ๋ผ์ฐ์ ์์ Ajax ๋ฅผ ํ๊ธฐ ์ํด์๋ ๋ด๊ฐ ์ฌ์ฉํ๋ ํต์ ๋ชจ๋์ 2๊ฐ์ง ์ด๋ค.
- Fetch API
- Axios
๋ ๋ค Ajax ์ Request ๋ฅผ ์ถ์ํํ ๋ชจ๋๋ก ๊ฐ์ธ์ ์ผ๋ก Axios๋ฅผ ๋ ๋ง์ด ์ ํธํ๋ค.
๊ทธ ์ด์ ๋ ๋ช ๊ฐ์ง๊ฐ ์๋๋ฐ,
- Promise ์ฒ๋ฆฌ๊ฐ ์ฝ๋ค
- ์ฝ๋๊ฐ ๊น๋ํ๋ค
- json ์ฒ๋ฆฌ๊ฐ ๋ ์ฝ๋ค
- ๊ฒฝํ์ด ๋ ๋ง๋ค ใ ใ
๊ฒฐ๊ตญ Axios ๋ฅผ ์ด์ฉํ๊ธฐ๋ก ํ์๊ณ , ๋ค์๊ณผ ๊ฐ์ด API ๋ชจ๋์ ๊ตฌ์ฑํ๋ค.
import axios from "axios";
export const SERVER = axios.create({
baseURL: "http://" + process.env.REACT_APP_HOST_IP,
headers: {
"Content-Type": "application/json",
},
});
export const TEST_SERVER = axios.create({
baseURL: "http://localhost:8080/api",
headers: {
"Content-Type": "application/json",
},
});
SERVER.js ๋ผ๋ ํ์ผ์ ๋ง๋ค๊ณ ์์ ๊ฐ์ด ์๋ฒ์ ํธ์ถ ip๋ฅผ ๋ฃ์ด์ axios instance ๋ฅผ ์์ฑํ๋ค.
๊ทธ๋ฆฌ๊ณ ๊ฐ๊ฐ์ ๊ด์ฌ์ฌ์ ๋ง๊ฒ ๋ฏผ๋ Service.js ํ์ผ์์ axios instance ๋ฅผ import ํ์ฌ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค.
import { SERVER, TEST_SERVER } from "util/SERVER";
export const fetchAllLog = async () => {
const { data } = await SERVER.get("/api/logs/all");
return data;
};
export const fetchUnknownLog = async () => {
const { data } = await SERVER.get("/api/logs/unknown");
return data;
};
๋์์ธ ํจํด์ ๋์
๋๋ ๋์์ธ ํจํด์ ์ํํธ์จ์ด ๊ฐ๋ฐ์ ์์ด์ ๋งค์ฐ๋งค์ฐ๋งค์ฐ ์ค์ํ๋ค๊ณ ์๊ฐํ๋ ์ฌ๋์ด๋ค
๊ทธ๋์ ๊ฐ๋จํ๋ค๊ณ ๋ณผ ์ ์๋ ์ด๋ฒ ํ๋ก์ ํธ์์๋ ๊ฐ์ฅ ๋จผ์ ๋์์ธ ํจํด์ ๊ณ ๋ฏผํ์๋ค.
๋ด๊ฐ ํ๋ก์ ํธ์์ ๊ฒฝํํ๋ ๋์์ธ ํจํด์ ํฌ๊ฒ 2๊ฐ์ง์๋ค.
- Container-Presenter Pattern
- Atomic Design Pattern
Atomic Design Pattern ์ ์์๊ฐ ๋๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉํ๋ ๋ฐ์ ํนํ๋์ด ์๋๋ฐ, ์ฐ๋ฆฌ๋ ์ฌ์ค์ Single Page ๋ก ์ด์๋๊ณ Routing ์กฐ์ฐจ ํ์ง ์๊ธฐ ๋๋ฌธ์ ๊ฒฐ๊ตญ Container-Presenter Pattern ์ ์ฌ์ฉํ์๋ค.
์์ ์ด์ผ๊ธฐํ๋ ํต์ ๋ชจ๋๊ณผ Service ๋ฅผ Container ์์ ๋ฐ์์ ๊ทธ ์๋์ Presenter ๋ค์๊ฒ Props ๋ก ์ ๋ฌํด์ฃผ๊ฒ ๋๋ค.

์๋ ์ฝ๋๋ ์ค์ Log ๋ฅผ ํ ์ด๋ธ ํ์์ผ๋ก ๋ ๋ํ๋ ์ปดํฌ๋ํธ ์์ ์ฌ์ฉํ๋ Container ์ฝ๋์ด๋ค.
import React, { useEffect, useState } from "react";
import LogTable from "components/presenter/LogTable/index";
import { fetchAllLog } from "service/LogService";
const LogTableContainer = () => {
const [logDatas, setLogDatas] = useState([]);
useEffect(async () => {
const data = await fetchAllLog();
setLogDatas(data);
}, []);
return <LogTable logDatas={logDatas} />;
};
export default LogTableContainer;
๋จผ์ ํด๋น ์ปดํฌ๋ํธ๊ฐ ๋ธ๋ผ์ฐ์ ์ ๋ก๋๋๋ ์๊ฐ API ํธ์ถ์ ์๋ํ๊ฒ ํ๋ ค๊ณ useEffect
๋ด๋ถ์์ data fetching ์ ํ๋ค.
๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ <LogTable>
์ props ๋ก ๋๊ฒจ์ฃผ๋ฉด, ๋ค์๊ณผ ๊ฐ์ด ์ ์ ํ ์์ ์ปดํฌ๋ํธ๋ก ๋ด๋ ค์ฃผ๋ฉด์ ์์ฐ์ค๋ฝ๊ฒ UI๋ฅผ ๋ ๋๋งํ๊ฒ ๋๋ค.

์ด๋ฐ ๊ตฌ์กฐ๋ก Front End React Application ์ ๊ตฌ์ฑ๋์ด ์๋ค.

์ฌ์ค ์ด ๊ตฌ์กฐ๊ฐ, ํ๋ก ํธ๋ฅผ ๋ฆฌ์กํธ๋ก ์ ์ ํ ์ด์ ์กฐ์ฐจ๊ฐ ํ๋นํ์ง ์์ ์ ์๋ค.
๋ํ ๊ธฐ์ ์์ฒด์ ์ฌ์ฉ๋ฒ๋ ์ฌ๋ฐ๋ฅด์ง ์์ ๋ฐฉํฅ์ผ๋ก ๊ตฌํ๋์ด์์ ์ ์์ง๋ง ๋๋ฆ 1๋ฌ์ด๋ผ๋ ์งง์ ๊ธฐ๊ฐ๋์ ์ ์ฉํ๊ณ ๊ฝค๋ ๊ตฌ์กฐ์ ์ผ๋ก ์ ๊ตฌ์ฑํ์ฌ ํ์ ์ ์งํํ์๋ค.
ํ๋ก ํธ์๋๋ ๋จ์ํ ์ทจ๋ฏธ ์ฏค์ผ๋ก ์๊ฐํ๋ ์ง๋์ ๊ฒฝํ๋ค์ด ์ด๋ ๊ฒ ๋น์ ๋ผ ์ ์๋ค๋ ์ฌ์ค์ด ๋ฟ๋ฏํ๊ณ , ๋๋ฆ ์๋์ค๋ฌ์ ๋ฐ ใ ใ .
๋ค์ ์๊ฐ์ ๋ฐฑ์๋์ Spring Boot ์ ๋ํด์ ์ด์ผ๊ธฐํด๋ณด๋ ค ํ๋ค!
๋๊ธ