
2025๋ ๋ฆฌ์กํธ ๊ธฐ์ ์คํ ๊ฐ์ด๋
2025๋ ๋ฆฌ์กํธ ๊ธฐ์ ์คํ ๊ฐ์ด๋ ๊ด๋ จ
๋ณธ๋ฌธ์ ์์ฆIT์ ๋ฒ์ญ๊ฐ David๊ฐ ํจ๊ป ๋ก๋น ์๋ฅดํ(Robin Wieruch)์ ๊ธ <React Tech Stack [2025]>์ ๋ฒ์ญํ ๊ธ์ ๋๋ค. ํ์๋ ๋ ์ผ ๋ฒ ๋ฅผ๋ฆฐ์ ๊ฑฐ์ฃผํ๋ ์ํํธ์จ์ด ์์ง๋์ด์ด์ ํ๋ฆฌ๋์ ๊ฐ๋ฐ์์ด๋ฉฐ, ์ปดํจํฐ ๊ณผํ ์์ฌ ํ์๋ฅผ ๋ณด์ ํ๊ณ ์์ต๋๋ค. ๊ทธ๋ 10๋ ์ด์์ ๊ฐ๋ฐ์ ๊ฒฝ๋ ฅ์ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ๊ณผ ์ ์ธ๊ณ์ ์คํํธ์ ๋ฐ ๊ธฐ์ ์ ์ํ ์ปจ์คํ , JavaScript์ React์ ๊ดํ ์ฌ๋ฌ ์ฑ ๊ณผ ๊ฐ์ข๋ฅผ ์งํํ ๊ฒฝํ์ด ์์ต๋๋ค. ์ด ๊ธ์์๋ ๋ณธ์ธ์ด ๊ฒฝํํ ๊ธฐ์ , ๋๊ตฌ ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์๊ฐํ๋ฉฐ, ๊ฐ ๊ธฐ์ ์ ํน์ง๊ณผ ์ฅ์ ์ ๋ํด ์ค๋ช ํฉ๋๋ค.
๋ฆฌ์กํธ ์ํ๊ณ์๋ ํญ์ ์๋ก์ด ๊ธฐ์ ์ด ๋ฑ์ฅํ๊ณ ์์ต๋๋ค. ์ด ๊ธ์์๋ 2025๋ ํ์คํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ์ธ๊ธฐ ์๋ ๋ฆฌ์กํธ ๊ธฐ์ ์คํ๋ค์ ์ดํด๋ณด๋ฉฐ, ์ด๋ฅผ ํตํด ์ฌ๋ฌ๋ถ์ ์ ํ์ด๋ MVP[1]๋ฅผ ๋ง๋ค ์ ์๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ์ต๋๋ค.
์ฐ์ ์ ๊ฐ ์ด ๊ฐ์ด๋๋ฅผ ์์ฑํ๊ฒ ๋ ์ด์ ๋ฅผ ๋ง์๋๋ฆฌ๋ฉด, ์ ๋ ํ๋ฆฌ๋์ ์น ๊ฐ๋ฐ์์ ๊ฐ์ธ ์ฐฝ์ ์๋ก์ ์๋ ๊ฐ ๋ค์ํ ํ๋ก์ ํธ๋ฅผ ์งํํด ์์ต๋๋ค. ๋งค๋ ์ ๊ฐ ์ฌ์ฉํ๋ ๊ธฐ์ ์คํ์ ์ฌํ๊ฐํ๊ณ ์ต์ ํธ๋ ๋๋ฅผ ๋ฐ๋ผ๊ฐ๋ฉด์๋, ์์ผ๋ก ๋ช ๋ ๋์์ ํ๋ก์ ํธ ์์ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด๊ณ ์์ต๋๋ค.
๋ง๋ถ์ด์๋ฉด, ์ ๋ ์ฐฝ์ ์๋ก์ ๊ฑฐ์ 1๋ ๋์ SaaS[2]๋ฅผ ๊ฐ๋ฐํ๊ณ ์ด SaaS๋ ์์ต์ฑ์ ๊ฐ๊ฒ ๋์์ต๋๋ค. ๋น์ ์ ํํ ๊ธฐ์ ์คํ์ ์ข์ํ์ง๋ง, ์ ํ๋ก์ ํธ๋ฅผ ์์ํ๋ค๋ฉด ๋ค๋ฅธ ๊ธฐ์ ์คํ์ ์ ํํ ๊ฒ์ ๋๋ค.
์ด ๊ธ์ ์ ์ฐ๊ตฌ์ ๊ฒฝํ, ๊ทธ๋ฆฌ๊ณ 2024๋ ๋ด๋ด ์์ ํ ํ์คํ ์น ๊ฐ๋ฐ ๊ณผ์ ์ ๊ดํ ๋ด์ฉ์ ๋ฐํ์ผ๋ก, ์ ๊ฐ ์ ํํ ๊ธฐ์ ์คํ์ ๋ฐ์ํ์ต๋๋ค. ๊ฐ๋ตํ์ง๋ง ์์ฐจ๊ฒ ๋ด์ ๋ชฉ๋ก์ ํจ๊ป ์ดํด๋ณด๊ฒ ์ต๋๋ค.
๋ฆฌ์กํธ ๊ธฐ์ ์คํ ์ดํด๋ณด๊ธฐ
Next.js
Next.js๋ ๋ฆฌ์กํธ ์์ ๊ตฌ์ถ๋ ํ๋ ์์ํฌ์ ๋๋ค. ๋ฆฌ์กํธ๋ก ํ์คํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ๋ ๊ฐ์ฅ ์ธ๊ธฐ ์๋ ์ ํ์ง ์ค ํ๋๋ก, ๊ธฐ๋ณธ์ ์ผ๋ก ๋ค์ํ ๊ธฐ๋ฅ(์: ๋ผ์ฐํ , ์บ์ฑ)์ ์ ๊ณตํ๊ณ , ๋ค์ํ ๋ชฉํ๋ฅผ ์ต์ ํํ๊ธฐ ์ํ ์ฌ๋ฌ ๋ ๋๋ง ์ ๋ต์ ๋์ผํ ์ ํ๋ฆฌ์ผ์ด์ ๋ด์์ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐฑ์๋์ ์ฐ๊ฒฐํ๊ธฐ ์ํ ์ต์ ๋ฆฌ์กํธ ๊ธฐ๋ฅ(์: ์๋ฒ ์ปดํฌ๋ํธ ๋ฐ ์๋ฒ ํจ์)์ ๋ชจ๋ ์ง์ํ๊ณ ์์ต๋๋ค.
Astro
Astro๋ ์ ํ์ ๋๋ฉ ํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์ ํ์ ๋์์ผ๋ก, ์ ์ ๋ฐ ๋์ ํ์ด์ง๋ฅผ ์ ๊ณตํ ์ ์๋ Next.js ํ๋ก์ ํธ๋ฅผ ํ๋์ ๋ชจ๋๋ฆฌ์ ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก ํ์ฉํ์ง ์๋ ๊ฒฝ์ฐ ์ฌ์ฉํ ์ ์์ต๋๋ค. Astro๋ฅผ ์ฌ์ฉํ๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ธ๋๋ฉ์ธ(์: app.example.com)์ ์ฌ์ฉํ๊ฒ ๋์ง๋ง, ๋ฐ์ด๋ ๊ฐ๋ฐ์ ๊ฒฝํ์ ๋ฐํ์ผ๋ก ๋น ๋ฅธ ๋๋ฉ ํ์ด์ง๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ๋ํ ๋ค์ํ ์ข ๋ฅ์ ๋๋ฉ ํ์ด์ง ์ค์์ ์ ํํ ์ ์์ด, SaaS ๊ฐ๋ฐ์ ๋ ๋ง์ ์๊ฐ์ ํฌ์ํ ์ ์์ต๋๋ค. (์ฐธ๊ณ : How to start a React Project)
์๋ฒ ์ปดํฌ๋ํธ
์๋ฒ ์ปดํฌ๋ํธ๋ ๋ชจ๋ React ํ๋ ์์ํฌ์์ ์ฌ์ฉํ ์ ์๋ ๊ฒ์ ์๋์ง๋ง, Next.js์์๋ ์ง์๋ฉ๋๋ค. ๊ทธ๋์ ํน๋ณํ ์ธ๊ธํ๊ณ ์ถ์๋๋ฐ, ์ด๋ ํ์คํ React ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐฉ์์ ๋ฐ๊พธ๊ธฐ ๋๋ฌธ์ ๋๋ค. ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ํํ๋ก, ์๋ฒ์์ ์คํ๋๋ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ ์ ์๊ฒ ํด์ฃผ์ด ์๋ฒ(์: ๋ฐ์ดํฐ๋ฒ ์ด์ค)์ ์ ๊ทผํ ์ ์์ต๋๋ค.
์๋ฒ ํจ์
์๋ฒ ํจ์๋ Next.js์์ ์ง์ํ๋ ๋ ๋ค๋ฅธ ๋ฆฌ์กํธ ๊ธฐ๋ฅ์ผ๋ก, ํจ์๋ฅผ ํธ์ถํ๋ ๊ฒ๋ง์ผ๋ก ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์์ ์๋ฒ ์ธก ์ฝ๋๋ฅผ ์คํํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๊ฒ์ ํ์ ์ด ์ง์ ๋ ์๊ฒฉ ํ๋ก์์ [3] ํธ์ถ(RPC)์ฒ๋ผ ๋์ํ์ง๋ง, ๋ด๋ถ์ ์ผ๋ก๋ API ์๋ํฌ์ธํธ[4]๊ฐ ์๋์ผ๋ก ์์ฑ๋ฉ๋๋ค.
์๋ฒ ์ก์
์๋ฒ ์ก์ ์ ์๋ฒ ํจ์์ ํ์ ์งํฉ์ ๋๋ค. ์ฌ์ฉ์ ์นํ์ ์ผ๋ก ๋ง๋ค๊ธฐ ์ํ ์ถ์ํ ๋ ์ด์ด๋ฅผ ์ถ๊ฐํ๋ ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ง๋ง, ๊ฐ์ธ์ ์ผ๋ก๋ ๋ช ์ค์ ์ฝ๋๋ก ์์ฒด ์ถ์ํ๋ฅผ ์ฝ๊ฒ ๊ตฌํํ ์ ์๊ธฐ ๋๋ฌธ์ ์์ง ์ฌ์ฉํ ํ์์ฑ์ ๋๋ผ์ง ๋ชปํ์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด๋ฏธ ๋ง๋ค์ด์ง ์๋ฃจ์ ์ ์ฐพ๊ณ ์๋ค๋ฉด, next-safe-actions ๋๋ zsa๋ฅผ ํ์ธํด ๋ณด์ธ์. (์ฐธ๊ณ : React as a full-stack framework)

