AI ์์ฝ ๋ฐ ๋ถ๋ฅ ๊ธฐ๋ฅ์ ๊ฐ์ถ SvelteKit ๊ธฐ๋ฐ ๋ถ๋งํฌ ๊ด๋ฆฌ ์น์ฑ
SmartLinkBox๋ ์ฌ์ฉ์๊ฐ ์ ์ฅํ ์น ๋งํฌ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก
AI๋ฅผ ํ์ฉํด ์๋์ผ๋ก ์์ฝ, ์นดํ
๊ณ ๋ฆฌ ๋ถ๋ฅ, ์ ๋ชฉ ์์ฑ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๋ถ๋งํฌ ํ๋ ์ด์
ํ๋ซํผ์
๋๋ค.
React์ Next.js์ ์ต์ํ ์ํ์์,
์ด๋ฒ ํ๋ก์ ํธ๋ SvelteKit๊ณผ Supabase, ๊ทธ๋ฆฌ๊ณ AI API ์ฐ๋ ํ์ต์ ๋ชฉํ๋ก ์งํ๋์์ต๋๋ค.
๊ตฌ๋ถ | ๊ธฐ์ |
---|---|
ํ๋ ์์ํฌ | SvelteKit |
๋ฐฑ์๋/BaaS | Supabase |
AI API | OpenAI GPT-4 |
UI ๋ฌธ์ํ | Storybook |
์คํ์ผ๋ง | Tailwind CSS |
์ด์ ๊น์ง๋ React + Next.js
๋ก ํ๋ก์ ํธ๋ฅผ ์งํํด์์ผ๋ฉฐ,
์ด๋ฒ์๋ ๋ ์ง๊ด์ ์ด๊ณ ๋น ๋ฅธ ๊ฐ๋ฐ ๊ฒฝํ์ ์ํด SvelteKit์ผ๋ก ์ ํํ์์ต๋๋ค.
ํญ๋ชฉ | React/Next.js | Svelte/SvelteKit |
---|---|---|
๋ฌธ๋ฒ ๋ณต์ก๋ | JSX, ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํ์ | ์ ์ธํ ๋ฐ์์ฑ, ๋ด์ฅ store |
๋ฐํ์ ์ฑ๋ฅ | ๋น๊ต์ ํฌ๊ณ ๋ฌด๊ฑฐ์ | ์ปดํ์ผ ํ์ ์ต์ ํ, ๋น ๋ฆ |
SSR ๊ตฌ์กฐ | Next.js ๊ธฐ๋ฐ ์ค์ ํ์ | ๊ธฐ๋ณธ ๋ด์ฅ |
UI ๋ถ๋ฆฌ | Context ๋ฑ ์ธ๋ถ ์์กด ๋ง์ | ๊ฐ๋จํ props + store ๊ตฌ์กฐ |
ํ๋ ์์ํฌ ๊ตฌ์กฐ | ์ํ๊ณ ๋ฐฉ๋ | ์ปดํฉํธํ๊ณ ๋จ์ |
src/
โฃ routes/
โ โฃ +page.svelte
โ โฃ login/+page.svelte
โ โฃ dashboard/+page.svelte
โ โ api/summarize/+server.ts
โฃ lib/
โ โฃ supabase.ts
โ โ utils.ts
โฃ components/
โ โฃ LinkCard.svelte
โ โฃ AddLinkModal.svelte
โฃ stores/
โ โ auth.ts
"๋ค์ ๋งํฌ์ ๋ด์ฉ์ ์งง๊ฒ ์์ฝํด์ค. ํต์ฌ ๋ด์ฉ์ 2~3๋ฌธ์ฅ์ผ๋ก ์ ๋ฆฌํด์ค: [URL]"
/u/:username
)