๋ง๋ค๋ฉด์ ๋ฐฐ์ฐ๋ Svelte
์ต์ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ Svelte(์ค๋ฒจํธ)๋ฅผ ๋ฐฐ์๋ณด๋ ๊ฐ์ข์ ๋๋ค. Svelte ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ์ ์ตํ ํ Todo ์ฑ์ ํจ๊ป ๋ง๋ค๋ฉด์ ์ค์ ํ๋ก์ ํธ์์ ์ด๋ป๊ฒ Svelte๋ฅผ ์ฌ์ฉํ ์ ์๋์ง ์ตํ๋ณด๋ ๊ฐ์ข์ ๋๋ค.
์๋ ํ์ธ์ hollo coding ์ ๋๋ค.
์ด๋ฒ์ Node.Js ๋ฐฑ์๋ ๊ฐ์ข๋ฅผ ์คํํ๊ฒ ๋์ด ์๋ ค๋๋ฆฝ๋๋ค.
Express ๋๋น ๋น ๋ฅธ ์๋๋ฅผ ์๋ํ๋ Fastify ํ๋ ์์ํฌ์ ํธ๋ฆฌํ ORM Prisma
๊ทธ๋ฆฌ๊ณ Typescript๋ฅผ ์ด์ฉํด ๊ฐ๋ฐํ๋ Node.Js ๋ฐฑ์๋ ๊ณผ์ ์ด ๋๊ฒ ์ต๋๋ค.
์์ ์ ๊ฐ Svelte๋ก ๋ง๋ค์๋ Slog์ REST API ์ ๋ํ ๋ด์ฉ์ด๊ธฐ๋ ํ๋ Svelte REST-API ์ฝ์ค๋ฅผ ํ์ต ํ์ จ๋ ๋ถ๋ค์ด ํ๋ฒ ๋ค์ด๋ณด์ ๋ ์ข์ ๊ฒฝํ์ด ๋ ๊ฒ ๊ฐ์ต๋๋ค.
๊ทธ๋ผ ๊ฐ์ข์์ ๋ต๊ฒ ์ต๋๋ค.
๐ป ์ฐจ์ธ๋ Node.js ๋ฐฑ์๋ ์๋ฒ ๊ฐ๋ฐ: https://inf.run/mpCv8
์ด๋ฒ์ svelte์ REST API๋ฅผ ์ด์ฉํ ์๋น์ค ๊ฐ๋ฐ ๊ด๋ จ ๊ฐ์ข๋ฅผ ์์ํ๊ฒ ๋์์ต๋๋ค. ์ด ๊ฐ์ข๋ ๋ฌด๋ฃ๋ก ์คํํ ๊ฐ์ข๋ก ์๋ ์ ์งํํ โ์ค๋ฒจํธ๋ก ์์ํ๋ ์นํ๋ฐํธโ ํ๋ฐ๋ถ์ ๋์๋ SLOG ํ๋ก์ ํธ ๋ง๋ค๊ธฐ์ ๋ํ AS ์ด๊ธฐ๋ ํฉ๋๋ค.
ํ๋ฐํธ์๋ ํ๋ ์์ํฌ์ธ svelte๋ฅผ ์ด์ฉํด์ ์๋น์ค๋ฅผ ๋ง๋ค๋ ๊ฐ์ฅ ๋ง์ด ์ ํ๊ฒ ๋๋ ๊ฒ์ด ์๋ง๋ REST API์ ํต์ ํ๋ ๋ถ๋ถ์ผ ๊ฒ์ ๋๋ค. ์๋ฒ์ ํต์ ํ๋ ๋ฐฉ๋ฒ, JWT ํ ํฐ ์ธ์ฆ, ๋ฌดํ์คํฌ๋กค ํ์ด์ง๋ค์ด์ ๋ฑ ์น์ฑ ๊ฐ๋ฐ์ ์์ด์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๊ฒ ๋๋ ๋ด์ฉ๋ค์ ์ค์ฌ์ผ๋ก ์ค๋นํ์ต๋๋ค.
์ ๊ฐ ์ ๋ง ์ข์ํ๋ svelte๊ฐ ์กฐ๊ธ๋ ๋ง์ ๋ถ๋ค์๊ฒ ์ฌ๋๋ฐ๊ธธ ๋ฐ๋ผ๋ ๋ง์์์ ๋ง๋ ๊ฐ์ข์ด๊ธฐ๋ ํ๋ ๋ง์ ๊ด์ฌ ๋ถํ๋๋ฆฌ๊ฒ ์ต๋๋ค.
๊ฐ์ข ๋งํฌ : https://inf.run/7Na4
์๋ ํ์ธ์. hollo coding ์ ๋๋ค.
์ด๋ฒ์ โGraphQL ์์ ์ ๋ณต (๊ฐ์์ ํค์ค์คํฌ๋ฅผ ๊ตฌํํ๋ฉฐ ๋ฐฐ์ฐ๋ ํ์คํ ๊ณผ์ )โ ๊ฐ์ข๋ฅผ ์คํํ๊ฒ ๋์์ต๋๋ค.
์์ โ๋ง๋ค๋ฉด์ ๋ฐฐ์ฐ๋ Svelteโ ์ดํ์ ๋๋ฒ์งธ๋ก ์คํํ ๊ฐ์ข์ ๋๋ค.
์ด๋ฒ ๊ฐ์ข์์๋ GraphQL์ ๋ํ ์ ๋ฐ์ ์ธ ์ดํด์ ํจ๊ป ๊ฐ์์ ํค์ค์คํฌ์ธ ์ค๋งํธ๋ฉ๋ด๋ฅผ ๋ฐฑ์๋์์ ๋ถํฐ ํ๋ฐํธ์๋๊น์ง ๋ชจ๋ ๊ตฌํํ๋ ํ์คํ ๊ฐ์ข๋ก ์ค๋นํ์ต๋๋ค.
ํ๋ฐํธ์๋์์๋ ์ด๋ฒ์๋ Svelte๋ฅผ ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค. ์์ ์ ๊ฐ์ข๋ฅผ ๋ค์๋ ๋ถ๋ค๊ป์๋ Svelte๋ก ๊ตฌํํ๋ GraphQL ์๋น์ค์ ๋ํด ์ ์ ์๋ ์ข์ ๊ธฐํ๊ฐ ๋ ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์บ์, ์ธ์ฆ , ํ์ผ ์ ๋ก๋ ๋ฑ ์ค์ ํ๋ก์ ํธ์์ ๋ง์ฃผ์น ์ ์๋ ๋ค์ํ ์ฃผ์ ๋ฅผ GraphQL์ ์ค์ฌ์ผ๋ก ํ์ด๊ฐ ๋ณผ ์ ์๊ฒ ๊ตฌ์ฑํ์ต๋๋ค.
๊ทธ๋ผ ๋ง์ ๋ถ๋ค์ ๊ด์ฌ ๋ถํ๋๋ฆฌ๊ฒ ์ต๋๋ค.
๊ฐ์ข ๋งํฌ: https://www.inflearn.com/course/graphql-์์ ์ ๋ณต?inst=ad1d8573
์๋ ํ์ธ์.
์ ๊ฐ ์ ์ํ Svelte ๊ฐ์ข ๋ด์ฉ์ ๋ณด์ํ์ฌ ์ฑ ์ผ๋ก ์ถํ์ ํ๊ฒ ๋์์ต๋๋ค.
๊ฐ์ข์์ ๋ค๋ฃจ์ง ๋ชปํ ๋ํ ์ผํ ๋ถ๋ถ๋ค์ ๋ค๋ฃจ๊ธฐ๋ ํ๊ณ ,
ํ๋ฐ๋ถ ์ค์ ์์ ๋ก๋ ์ค์ ๋ฐฑ์ค๋์๋ฒ์ ํต์ ์ ํ๋ SNSํ๋ก์ ํธ๋ ์ถ๊ฐํ์ต๋๋ค.
๋ง์ ๊ด์ฌ ๋ถํ๋๋ฆฌ๊ฒ ์ต๋๋ค.
.png)
๋์๋งํฌ
http://www.yes24.com/Product/Goods/106212164
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=286865838
๊ฐ์ข์์ ์ฌ์ฉ๋ routify ๋ฒ์ ์ 1.0 ์ ๋๋ค.
์ด๋ถ๋ถ ์ฐธ๊ณ ๋ฐ๋๋๋ค.
<script> import { Router } from "@sveltech/routify"; import { routes } from "@sveltech/routify/tmp/routes"; </script> <Router {routes} />