Tailwind CSS
๊ฐ๋ฐ์ ์ปค๋ฎค๋ํฐ ๋ด์์ ์๊ฒฌ์ด ๊ณ์ ๋๋๊ณ ์์ง๋ง, ๋น ๋ฅธ ์ ํ ๊ฐ๋ฐ๊ณผ ์ฅ๊ธฐ์ ์ธ CSS ์ ์ง๋ณด์๋ฅผ ์ํด ์ค๋๋ Tailwind๊ฐ ์ต์ ์ ์ ํ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ์ ๊ฒฝํ๊ณผ ๋ง์ ํ์๋ค์ ๊ฒฝํ์ ๋ฐ๋ฅด๋ฉด, ์ผ์ฃผ์ผ ์ ๋ Tailwind์ ์ต์ํด์ง๋ฉด ์ ํต์ ์ธ CSS ์ ๊ทผ ๋ฐฉ์์ผ๋ก ๋์๊ฐ๋ ๊ฒ์ ์์ํ๊ธฐ ์ด๋ ต์ต๋๋ค.
Shadcn UI
UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ค๊ณ ๊ฐ์ง๋ง, Shadcn UI๋ 1๋ ๋๊ฒ ์ธ๊ธฐ๋ฅผ ๋๊ณ ์์ต๋๋ค. Tailwind CSS์ ์ํํ๊ฒ ์๋ํ๊ณ ๋ฒ์ ์๋ ์์คํ ์ผ๋ก, UI ๊ด๋ฆฌ์ ์๋ก์ด ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ๋ ์ธ๊ธฐ ์๋ ์ ํ์ง์ ๋๋ค. ์๋ก์ด ๋์ธ๊ฐ ๋ฑ์ฅํ๊ฑฐ๋, ๋ชจ๋ ๊ฒ์ด ๋ค์ ๋๋ฌด ๋น์ทํด์ง๊ธฐ ์ ๊น์ง๋ ์ข์ ์ ํ์ด๋ผ๊ณ ๋งํ ์ ์์ต๋๋ค.
Lucide React
์ด ์์ด์ฝ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ด๋ฏธ Shadcn UI์ ํจ๊ป ์ ๊ณต๋๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ๊ฒ์ผ๋ก ๋์ฒดํ ํ์๊ฐ ์์ ๊ฒ์ ๋๋ค. ๋ค๋ฅธ ๋์์ด ๋ฑ์ฅํ๋ฉด ๋ค์ ํ๋ก์ ํธ์์ ์ ํ์ ๊ณ ๋ คํ ๊ฒ์ ๋๋ค. Lucide React์๋ ํฐ ํฌ์๊ฐ ํ์ํ์ง ์์ต๋๋ค. (์ฐธ๊ณ : CSS Styling in React)
ํ์ ์คํฌ๋ฆฝํธ
์ด ์ ํ์ ๋ํด ๋ง์ด ๋งํ ํ์๋ ์์ ๊ฒ ๊ฐ์ต๋๋ค. TypeScript๋ JavaScript ํ๋ก์ ํธ์ ์ ๊ณ ํ์ค์ด ๋์์ผ๋ฉฐ, ๋ ๋์ ๊ฐ๋ฐ์ ๊ฒฝํ, ์ ์ ๋ฒ๊ทธ, ์ ์ง๋ณด์๊ฐ ์ฉ์ดํ ์ฝ๋๋ฅผ ์ํ ํ๋ฅญํ ์ ํ์ ๋๋ค.
Zod
๋ฆฌ์กํธ ํ๋ก์ ํธ์์ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ํ ์ ๊ณ ํ์ค์ผ๋ก, ํ์ ์คํฌ๋ฆฝํธ์ ์ ์ด์ธ๋ฆฝ๋๋ค. ์์ฆ ์ ๋ ์๋ฒ ์ธก ์ ํจ์ฑ ๊ฒ์ฌ(์: ์๋ฒ ์ก์ )์๋ง ์ฌ์ฉํ๊ณ , ํด๋ผ์ด์ธํธ ์ธก ํผ์ ๋ค์ดํฐ๋ธ HTML ์ ํจ์ฑ ๊ฒ์ฌ๋ก ๊ฐ๋ณ๊ฒ ์ ์งํ๊ณ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์๋ํํฐ ํผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด๋ ํผ ์ปดํฌ๋ํธ์ ๋ณต์ก์ฑ์ด ์์ด์ง๋๋ค. (์ฐธ๊ณ : State in React)
nuqs
nuqs๋ Next.js์์ ํ์ ์ด ์ง์ ๋ URL ์ํ(์: ๊ฒ์, ์ ๋ ฌ, ํ์ด์ง๋ค์ด์ )๋ฅผ ์ํ ์ ์ ํ์ ๋๋ค. ๋ค๋ฅธ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ์ด ๊ธฐ๋ฅ์ด ๋ด์ฅ๋์ด ์๊ฑฐ๋ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผ ํ ์ ์์ต๋๋ค. ์ด๋ค ๊ฒฝ์ฐ๋ , URL ์ํ๋ฅผ ์ํ ์๋ฃจ์ ์ด ์๋ ๊ฒ์ด ์ค์ํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
Zustand
Zustand๋ ํด๋ผ์ด์ธํธ ์ธก ์ํ ๊ด๋ฆฌ๋ฅผ ์ํ ์ ํ์ ์ต์ ์ ๋๋ค. ๊ทธ๋ฌ๋ URL ์ํ, ํด๋ผ์ด์ธํธ ์ธก ๋ฐ์ดํฐ ์บ์ฑ(์: React Query), ์๋ฒ ์ฃผ๋ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ (์: ์๋ฒ ์ปดํฌ๋ํธ)์ด ํด๋ผ์ด์ธํธ ์ธก ์ํ ๊ด๋ฆฌ์ ํ์์ฑ์ ์ค์ฌ์ฃผ์๊ธฐ ๋๋ฌธ์ ์์ฆ์ ํด๋ผ์ด์ธํธ ์ธก ์ํ๋ฅผ ๊ฑฐ์ ์ฌ์ฉํ์ง ์์ต๋๋ค.
React Query
React Query๋ ํด๋ผ์ด์ธํธ ์ธก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ผ ํ ๋, ํนํ ๋ฌดํ ์คํฌ๋กค๊ณผ ๊ฐ์ ๋ณต์กํ ๊ตฌํ์ ์ ํ์ ์ผ๋ก ์ฌ์ฉํ๋ ์ต์ ์ ๋๋ค. ๊ทธ๋ฌ๋ ํ๋ก์ ํธ ๋ณต์ก์ฑ์ด ๋ฎ์ ๋๋ ์๋ฒ ์ปดํฌ๋ํธ๋ง ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค. (์ฐธ๊ณ : Data Fetching in React)
Prisma(ORM)
Prisma๋ ํญ์ ์ ๊ฐ ์ ํํ๋ ORM[5]์ ๋๋ค. ๊ทธ๋ฌ๋ ์ต์ ํธ๋ ๋์ ๋ํ ๊ด์ฌ์ด ํญ์ ์๊ธฐ ๋๋ฌธ์, ํ์ํ๋ค๋ฉด Drizzle๋ก ๋์ฒดํ ์๋ ์์ต๋๋ค. ์ ๋ Prisma๊ฐ ์์ ์ ์ธ ์ ํ์ด๊ณ ์ด๋ฏธ ๋ง์ ํ๋ก์ ํธ์์ ์ฌ์ฉ๋๊ณ ์๊ธฐ ๋๋ฌธ์ ๋น๋ถ๊ฐ์ Prisma๋ฅผ ๊ณ ์ํ ๊ฒ์ ๋๋ค.

