React์ Vue, Angular ํ๋ก ํธ์๋ 3๋์ฅ์ ์๋ฆฌ๋ฅผ ์ํํ๋ Svelte ์ ๋ฌธ ๊ฐ์์ ๋๋ค. Svelte ๊ณต์ ๋ฌธ์๋ฅผ ํ ๋๋ก Svelte ๋ฌธ๋ฒ์ A๋ถํฐ Z๊น์ง ๋ชจ๋ ๋ค๋ฃน๋๋ค.
ํ๋ก ํธ์๋ ๊ฐ๋ฐ
์น ๊ฐ๋ฐ
Svelte ์ฌ์ฉ๋ฐฉ๋ฒ
์ฒ์ ๋ง๋๋ ์ค๋ฒจํธ, A๋ถํฐ Z๊น์ง ์๋กญ๊ฒ ์์ํด๋ณด์ธ์!
๋ฆฌ์กํธ, ๋ทฐ, ์ต๊ทค๋ฌโฆ
ํ๋ก ํธ์๋ 3๋์ฅ ์๋ฆฌ๋ฅผ ์ํํ๊ณ ์๋!!Svelte(์ค๋ฒจํธ)์ ์
๋ฌธ ๊ฐ์์
๋๋ค.
Svelte ๊ณต์ ๋ฌธ์์ Beomy ๋ธ๋ก๊ทธ๋ฅผ ํ ๋๋ก Svelte ์ฌ์ฉ๋ฒ์ A๋ถํฐ Z๊น์ง ๋ชจ๋ ์ด์ผ๊ธฐํฉ๋๋ค. Svelte๋ฅผ ์ตํ๊ธฐ ์ํด ์ด ๊ฐ์ ์ ๊ฐ์, ์ด ๋ธ๋ก๊ทธ ์ ๋ธ๋ก๊ทธ ์ดํด๋ณผ ํ์ ์์ด Svelte ์ ๋ฌธ ๊ฐ์๋ฅผ ๋ค์ผ์๋ฉด ํ๋ฒ์ ํด๊ฒฐํ์ค ์ ์์ต๋๋ค!
์ด ๊ฐ์๋ฅผ ๋ค์ผ์ ํ์๋ Svelte๋ฅผ ์ฌ์ฉํ์ฌ ์นํ์ด์ง ๊ฐ๋ฐ์ ํ์ค ์ ์๋๋ก ์ฝ๊ฒ ์ค๋ช ํด ๋๋ฆฝ๋๋ค. :)
Svelte๋ 2019๋ ์ ๋ฑ์ฅํด ๋ฌด๋ญ๋ฌด๋ญ ์๋ผ๋๊ณ ์๋ ์๋ก์ด ํ๋ก ํธ์๋ ํ๋ ์์ํฌ์ ๋๋ค.
2019๋
์ ๋ฑ์ฅํ ํ์ ์ฃผ์์ด์ง๋ง, ๋ง์ ๋ถ์ด ๊ด์ฌ์ ๊ฐ์ง๊ณ ๊ณ์ ํ๋ ์์ํฌ์
๋๋ค. ๋ง์ ๋ถ์ด ๊ด์ฌ์ ๊ฐ์ง๋ ์ด์ ๊ฐ ๋น์ฐํ ์๊ฒ ์ฃ ?
Svelte๋ ๊ฐ์๋์ ์ฌ์ฉํ์ง ์์์, React์ Vue์ ๋ค๋ฅธ ํจ๋ฌ๋ค์์ ์ ์ํ ํ๋ ์์ํฌ์
๋๋ค. ๋ง์ ๋ถ์ ๊ด์ฌ์ ๋๊ฒ ๋ง๋ ํ์ Svelte์ ์ฑ๋ฅ์ด ์ปค ๋ณด์
๋๋ค.
Svelte๋ ํ๋ก ํธ์๋ 3๋์ฅ๋ค๋ณด๋ค ๋น ๋ฅธ ํผํฌ๋จผ์ค๋ก ์ถฉ๋ถํ ๋งค๋ ฅ์๋ ํ๋ ์์ํฌ์ ๋๋ค. ์๊ฐ์ด ์ข ๋ ์ง๋๋ฉด React๋ Vue๋งํผ ๋ง์ ๊ณณ์ ์ฐพ๋ ํ๋ ์์ํฌ๋ก ์๋ผ๋ ๊ฐ๋ฅ์ฑ์ ๊ฐ์ง ๋ฃจํค์ ๋๋ค!
Svelte์ ๊ณต์ ๋ฌธ์์ ์๋ ๋ด์ฉ์ A๋ถํฐ Z๊น์ง ๋ชจ๋ ์ด์ผ๊ธฐํฉ๋๋ค. ์ด ๊ฐ์ ํ๋๋ฉด Svelte ์์์ ๊ฑฐ๋ฌํ ํ์ค ์ ์์ต๋๋ค. ๊ฐ์์์ ์งํํ๋ 18๊ฐ์ ์น์ ์ 6๊ฐ์ง๋ก ์์ฝํ๋ฉด,
์ด๋ ๊ฒ ๋๋ ์ ์์ต๋๋ค. Svelte ๊ณ ๊ธ ๋ฌธ๋ฒ ๋ํ ์์๋์๋ฉด ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
์ด ๊ฐ์์์ ์ด์ผ๊ธฐํ๋ ๋ด์ฉ์ ๋ชจ๋ Svelte์ ํต์ฌ๋ง ๋ค๋ฃจ์์ต๋๋ค.
์ด๋ก ๊ฐ์๋ง ์๋ ๊ฒ์ด ์๋๋๋ค. Svelte์ ๋ฌธ๋ฒ๋ค์ ์ ๋ถ ์ฝ๋๋ก ์ค์ตํ๋ฉด์ ์์๋ณด๋ ๊ฐ์์ ๋๋ค. ์ง์ ๋ฐ๋ผํ๋ฉด์, ์ฝ๋์ ์คํ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด์ ์ฝ๊ฒ Svelte๋ฅผ ์ดํดํ ์ ์๋ ๊ฐ์์ ๋๋ค.
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋์?
A. ๋น์ ๊ณต์๋ถ๋ค๋ ๋ค์ ์ ์๋ ์ด๋ ต์ง ์์ ๊ฐ์์
๋๋ค. ๋ค๋ง HTML๊ณผ JavaScript, CSS ๊ธฐ์ด๋ฅผ ์๊ณ ์๋ค ๊ฐ์ ํ๊ณ ๊ฐ์๋ฅผ ์งํํ๊ธฐ ๋๋ฌธ์ HTML, JS, CSS์ ๊ธฐ๋ณธ ์ง์์ด ์์ผ์๋ค๋ฉด ๋์ฑ ์ฝ๊ฒ ์ดํดํ์ค ์ ์์ต๋๋ค.
Q. Svelte๋ฅผ ๋ฐฐ์ฐ๋ฉด ๋ฌด์์ด ์ข์๊ฐ์?
A. Svelte๋ ์์ง ์ ๊ท ํ๋ ์์ํฌ์ด์ง๋ง, ๋ง์ ๋ถ์ด ๊ด์ฌ์ ๊ฐ์ง๊ณ ์ง์ผ๋ณด๊ณ ์์ต๋๋ค. React๋ Vue์ฒ๋ผ ์ ๋ช
ํด์ง๋ ๊ฒ์ ์๊ฐ๋ฌธ์ ๋ผ๊ณ ์ ๋ ์๊ฐ๋ฉ๋๋ค. ๋ ์ ๋ช
ํด์ง๊ธฐ ์ ์ ๋ฏธ๋ฆฌ ๊ธฐ์ ์ ์ต๋ํ๊ณ ์ ์ ํด๋๋ ๊ฒ์ ์ด๋จ๊น์?
Q. ์ด ๊ฐ์๋ง์ ํน๋ณํ ์ฅ์ ์ด ์์๊น์?
A. ์ด ๊ฐ์๋ Svelte์ ๊ณต์ ๋ฌธ์๋ฅผ ํ ๋๋ก ์งํํ์์ต๋๋ค. ๊ณต์ ๋ฌธ์์์ ์ด์ผ๊ธฐํ๋ ๋ถ๋ถ๋ง ์ด์ผ๊ธฐํ๋ (๊ฒ์ฆ๋?) ๊ฐ์์
๋๋ค. Svelte ๊ณต์ ๋ฌธ์๋ฅผ ์ฒ์๋ถํฐ ๋๊น์ง ํ์ด๋ณด๋ ๊ฐ์์ด๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ค์ ํ์ ์์ด ์ด ๊ฐ์ ํ๋๋ฉด Svelte ์
๋ฌธํ์ค ์ ์์ต๋๋ค. ์ด๋ก ์ผ๋ก๋ง ๋๋๋ ๊ฒ์ด ์๋๋ผ Svelte ์ฌ์ฉ ๋ฐฉ๋ฒ์ ๊ฐ์๋ง๋ค ์ค์ต์ผ๋ก ์งํํ๋ ๊ฐ์์
๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ ๋ฌธํ์๋ ๋ถ๋ค
Svelte๋ฅผ ๊ณต๋ถํ๊ณ ์ถ์ผ์ ๋ถ๋ค
์ต์ ํ๋ก ํธ์๋ ํธ๋๋์ ๊ด์ฌ์ด ์์ผ์ ๋ถ๋ค
์ ์ ์ง์,
ํ์ํ ๊น์?
ES6+
240
๋ช
์๊ฐ์
12
๊ฐ
์๊ฐํ
21
๊ฐ
๋ต๋ณ
4.6
์
๊ฐ์ ํ์
2
๊ฐ
๊ฐ์
์ ์ฒด
74๊ฐ โ (5์๊ฐ 24๋ถ)
์ค๋ฆฌ์ํ ์ด์
04:15
Svelte ํน์ง
05:16
Quick Start Guide
05:49
๋ฐ์ดํฐ ์ ์
02:45
์์ฑ ์ ์
05:02
์คํ์ผ ์ ์
01:57
์ปดํฌ๋ํธ ์ ์
02:59
์ด๋ฒคํธ ๋ฆฌ์ค๋
03:33
$ ๋ฌธ๋ฒ
05:06