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

Svelte.js [Core API] ์™„๋ฒฝ ๊ฐ€์ด๋“œ

21์‹œ๊ฐ„์ด ๋„˜๋Š” ๋ถ„๋Ÿ‰์˜ ์ตœ๊ณ ์˜ Svelte.js ๊ฐ•์˜!

์ƒˆ์†Œ์‹

5 ๊ฐœ

  • 'Svelte.js [Core API] ์™„๋ฒฝ ๊ฐ€์ด๋“œ'๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹œ๋Š” ๋ชจ๋“  ๋ถ„๋“ค ์•ˆ๋…•ํ•˜์„ธ์š”~ 
    ๊ฐ•์‚ฌ ๋ฐ•์˜์›…์ž…๋‹ˆ๋‹ค.

    ์ด์ „ ๊ณต์ง€ ์ดํ›„ ์˜ค๋Š˜๊นŒ์ง€ ๋‹ค์Œ์˜ ์ƒˆ๋กœ์šด ํŒŒํŠธ๋“ค์„ ์ถ”๊ฐ€ ์ดฌ์˜ํ–ˆ์Šต๋‹ˆ๋‹ค.

    - 11-5. slots
    - 15-1. แ„€แ…กแ†ผแ„‹แ…ด แ„‹แ…จแ„Œแ…ฆ แ„†แ…ฉแ„ƒแ…ฒแ†ฏ แ„‡แ…ฅแ„Œแ…ฅแ†ซ แ„‹แ…ตแ†ฏแ„Žแ…ตแ„‰แ…ตแ„แ…ตแ„€แ…ต

    11-5๋ฒˆ์€ ์ปดํฌ๋„ŒํŠธ ์Šฌ๋กฏ์— ๊ด€ํ•œ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์ด๊ณ ,
    15-1๋ฒˆ์€ ๊ฐ•์˜์— ํฌํ•จ๋œ 'Trello ํด๋ก  ์•ฑ ์˜ˆ์ œ'๋ฅผ ๋งŒ๋“ค๊ธฐ ์ „์— ๊ผญ ๋ณด์…จ์œผ๋ฉด ํ•˜๋Š” ์„ค์น˜ ๋ชจ๋“ˆ์˜ ๋ฒ„์ „ ์ผ์น˜ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.
    ์ƒˆ๋กœ์šด ์˜์ƒ๋“ค ๊ผญ ํ™•์ธํ•˜์‹œ๊ธธ ๋ฐ”๋ผ์š”~๐Ÿ˜‰

    ๊ทธ๋ฆฌ๊ณ  ๋ธ”๋กœ๊ทธ๋„ ์ตœ์‹  ๋‚ด์šฉ์œผ๋กœ ์—…๋ฐ์ดํŠธํ–ˆ์Šต๋‹ˆ๋‹ค.(Svelte.js ์™„๋ฒฝ ๊ฐ€์ด๋“œ(Renew))
    ํ•™์Šตํ•  ๋•Œ ์ฐธ๊ณ ํ•˜์„ธ์š”~

    2020๋…„๋„ ์ด์ œ ํ•˜๋ฃจ ๋‚จ์•˜๋„ค์š”.
    ๋‹ค์‚ฌ๋‹ค๋‚œํ–ˆ๋˜ ํ•œ ํ•ด ์ž˜ ๋งˆ๋ฌด๋ฆฌ ํ•˜์‹œ๊ณ ,
    ๋‚ด๋…„์—๋Š” ๋ชจ๋‘ ์ฆ๊ฒ๊ณ  ํ–‰๋ณตํ•˜๊ฒŒ ๊ทธ๋ฆฌ๊ณ  ์ž์œ ๋กญ๊ฒŒ ๋Œ์•„๋‹ค๋‹ ์ˆ˜ ์žˆ์—ˆ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค. 

    ๋ฏธ๋ฆฌ ์ƒˆํ•ด ๋ณต ๋งŽ์ด ๋ฐ›์œผ์„ธ์š”~โญ
    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

    4
  • ๊ณต์ง€ํ–ˆ๋˜ Svelte.js์˜ ๋‹ค์Œ ๊ฐ•์˜๋ฅผ ๋“œ๋””์–ด ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค! ๐Ÿ‘

    ๋งํฌ: [Svelte.js SPA ์˜ํ™” ๊ฒ€์ƒ‰ ํ”„๋กœ์ ํŠธ]

    ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ๊ฐ€๋ณ๊ฒŒ ์†Œ๊ฐœํ•˜์ž๋ฉด,

    SPA(Single Page Application) ๊ธฐ๋ฐ˜์˜ ์˜ํ™” ๊ฒ€์ƒ‰ API๋ฅผ ํ™œ์šฉํ•˜๋Š” ์˜ˆ์ œ ๊ฐ•์˜๋กœ,

    ์กฐ๊ธˆ ํŠน๋ณ„ํ•œ ๋ถ€๋ถ„์€ ์˜ํ™” ๊ฒ€์ƒ‰์„ ์œ„ํ•œ 'API ํ‚ค'๋ฅผ ์‚ฌ์šฉ์ž ํ™˜๊ฒฝ์— ๋…ธ์ถœํ•˜์ง€ ์•Š๋„๋ก,

    AWS ๋žŒ๋‹ค ๊ธฐ๋ฐ˜์˜ Netlify ์„œ๋ฒ„๋ฆฌ์Šค ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฐฑ์—”๋“œ API๋ฅผ ๋งŒ๋“ค๊ณ  ๋กœ์ปฌ์—์„œ ํ…Œ์ŠคํŠธ๋„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค!

    ๊ฐœ๋…๋งŒ ์ดํ•ดํ•˜์‹œ๋ฉด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ๊ณต๋ถ€ํ•˜์‹œ๋Š” ๋ถ„๋“ค๋„ ์–ธ์ œ๋“ ์ง€ ํ™œ์šฉ ๊ฐ€๋Šฅํ•œ ๋ฐฉ๋ฒ•์ด๋‹ˆ ์‹ค์ œ ์‚ฌ์šฉ์— ๋งŽ์€ ๋„์›€์ด ๋˜์ง€ ์•Š์„๊นŒ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค.

    ์ด 7์‹œ๊ฐ„ 40๋ถ„ ๊ฐ•์˜์ด๊ณ  ์˜คํ”ˆ 30% ํ• ์ธ์œผ๋กœ 7,700์›์œผ๋กœ ๋“ฑ๋กํ–ˆ์Šต๋‹ˆ๋‹ค.

    ๋ถ€๊ฐ€์„ธ ์ œ์™ธ ๊ธฐ๋ณธ ๊ฐ€๊ฒฉ์ด 10,000์›๋ถ€ํ„ฐ ์‹œ์ž‘์—ฌ์„œ ๋‹ค์Œ ๊ฐ•์˜๋ฅผ ์ข€ ๋” ์ €๋ ดํ•˜๊ฒŒ ์ œ๊ณตํ•˜์ง€ ๋ชปํ•˜๋Š” ์  ์–‘ํ•ด ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

    Svelte.js๋กœ ๊ฐœ๋ฐœํ•˜์‹œ๋Š” ๋ชจ๋“  ๋ถ„๋“ค์—๊ฒŒ ์ข‹์€ ์ •๋ณด๊ฐ€ ๋˜๊ธธ ํฌ๋งํ•ฉ๋‹ˆ๋‹ค.

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

    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~ ๐Ÿ˜Š

    2
  • 11์›” 25์ผ์— ๋ฆด๋ฆฌ์ฆˆ๋œ Svelte์˜ ์ตœ์‹  3.30.0 ๋ฒ„์ „์—์„œ svelte-preprocess ๋ชจ๋“ˆ ์‚ฌ์šฉ๊ณผ ๊ด€๋ จํ•ด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ด์Šˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๋•Œ๋ฌธ์— Svelte ํŒŒ์ผ์—์„œ <style lang="scss">๋ฅผ ์ ์šฉํ•˜๋ฉด "Cannot read property 'length' of undefined" ๋ฉ”์‹œ์ง€์™€ ํ•จ๊ป˜ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

    ๋”ฐ๋ผ์„œ ์•„๋ž˜ ๋งํฌ์˜ ํ•ด๋‹น ์ด์Šˆ๊ฐ€ ๋‹ซํžˆ๊ธฐ ์ „๊นŒ์ง€๋Š” svelte๋ฅผ ์„ค์น˜ํ•  ๋•Œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด 3.29.7 ์ดํ•˜ ํ•˜์œ„ ๋ฒ„์ „์œผ๋กœ ์„ค์น˜ํ•˜์‹œ๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

    npm install svelte@3.29.7

    https://github.com/sveltejs/svelte/issues/5722

    ํ•™์Šตํ•˜์‹œ๋Š”๋ฐ ์ฐธ๊ณ ํ•˜์‹œ๊ณ ,

    ๋ชจ๋‘ ์ฆ๊ฑฐ์šด ์ฃผ๋ง ๋ณด๋‚ด์„ธ์š” :)

    2
  • ๊ณต์ง€ํ–ˆ๋˜ ๋Œ€๋กœ ์ƒˆ๋กœ์šด ๋‚ด์šฉ์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.
    ์ˆ˜๊ฐ•ํ•˜์‹œ๋Š” ๋ถ„๋“ค๊ป˜ ๋งŽ์€ ๋„์›€์ด ๋˜๊ธธ ์ง„์‹ฌ์œผ๋กœ ๋ฐ”๋ž๋‹ˆ๋‹ค.

    ๋ชจ๋‘ ์ฆ๊ฑฐ์šด ํ•œ ์ฃผ ๋˜์„ธ์š” :)
    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~

    -------------------------

    - 7-4. ํ‚ค ๋ธ”๋ก
    - 11-4. ์Šฌ๋กฏ ํฌ์›Œ๋”ฉ(Forwarding)
    - 17-1. Snowpack์ด๋ž€?
    - 17-2. Snowpack ๊ธฐ๋ฐ˜์˜ Svelte ํ…œํ”Œ๋ฆฟ ์„ค์น˜ ๋ฐ ๊ตฌ์„ฑ ์ดํ•ด
    - 18-1. ์ฃผ์š” ๋””๋ ‰ํ† ๋ฆฌ ๋ณต์‚ฌ ๋ฐ HMR ์ ์šฉ
    - 18-2. ํ•ต์‹ฌ ๋ชจ๋“ˆ ์„ค์น˜ ๋ฐ ๊ตฌ์„ฑ
    - 18-3. SCSS ๋ฐ Svelte Preprocess ๊ตฌ์„ฑ
    - 18-4. ์ œํ’ˆ ๋ชจ๋“œ์˜ ๋กœ๊ทธ ์ œ๊ฑฐ ๊ตฌ์„ฑ
    - 18-5. ์ฝ”๋“œ ์ตœ์ ํ™”(์ตœ์†Œํ™”) ๋ฐ ๊ฒฝ๋กœ ๋ณ„์นญ ๊ตฌ์„ฑ
    - 18-6. GitHub ์ €์žฅ์†Œ ์ƒ์„ฑ๊ณผ ํ”„๋กœ์ ํŠธ Push
    - 18-7. Netlify๋ฅผ ํ†ตํ•œ ์ง€์†์ ์ธ ๋ฐฐํฌ

    1
  • HEROPY ๋ธ”๋กœ๊ทธ์˜ 'Svelte.js ์™„๋ฒฝ ๊ฐ€์ด๋“œ' ํฌ์ŠคํŠธ๋ฅผ ๊ฐ•์˜ ์ปค๋ฆฌํ˜๋Ÿผ์— ๋งž๊ฒŒ ๋Œ€๊ทœ๋ชจ๋กœ ์—…๋ฐ์ดํŠธํ–ˆ์Šต๋‹ˆ๋‹ค.

    https://heropy.blog/2019/09/29/svelte/

    ์˜์ƒ ๊ฐ•์˜์™€ ํ•จ๊ป˜ ๋ณด์‹œ๋ฉด ๋„์›€์ด ๋˜์ง€ ์•Š์„๊นŒ ํ•ฉ๋‹ˆ๋‹ค.
    ์ดํ›„ ๋ณด๊ฐ•๊ณผ ํ•จ๊ป˜ ๋ฌธ์„œ๋„ ์—…๋ฐ์ดํŠธํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.
    ํ˜น์‹œ ๋ฌธ์„œ์—์„œ ์•„์‰ฌ์šด ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ์•Œ๋ ค์ฃผ์„ธ์š”.
    ์ตœ๋Œ€ํ•œ ๋น ๋ฅด๊ฒŒ ๋ณด์™„ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    ์ฆ๊ฑฐ์šด ํ•˜๋ฃจ ๋ณด๋‚ด์„ธ์š” :D
    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

    2

โ‚ฉ37,730

30%

โ‚ฉ53,900