Supabase(๋ฐ์ดํฐ๋ฒ ์ด์ค)
Supabase๋ ์๋น์คํ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ก ์ ๊ฐ ์ ํํ๋ ์ต์ ์ ๋๋ค. PostgreSQL ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋๋ถ์ด ๋ง์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ๊ฐ์ธ์ ์ผ๋ก๋ ๊ธฐ์ ์ ํ์ ์ ์ฐ์ฑ์ ์ ์งํ๊ธฐ ์ํด ๋ค๋ฅธ ๊ธฐ๋ฅ๋ค์ ์ข ์์ฑ์ ํผํ๊ณ , ๋ฐ์ดํฐ๋ฒ ์ด์ค ๊ธฐ๋ฅ๋ง ์ฌ์ฉํฉ๋๋ค. ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๊ฒฝ์ฐ, Prisma๋ก๋ง ์ฐ๊ฒฐํ๊ณ Supabase์ ๋ค์ํ ๊ธฐ๋ฅ์ ๋ง์ด ์ฌ์ฉํ์ง ์์์ผ๋ก์จ, ํ์ํ ๋ ์ธ์ ๋ ์ง ๋ค๋ฅธ ๋ฐ์ดํฐ๋ฒ ์ด์ค(์: Neon)๋ก ๊ต์ฒดํ ์ ์๊ฒ ํฉ๋๋ค.
Lucia(์ธ์ฆ)
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก์ ์ง์์ด ์ค๋จ๋์์์๋ ์์ฆ์๋ Lucia๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ฌ์ ํ Oslo, Argon2, ์ ํ์ ์ผ๋ก Arctic๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํ ์ธ์ฆ์ ๊ธฐ๋ณธ ๊ฐ๋ ์ ๊ฐ๋ฅด์น๋ ํ์ต ์๋ฃ๋ก ์ฌ์ฉ๋ฉ๋๋ค. ๋ฐ๋ผ์ Clerk๋ Kinde์ ๊ฐ์ ์๋ํํฐ ์๋ฃจ์ ์ ์์กดํ์ง ์๊ณ , ์์ ์ ํ์์ ๋ง๊ฒ ๋ง์ถคํ๋ ์ง์ ๊ตฌํํ ์ธ์ฆ ์์คํ ์ ๊ฐ๊ฒ ๋ฉ๋๋ค.
S3(ํ์ผ ์ ๋ก๋)
Amazon์ AWS S3, ์ฌ์ ์ธ์ฆ๋ URL, AWS IAM์ ์ฌ์ฉํ์ฌ ์์ฒด ํ์ผ ์ ๋ก๋ ์์คํ ์ ๊ตฌ์ถํ๋ ๊ฒ์ ์ด๋ ต์ง ์์ผ๋ฉฐ, ๊ฐ์ฅ ์ ๋ ดํ ๋น์ฉ์ผ๋ก ํ์ผ์ ์ ์ฅํ ์ ์๋ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค. โํ ๋ฒ ๊ตฌํํ๊ณ ์์ด๋ฒ๋ฆฌ๋โ ์๋๋ฆฌ์ค์ด๋ฏ๋ก, ๋ค๋ฅธ ์๋ํํฐ ์๋ฃจ์ ์ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ ์ถ์ฒํ์ง ์์ต๋๋ค. ๋๋ถ๋ถ์ ์๋ํํฐ ์๋น์ค๋ ๋์ผํ API๋ฅผ ์ฌ์ฉํ๋ฏ๋ก, ํ์ํ ๊ฒฝ์ฐ ๋์ค์ ๋ค๋ฅธ ์๋น์ค๋ก ์ ํํ ์ ์์ต๋๋ค.
Inngest(ํ)
์ ๊ตํ ์์ ์กฐ์จ๊ณผ ๋ฐฑ์๋ ํ์ฅ์ด ํ์ํ ์ต๊ทผ ํ๋ก์ ํธ์์๋ Inngest๋ฅผ ์ฌ์ฉํ์ต๋๋ค. ๊ฐ์ธ์ ์ผ๋ก๋ ์๊ฐ์ ๋ฏผ๊ฐํ์ง ์๊ณ , ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์คํํ ์ ์๋ ์์ ์ ์ด๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๊ฐํธํ๊ฒ ์ค์ ํ๊ณ ์ ์งํ ์ ์๋ ํ ์์คํ ์ผ๋ก ์ข์ ์ ํ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
React Email + Resend
์ ์๋ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ก ์ด๋ฉ์ผ ํ ํ๋ฆฟ์ ๋ง๋ค ์ ์๊ฒ ํด์ฃผ๊ณ , ํ์๋ ์ด๋ฉ์ผ์ ๋ณด๋ด๊ธฐ ์ํ ํ๋ฅญํ ์๋ฃจ์ ์ ๋๋ค. ์ด์ ์๋ React Email๋ ์ฌ์ฉํ ์ ์๋ Postmark๋ฅผ ์ฌ์ฉํ์ง๋ง, Resend๋ก ์ ํํ ๊ฒ์ ๊ฝค ๋ง์กฑํ๊ณ ์์ต๋๋ค.
Vercel(ํธ์คํ )
์ ๋ ๋ช ๋ ๋์ Vercel์ ์ฌ์ฉํด ์์ต๋๋ค. ์์ ์๋ Zeit๋ผ๊ณ ๋ถ๋ ธ๊ณ , ์๋น์ค ์ด๋ฆ์ Now์์ต๋๋ค. ํ์คํ ์ ํ๋ฆฌ์ผ์ด์ ํธ์คํ ์ ์ํ ํ๋ฅญํ ์๋ฃจ์ ์ ์ ๊ณตํ์ง๋ง, ์ฌ๋๋ค์ด ์ฌ์ฉ์ ์ฃผ์ ํ๋ ์ด์ ๋ ์ดํดํฉ๋๋ค. ์์ฒด ํธ์คํ ๋์์ ์ฐพ๊ณ ์๋ค๋ฉด, Coolify์ ํจ๊ป Hetzner/DigitalOcean์ ์ฌ์ฉํ๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค. (์ฐธ๊ณ : Libraries for React projects)
CloudFlare(๋๋ฉ์ธ)
์๋ ๊ฐ ๋ค์ํ ๋๋ฉ์ธ ์ ๊ณต์ ์ฒด๋ฅผ ์ฌ์ฉํ์ง๋ง, ์์ฆ์๋ CloudFlare๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ๋๋ฉ์ธ์ ๊ด๋ฆฌํ๋ ๋ฐ ๊ฝค ๋ง์กฑํ๊ณ ์์ต๋๋ค. ํ๋ฅญํ UI๋ฅผ ์ ๊ณตํ๊ณ , DNS ๋ ์ฝ๋์ ์ถ๊ฐ ์ ๋ณด๋ฅผ ์ฒจ๋ถํ ์ ์์ด ์๋น์ค๋ฅผ ์ถ์ ํ๊ธฐ ์ฝ์ต๋๋ค.
Stripe(๊ฒฐ์ ๊ฒ์ดํธ์จ์ด)
๊ฒฐ์ ๊ฒ์ดํธ์จ์ด์ ๋ํ ๊ฐ๋ ฅํ ์ถ์ฒ์ ์์ต๋๋ค. ์ ๋ ๋ช ๋ ๋์ Stripe๋ฅผ ์ฌ์ฉํ๊ณ ๋ง์กฑํ๊ณ ์์ต๋๋ค. ํ์ง๋ง ์ฌ๋๋ค์ด ์ฌ์ฉ์ ์ฃผ์ ํ๋ ์ด์ ๋ฅผ ์ ์ ์๋๋ฐ, ์ด๋ฏธ ํ๋ฅญํ ๋ฌธ์์ API๊ฐ ์์์๋ ๋ถ๊ตฌํ๊ณ , API์ ๊ธฐ๋ฅ์ด ๋์ด๋์ ๋ถ๋ด์ค๋ฌ์ธ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
ํ ์คํธ ๋ฐ ๋๊ตฌ
ํ
์คํธ์ ๋๊ตฌ์ ๋ํ ๊ฐ๋ ฅํ ์ถ์ฒ์ ์์ต๋๋ค. ์์ฆ์๋ React Testing Library์ Cypress/Playwright๋ฅผ ํผํฉํ์ฌ ์ฌ์ฉํ๋ ๊ฒ์ด ํ
์คํธ์ ์ข์ ์ ํ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๋๊ตฌ์ ๊ฒฝ์ฐ, ESLint(์์ผ๋ก๋ Biome์ผ ์๋ ์์)์ Prettier๋ฅผ ์ถ์ฒํฉ๋๋ค. ๋น๋ก Storybook ๋์์ด ์๊ธฐ๊ธฐ๋ฅผ ๋ฐ๋ผ๊ณ ์์ง๋ง, ์ฌ์ ํ UI ๋ฌธ์ํ์๋ Storybook์ด ๊ฐ์ฅ ํธ๋ฆฌํ ์๋ฃจ์
์
๋๋ค. ์ถ๊ฐ๋ก ํฐ๋ฏธ๋์์ ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์คํ(์: ๋ฐ์ดํฐ๋ฒ ์ด์ค ์๋ฉ)ํ๊ธฐ ์ํด tsx
๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
๋ง์น๋ฉฐ
์ง๊ธ๊น์ง ์ดํด๋ณธ ๋ด์ฉ๋ค์ ์ ๊ฐ ์ ํ๋ก์ ํธ๋ฅผ ์์ํ ๋ ์ ํํ ๊ธฐ์ ์คํ์ด๋ฉฐ, 'The Road to Next'์์ ํ์คํ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ํด ๊ฐ๋ฅด์น๊ณ ์๋ ๋ด์ฉ์ด๊ธฐ๋ ํฉ๋๋ค. ์ด ๊ธ์ด ์ฌ๋ฌ๋ถ์ด ๋ค์ ํ๋ก์ ํธ์์ ๊ธฐ์ ์คํ์ ์ ํํ๋ ๋ฐ ๋์์ด ๋๊ธธ ๋ฐ๋๋๋ค.
<์๋ฌธ>
MVP(Minimum Viable Product): ํต์ฌ ๊ธฐ๋ฅ๋ง ๊ฐ์ถ ์ด๊ธฐ ๋ฒ์ ์ ์ ํ์ด๋ ์๋น์ค โฉ๏ธ
SaaS(Service as a Software): ์ฌ์ฉ์๊ฐ ์ํํธ์จ์ด๋ฅผ ์์ ์ ์ปดํจํฐ์ ์ค์นํ์ง ์๊ณ ์ธํฐ๋ท์ ํตํด ํ์ํ ๋๋ง๋ค ์ด์ฉํ๋ ์๋น์ค ๋ชจ๋ธ โฉ๏ธ
ํ๋ก์์ : ํน์ ์์ ์ด๋ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํด ์์ฐจ์ ์ผ๋ก ์ํํด์ผ ํ๋ ์ผ๋ จ์ ๋ช ๋ น์ด๋ ๋จ๊ณ๋ค์ ์ ์ํ ๊ฒ โฉ๏ธ
์๋ํฌ์ธํธ: ํต์ ๋คํธ์ํฌ์์ ํต์ ์ฑ๋์ ๋๋ถ๋ถ์ผ๋ก, ์๋น์ค๋ ๋ฆฌ์์ค์ ์ ๊ทผํ ์ ์๋ ์ง์ ๋๋ ์ธํฐํ์ด์ค๋ฅผ ์๋ฏธ โฉ๏ธ
ORM(Object-Relational Mapping): ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๊ด๊ณํ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฌ์ด์ ๋ฐ์ดํฐ๋ฅผ ๋ณํํ๋ ํ๋ก๊ทธ๋๋ฐ ๊ธฐ๋ฒ โฉ๏ธ