21์๊ฐ์ด ๋๋ ๋ถ๋์ ์ต๊ณ ์ Svelte.js ๊ฐ์!
'Svelte.js [Core API] ์๋ฒฝ ๊ฐ์ด๋'๋ฅผ ์๊ฐํ์๋ ๋ชจ๋ ๋ถ๋ค ์๋
ํ์ธ์~
๊ฐ์ฌ ๋ฐ์์
์
๋๋ค.
์ด์ ๊ณต์ง ์ดํ ์ค๋๊น์ง ๋ค์์ ์๋ก์ด ํํธ๋ค์ ์ถ๊ฐ ์ดฌ์ํ์ต๋๋ค.
- 11-5. slots
- 15-1. แแ
กแผแแ
ด แแ
จแแ
ฆ แแ
ฉแแ
ฒแฏ แแ
ฅแแ
ฅแซ แแ
ตแฏแแ
ตแแ
ตแแ
ตแแ
ต
11-5๋ฒ์ ์ปดํฌ๋ํธ ์ฌ๋กฏ์ ๊ดํ ์ถ๊ฐ ๊ธฐ๋ฅ์ด๊ณ ,
15-1๋ฒ์ ๊ฐ์์ ํฌํจ๋ 'Trello ํด๋ก ์ฑ ์์ '๋ฅผ ๋ง๋ค๊ธฐ ์ ์ ๊ผญ ๋ณด์
จ์ผ๋ฉด ํ๋ ์ค์น ๋ชจ๋์ ๋ฒ์ ์ผ์น ๋ฐฉ๋ฒ์
๋๋ค.
์๋ก์ด ์์๋ค ๊ผญ ํ์ธํ์๊ธธ ๋ฐ๋ผ์~๐
๊ทธ๋ฆฌ๊ณ ๋ธ๋ก๊ทธ๋ ์ต์ ๋ด์ฉ์ผ๋ก ์
๋ฐ์ดํธํ์ต๋๋ค.(Svelte.js ์๋ฒฝ ๊ฐ์ด๋(Renew))
ํ์ตํ ๋ ์ฐธ๊ณ ํ์ธ์~
2020๋
๋ ์ด์ ํ๋ฃจ ๋จ์๋ค์.
๋ค์ฌ๋ค๋ํ๋ ํ ํด ์ ๋ง๋ฌด๋ฆฌ ํ์๊ณ ,
๋ด๋
์๋ ๋ชจ๋ ์ฆ๊ฒ๊ณ ํ๋ณตํ๊ฒ ๊ทธ๋ฆฌ๊ณ ์์ ๋กญ๊ฒ ๋์๋ค๋ ์ ์์์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค.
๋ฏธ๋ฆฌ ์ํด ๋ณต ๋ง์ด ๋ฐ์ผ์ธ์~โญ
๊ฐ์ฌํฉ๋๋ค.
๊ณต์งํ๋ Svelte.js์ ๋ค์ ๊ฐ์๋ฅผ ๋๋์ด ์ถ์ํ์ต๋๋ค! ๐
๋งํฌ: [Svelte.js SPA ์ํ ๊ฒ์ ํ๋ก์ ํธ]
์ด๋ฒ ๊ฐ์๋ฅผ ๊ฐ๋ณ๊ฒ ์๊ฐํ์๋ฉด,
SPA(Single Page Application) ๊ธฐ๋ฐ์ ์ํ ๊ฒ์ API๋ฅผ ํ์ฉํ๋ ์์ ๊ฐ์๋ก,
์กฐ๊ธ ํน๋ณํ ๋ถ๋ถ์ ์ํ ๊ฒ์์ ์ํ 'API ํค'๋ฅผ ์ฌ์ฉ์ ํ๊ฒฝ์ ๋ ธ์ถํ์ง ์๋๋ก,
AWS ๋๋ค ๊ธฐ๋ฐ์ Netlify ์๋ฒ๋ฆฌ์ค ํจ์๋ฅผ ์ฌ์ฉํด ๊ฐ๋จํ๊ฒ ๋ฐฑ์๋ API๋ฅผ ๋ง๋ค๊ณ ๋ก์ปฌ์์ ํ ์คํธ๋ ์งํํฉ๋๋ค!
๊ฐ๋ ๋ง ์ดํดํ์๋ฉด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๊ณต๋ถํ์๋ ๋ถ๋ค๋ ์ธ์ ๋ ์ง ํ์ฉ ๊ฐ๋ฅํ ๋ฐฉ๋ฒ์ด๋ ์ค์ ์ฌ์ฉ์ ๋ง์ ๋์์ด ๋์ง ์์๊น ๊ธฐ๋ํฉ๋๋ค.
์ด 7์๊ฐ 40๋ถ ๊ฐ์์ด๊ณ ์คํ 30% ํ ์ธ์ผ๋ก 7,700์์ผ๋ก ๋ฑ๋กํ์ต๋๋ค.
๋ถ๊ฐ์ธ ์ ์ธ ๊ธฐ๋ณธ ๊ฐ๊ฒฉ์ด 10,000์๋ถํฐ ์์์ฌ์ ๋ค์ ๊ฐ์๋ฅผ ์ข ๋ ์ ๋ ดํ๊ฒ ์ ๊ณตํ์ง ๋ชปํ๋ ์ ์ํด ๋ถํ๋๋ฆฝ๋๋ค.
Svelte.js๋ก ๊ฐ๋ฐํ์๋ ๋ชจ๋ ๋ถ๋ค์๊ฒ ์ข์ ์ ๋ณด๊ฐ ๋๊ธธ ํฌ๋งํฉ๋๋ค.
๊ทธ๋ผ ๋ง์ ๊ด์ฌ ๋ถํ๋๋ฆฌ๊ฒ ์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค~ ๐
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
ํ์ตํ์๋๋ฐ ์ฐธ๊ณ ํ์๊ณ ,
๋ชจ๋ ์ฆ๊ฑฐ์ด ์ฃผ๋ง ๋ณด๋ด์ธ์ :)
๊ณต์งํ๋ ๋๋ก ์๋ก์ด ๋ด์ฉ์ ์๋์ ๊ฐ์ด ์ถ๊ฐํ์ต๋๋ค.
์๊ฐํ์๋ ๋ถ๋ค๊ป ๋ง์ ๋์์ด ๋๊ธธ ์ง์ฌ์ผ๋ก ๋ฐ๋๋๋ค.
๋ชจ๋ ์ฆ๊ฑฐ์ด ํ ์ฃผ ๋์ธ์ :)
๊ฐ์ฌํฉ๋๋ค~
-------------------------
- 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๋ฅผ ํตํ ์ง์์ ์ธ ๋ฐฐํฌ
HEROPY ๋ธ๋ก๊ทธ์ 'Svelte.js ์๋ฒฝ ๊ฐ์ด๋' ํฌ์คํธ๋ฅผ ๊ฐ์ ์ปค๋ฆฌํ๋ผ์ ๋ง๊ฒ ๋๊ท๋ชจ๋ก ์ ๋ฐ์ดํธํ์ต๋๋ค.
https://heropy.blog/2019/09/29/svelte/
์์ ๊ฐ์์ ํจ๊ป ๋ณด์๋ฉด ๋์์ด ๋์ง ์์๊น ํฉ๋๋ค.
์ดํ ๋ณด๊ฐ๊ณผ ํจ๊ป ๋ฌธ์๋ ์
๋ฐ์ดํธํ๊ฒ ์ต๋๋ค.
ํน์ ๋ฌธ์์์ ์์ฌ์ด ๋ถ๋ถ์ด ์๋ค๋ฉด ์๋ ค์ฃผ์ธ์.
์ต๋ํ ๋น ๋ฅด๊ฒ ๋ณด์ํ๊ฒ ์ต๋๋ค.
์ฆ๊ฑฐ์ด ํ๋ฃจ ๋ณด๋ด์ธ์ :D
๊ฐ์ฌํฉ๋๋ค.
โฉ37,730
30%
โฉ53,900