์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

๋งŒ๋“ค๋ฉด์„œ ๋ฐฐ์šฐ๋Š” Svelte

์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ Svelte(์Šค๋ฒจํŠธ)๋ฅผ ๋ฐฐ์›Œ๋ณด๋Š” ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. Svelte ๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•์„ ์ตํžŒ ํ›„ Todo ์•ฑ์„ ํ•จ๊ป˜ ๋งŒ๋“ค๋ฉด์„œ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ์–ด๋–ป๊ฒŒ Svelte๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์ตํ˜€๋ณด๋Š” ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค.

(4.9) ์ˆ˜๊ฐ•ํ‰ 9๊ฐœ

์ˆ˜๊ฐ•์ƒ 113๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

์ƒˆ์†Œ์‹

5 ๊ฐœ

  • Indie Coder๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ์•ˆ๋…•ํ•˜์„ธ์š” hollo coding ์ž…๋‹ˆ๋‹ค.

    ์ด๋ฒˆ์— Node.Js ๋ฐฑ์—”๋“œ ๊ฐ•์ขŒ๋ฅผ ์˜คํ”ˆํ•˜๊ฒŒ ๋˜์–ด ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.

    Express ๋Œ€๋น„ ๋น ๋ฅธ ์†๋„๋ฅผ ์ž๋ž‘ํ•˜๋Š” Fastify ํ”„๋ ˆ์ž„์›Œํฌ์™€ ํŽธ๋ฆฌํ•œ ORM Prisma

    ๊ทธ๋ฆฌ๊ณ  Typescript๋ฅผ ์ด์šฉํ•ด ๊ฐœ๋ฐœํ•˜๋Š” Node.Js ๋ฐฑ์—”๋“œ ๊ณผ์ •์ด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    ์˜ˆ์ „ ์ œ๊ฐ€ Svelte๋กœ ๋งŒ๋“ค์—ˆ๋˜ Slog์˜ REST API ์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด๊ธฐ๋„ ํ•˜๋‹ˆ Svelte REST-API ์ฝ”์Šค๋ฅผ ํ•™์Šต ํ•˜์…จ๋˜ ๋ถ„๋“ค์ด ํ•œ๋ฒˆ ๋“ค์–ด๋ณด์…”๋„ ์ข‹์€ ๊ฒฝํ—˜์ด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    ๊ทธ๋Ÿผ ๊ฐ•์ขŒ์—์„œ ๋ต™๊ฒ ์Šต๋‹ˆ๋‹ค.

    ๐Ÿ’ป ์ฐจ์„ธ๋Œ€ Node.js ๋ฐฑ์—”๋“œ ์„œ๋ฒ„ ๊ฐœ๋ฐœ: https://inf.run/mpCv8

    image

    0
  • Indie Coder๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ์ด๋ฒˆ์— svelte์™€ REST API๋ฅผ ์ด์šฉํ•œ ์„œ๋น„์Šค ๊ฐœ๋ฐœ ๊ด€๋ จ ๊ฐ•์ขŒ๋ฅผ ์‹œ์ž‘ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•์ขŒ๋Š” ๋ฌด๋ฃŒ๋กœ ์˜คํ”ˆํ•œ ๊ฐ•์ขŒ๋กœ ์ž‘๋…„์— ์ง‘ํ•„ํ•œ โ€˜์Šค๋ฒจํŠธ๋กœ ์‹œ์ž‘ํ•˜๋Š” ์›นํ”„๋ŸฐํŠธโ€™ ํ›„๋ฐ˜๋ถ€์— ๋‚˜์™”๋˜ SLOG ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ธฐ์— ๋Œ€ํ•œ AS ์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

    ํ”„๋ŸฐํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์ธ svelte๋ฅผ ์ด์šฉํ•ด์„œ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ์ ‘ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด ์•„๋งˆ๋„ REST API์™€ ํ†ต์‹ ํ•˜๋Š” ๋ถ€๋ถ„์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜๋Š” ๋ฐฉ๋ฒ•, JWT ํ† ํฐ ์ธ์ฆ, ๋ฌดํ•œ์Šคํฌ๋กค ํŽ˜์ด์ง€๋„ค์ด์…˜ ๋“ฑ ์›น์•ฑ ๊ฐœ๋ฐœ์— ์žˆ์–ด์„œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋Š” ๋‚ด์šฉ๋“ค์„ ์ค‘์‹ฌ์œผ๋กœ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค.

    ์ œ๊ฐ€ ์ •๋ง ์ข‹์•„ํ•˜๋Š” svelte๊ฐ€ ์กฐ๊ธˆ๋” ๋งŽ์€ ๋ถ„๋“ค์—๊ฒŒ ์‚ฌ๋ž‘๋ฐ›๊ธธ ๋ฐ”๋ผ๋Š” ๋งˆ์Œ์—์„œ ๋งŒ๋“  ๊ฐ•์ขŒ์ด๊ธฐ๋„ ํ•˜๋‹ˆ ๋งŽ์€ ๊ด€์‹ฌ ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

    ๊ฐ•์ขŒ ๋งํฌ : https://inf.run/7Na4

    0
  • Indie Coder๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ์•ˆ๋…•ํ•˜์„ธ์š”. hollo coding ์ž…๋‹ˆ๋‹ค.

    ์ด๋ฒˆ์— โ€˜GraphQL ์™„์ „์ •๋ณต (๊ฐ€์ƒ์˜ ํ‚ค์˜ค์Šคํฌ๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉฐ ๋ฐฐ์šฐ๋Š” ํ’€์Šคํƒ ๊ณผ์ •)โ€™ ๊ฐ•์ขŒ๋ฅผ ์˜คํ”ˆํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

    ์˜ˆ์ „ โ€˜๋งŒ๋“ค๋ฉด์„œ ๋ฐฐ์šฐ๋Š” Svelteโ€™ ์ดํ›„์— ๋‘๋ฒˆ์งธ๋กœ ์˜คํ”ˆํ•œ ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค.

    ์ด๋ฒˆ ๊ฐ•์ขŒ์—์„œ๋Š” GraphQL์— ๋Œ€ํ•œ ์ „๋ฐ˜์ ์ธ ์ดํ•ด์™€ ํ•จ๊ป˜ ๊ฐ€์ƒ์˜ ํ‚ค์˜ค์Šคํฌ์ธ ์Šค๋งˆํŠธ๋ฉ”๋‰ด๋ฅผ ๋ฐฑ์—”๋“œ์—์„œ ๋ถ€ํ„ฐ ํ”„๋ŸฐํŠธ์—”๋“œ๊นŒ์ง€ ๋ชจ๋‘ ๊ตฌํ˜„ํ•˜๋Š” ํ’€์Šคํƒ ๊ฐ•์ขŒ๋กœ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค.

    ํ”„๋ŸฐํŠธ์—”๋“œ์—์„œ๋Š” ์ด๋ฒˆ์—๋„ Svelte๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ์ „ ์ œ ๊ฐ•์ขŒ๋ฅผ ๋“ค์—ˆ๋˜ ๋ถ„๋“ค๊ป˜์„œ๋Š” Svelte๋กœ ๊ตฌํ˜„ํ•˜๋Š” GraphQL ์„œ๋น„์Šค์— ๋Œ€ํ•ด ์•Œ ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ๊ธฐํšŒ๊ฐ€ ๋  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    ๊ทธ๋ฆฌ๊ณ  ์บ์‹œ, ์ธ์ฆ , ํŒŒ์ผ ์—…๋กœ๋“œ ๋“ฑ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ๋งˆ์ฃผ์น  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์ฃผ์ œ๋ฅผ GraphQL์„ ์ค‘์‹ฌ์œผ๋กœ ํ’€์–ด๊ฐ€ ๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

    ๊ทธ๋Ÿผ ๋งŽ์€ ๋ถ„๋“ค์˜ ๊ด€์‹ฌ ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

    ๊ฐ•์ขŒ ๋งํฌ: https://www.inflearn.com/course/graphql-์™„์ „์ •๋ณต?inst=ad1d8573

    0
  • Indie Coder๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ์•ˆ๋…•ํ•˜์„ธ์š”.

    ์ œ๊ฐ€ ์ œ์ž‘ํ•œ Svelte ๊ฐ•์ขŒ ๋‚ด์šฉ์„ ๋ณด์™„ํ•˜์—ฌ ์ฑ…์œผ๋กœ ์ถœํŒ์„ ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

    ๊ฐ•์ขŒ์—์„œ ๋‹ค๋ฃจ์ง€ ๋ชปํ•œ ๋””ํ…Œ์ผํ•œ ๋ถ€๋ถ„๋“ค์„ ๋‹ค๋ฃจ๊ธฐ๋„ ํ–ˆ๊ณ ,

    ํ›„๋ฐ˜๋ถ€ ์‹ค์ „์˜ˆ์ œ๋กœ๋Š” ์‹ค์ œ ๋ฐฑ์•ค๋“œ์„œ๋ฒ„์™€ ํ†ต์‹ ์„ ํ•˜๋Š” SNSํ”„๋กœ์ ํŠธ๋„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.  

    ๋งŽ์€ ๊ด€์‹ฌ ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. 

     

    ์ถœํŒํ›„๊ธฐ

     

    ๋„์„œ๋งํฌ

    http://www.yes24.com/Product/Goods/106212164

    https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=286865838

    http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791165921132&orderClick=LEa&Kc=

     

     

    0
  • Indie Coder๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ๊ฐ•์ขŒ์—์„œ ์‚ฌ์šฉ๋œ routify ๋ฒ„์ „์€ 1.0 ์ž…๋‹ˆ๋‹ค. 

    ์ด๋ถ€๋ถ„ ์ฐธ๊ณ  ๋ฐ”๋ž๋‹ˆ๋‹ค. 

     

    <script>
      import { Router } from "@sveltech/routify";
      import { routes } from "@sveltech/routify/tmp/routes";
    </script>
    
    <Router {routes} />

     

    0

โ‚ฉ33,000