AI-PaaS ํ๋ซํผ์ ์๋ก์ด CRUD ๊ธฐ๋ฅ์ ๊ฐ๋ฐํฉ๋๋ค. ์๋น์ค, ๋ชจ๋ธ, ์ํฌํ๋ก์ฐ, ๋ฐ์ดํฐ์ , ์ง์๋ฒ ์ด์ค, ํ๋กฌํํธ ๊ด๋ฆฌ ๋ฑ์ ๋ฆฌ์คํธ/์์ฑ/์์ /์ญ์ ํ์ด์ง์ API ์ฐ๋์ด ํ์ํ ๋ ์ฌ์ฉํ์ธ์. ๋ชจ๋ฌ ๊ธฐ๋ฐ ํผ, React Query ํ , ํ ์ด๋ธ ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ ์ผ๊ด๋ ํจํด์ผ๋ก ๊ตฌํํ๋ฉฐ, ์ ์ฒด ๊ธฐ๋ฅ ํ๋ก์ฐ(ํ์ด์งโํ โ์ปดํฌ๋ํธโํ์ )๋ฅผ ์์ฑํฉ๋๋ค.
REST API์ ํตํฉํ๊ณ React Query ํ ์ ์์ฑํฉ๋๋ค. ์๋ก์ด ์๋ํฌ์ธํธ๋ฅผ ์ฐ๊ฒฐํ๊ฑฐ๋(GET/POST/PUT/DELETE), ํ์ด์ง๋ค์ด์ /๋ฌดํ์คํฌ๋กค์ ๊ตฌํํ๊ฑฐ๋, API ์๋ต ํ์ ์ ์ ๋ฐ ์๋ฌ ์ฒ๋ฆฌ๊ฐ ํ์ํ ๋ ์ฌ์ฉํ์ธ์. Ky HTTP ํด๋ผ์ด์ธํธ์ TanStack React Query v5๋ฅผ ํ์ฉํ๋ฉฐ, ๋๊ด์ ์ ๋ฐ์ดํธ์ ์บ์ ๋ฌดํจํ ์ ๋ต์ ํฌํจํฉ๋๋ค.
React ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๊ฑฐ๋ ๋ฆฌํฉํ ๋งํฉ๋๋ค. ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ์ปดํฌ๋ํธ, ๋ ์ด์์ ์ปดํฌ๋ํธ, ๋๋ ๋ณต์กํ ์ธํฐ๋์ ์ด ํ์ํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ๋ ์ฌ์ฉํ์ธ์. TypeScript, React Hooks, Tailwind CSS๋ฅผ ํ์ฉํ ๋ชจ๋ React ๊ฐ๋ฐ ํจํด์ ๋ฐ๋ฆ ๋๋ค.
TypeScript ์ฝ๋๋ฅผ ๋ฆฌํฉํ ๋งํ๊ณ ํ์ ์์ ์ฑ์ ๊ฐ์ ํฉ๋๋ค. ํ์ ์๋ฌ ์์ , ์ ๋ค๋ฆญ ์ถ๊ฐ, ์ธํฐํ์ด์ค ์ฌ๊ตฌ์ฑ, ์ ํธ๋ฆฌํฐ ํ์ ํ์ฉ, ๋๋ strict mode ๋ง์ด๊ทธ๋ ์ด์ ์ด ํ์ํ ๋ ์ฌ์ฉํ์ธ์.
XyFlow๋ฅผ ์ฌ์ฉํ ์ํฌํ๋ก์ฐ ์บ๋ฒ์ค ๊ธฐ๋ฅ์ ๊ฐ๋ฐํฉ๋๋ค. ๋ ธ๋ ๊ธฐ๋ฐ ์ํฌํ๋ก์ฐ ํธ์ง๊ธฐ, ๋๋๊ทธ์ค๋๋กญ ์บ๋ฒ์ค, ์ปค์คํ ๋ ธ๋ ํ์ , ์ฃ์ง ์ฐ๊ฒฐ ๋ฑ ๋น์ฃผ์ผ ์ํฌํ๋ก์ฐ ๋น๋๋ฅผ ๊ตฌํํ ๋ ์ฌ์ฉํ์ธ์.