์ธ๊ณ์ ์ผ๋ก ๊ด์ฌ์ด ๋์์ง๊ณ ์๋ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ, Svelte(์ค๋ฒจํธ)์ ํต์ฌ ์ฌ์ฉ๋ฐฉ๋ฒ์ ์ ๋ฆฌํ ๊ธฐ์ด ๊ฐ์์ ๋๋ค. ํ๊ตญ์ ์ข ๋ ๋ง์ ๋ถ๋ค์ด Svelte๋ฅผ ์ฝ๊ณ ํธ๋ฆฌํ๊ฒ ์ด์ฉํ๊ธฐ๋ฅผ ๋ฐ๋ผ๋ ๋ง์์์ ๊ฐ์๋ฅผ ๋ง๋ค์์ต๋๋ค.
Svelte (์ค๋ฒจํธ)
์น ํ๋ฐํธ์๋ ๊ธฐ์ด
๋ ์ค๋ฅด๋ FE ๋์ธ ์ค๋ฒจํธ(Svelte)
๊ธฐ์ด๋ถํฐ ์ฝ๊ณ ๋น ๋ฅด๊ฒ!
Svelte๋ ํ์ฌ ์ ์ธ๊ณ ํ๋ฐํธ์๋ ์์ฅ์์ ๊ฐ์ฅ ์ฃผ๋ชฉ๋ฐ๊ณ ์๋ ํ๋ ์์ํฌ์ ๋๋ค. React(๋ฆฌ์กํธ)๋ Vue(Vue.js)๋ณด๋ค ๋ค์ ๋ฆ๊ฒ ์ธ์์ ๋์์ง๋ง ํ๋ฐ ์ฃผ์์์๋ ๋ถ๊ตฌํ๊ณ ์ด๋ค ์ด์์ ํฐ ๊ธฐ๋๋ฅผ ๋ฐ๊ณ ์์ต๋๋ค.
StactOverflow ๋ฐ Stateofjs ๋ฑ์ ๋ณด๋ฉด ์ผ๋ง๋ ๋ง์ ๊ฐ๋ฐ์๋ค์ด Svelte์ ๊ด์ฌ์ ๊ฐ๊ณ ์๋์ง๋ฅผ ํ๋์ ์ ์ ์์ต๋๋ค.
์ด ๊ฐ์๋ โ์ค๋ฒจํธ๋ก ์์ํ๋ ์น ํ๋ฐํธ์๋โ ๋์์ ์ผ๋ถ ์ฑํฐ๋ฅผ ์์์ผ๋ก ๋ง๋ ๊ฐ์์
๋๋ค.
(์ ์ ์ง์: HTML/CSS ๋ฐ JavaScript ๊ธฐ์ด)
์ปดํฌ๋ํธ ๋จ์๋ก ๊ฐ๋ฐ๋๋ ํ๋ฐํธ์๋์ ๊ธฐ๋ณธ์ Svelte๋ฅผ ์ด์ฉํด์ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค. ์ปดํฌ๋ํธ์ ํต์ฌ ๊ธฐ๋ฅ์ธ ํต์ ๋ฐฉ๋ฒ, ์ด๋ฒคํธ ์กฐ์, ํ๋ฉด ํจ๊ณผ ๋ฑ์ ํตํด์ ํ๋ฉด์ ๋ณด์ฌ์ง๋ ๊ฒฐ๊ณผ๋ฌผ๋ค์ด ์ด๋ป๊ฒ Reactiveํ๊ฒ ๋ง๋ค์ด์ง๊ณ ์กฐ์๋๋์ง๋ฅผ ์ตํ ์ ์์ต๋๋ค. (HTML, JavaScript & Svelte)
Svelte๊ฐ ๊ฐ์ง ํน์ง์ ๋ง์ง๋ง ๊ฐ์ฅ ํฐ ํน์ง์ ์ฝ๋ค๋ ์ ์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด ์ง์๋ง ์๋ค๋ฉด ์ ๋ง ์ฝ๊ฒ ๋ฐฐ์ฐ๊ณ ๊ณง๋ฐ๋ก ์ด๋ค ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค์ด ๋ณผ ์ ์์ต๋๋ค.
ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ด ์ฒ์์ธ ๊ฐ๋ฐ์ ๋ถ๋ค๋ ๊ฐ์๋ฅผ ํตํด ๋๋ต์ ์ผ๋ก ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ด ์ด๋ค ์์ผ๋ก ์งํ๋๋์ง ์ ์ ์๋๋ก ๊ฐ์์์๋ ์ด Svelte ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋๋ฐ ํ์ํ ํ์์ ์ธ ๋ด์ฉ๋ง์ ์ ๋ณํด์ ์งํ๋ฉ๋๋ค.
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๊ด์ฌ์ด ์๋ ๋๊ตฌ๋
์ข ๋ ๋น ๋ฅด๊ฒ ๋ฌด์ธ๊ฐ๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ถ
Svelte์ ๋ํด ํ๋ฒ์ฏค ๋ค์ด๋ณด์ ๋ถ
ํ๋ก ํธ์๋์ ๋์ ํ๊ณ ์ถ์ ๋์์ด๋, ํผ๋ธ๋ฆฌ์
Q. ๊ฐ์ ๋์ด๋๊ฐ ์ด๋ป๊ฒ ๋๋์?
HTML, Javascript์ ๋ํ ๊ธฐ์ด์ ์ธ ์ง์์ด ์๋ ๋ถ์ด๋ผ๋ฉด ๋๊ตฌ๋ ํ์ต ๊ฐ๋ฅํฉ๋๋ค. Svelte์ ๊ดํ ๋ด์ฉ์ค์์ ๋ณต์กํ๊ณ ๋ ์ค์ํ ๋ถ๋ถ๋ค์ ์ ์ธํ๊ณ ํ์๋ก ์์์ผ ํ๋ ๋ถ๋ถ๋ค๋ง ๊ฐ์ถ๋ ค์ ๋ง๋ Svelte ๊ธฐ์ด ๊ฐ์์ ๋๋ค.
Q. ๊ฐ๋ฐ ํ๊ฒฝ์ ์ด๋ป๊ฒ ๋๋์?
macOS, Windows, Linux ๋ฑ Node.js๋ฅผ ์ค์นํ ์ ์๋ ์ด๋ค PC์์๋ผ๋ ๊ฐ๋ฐํ๊ฒฝ์ ํ์ํ ํ๋ก๊ทธ๋จ์ ์ค์นํ๊ณ ์งํํ ์ ์์ต๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ๊ด์ฌ์ด ์๋ ๋๊ตฌ๋
์ข ๋ ๋น ๋ฅด๊ฒ ๋ฌด์ธ๊ฐ๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ถ
Svelte์ ๋ํด ํ ๋ฒ์ฏค ๋ค์ด๋ณด์ ๋ถ
๋์์ด๋ ๋๋ ํผ๋ธ๋ฆฌ์ ์์ ํ๋ฐํธ์๋์ ๋์ ํ๊ณ ์ถ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML ๋ฐ CSS ๊ธฐ์ด
JavaScript ๊ธฐ์ด
2,281
๋ช
์๊ฐ์
48
๊ฐ
์๊ฐํ
80
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
5
๊ฐ
๊ฐ์
2000๋ ๋ ์ค๋ฐ๋ถํฐ ๋ณธ๊ฒฉ์ ์ผ๋ก ์น๊ฐ๋ฐ์ ์์ํ์ฌ ํ์ฌ๊น์ง ํ๋ฆฌ๋์ ๊ฐ๋ฐ์๋ก ํ๋ํ๊ณ ์์ต๋๋ค. ์ฝ5๋ ๊ฐ Amplix BI ์๋ฃจ์ ์ค๋ฌด์ ๊ต์ก์ ์งํํ๊ณ ๊ฐ๋ฐ์ ์ง์ํ๋ฉฐ ์๋ก์ด ๊ธฐ์ ์ ํจ์จ์ ์ผ๋ก ์ ๋ฌํ๋ ๊ฒ์ ๋ํ ๋ง์ ๊ฒฝํ๊ณผ ๊ณ ๋ฏผ์ ํ์ต๋๋ค.
ํ์ฌ๋ ๊ฐ๋ฐ ์ ๋ฌด์ ํจ๊ป ๊ฐ๋ฐ์๋ค์๊ฒ ๋์์ด ๋ ๋งํ ์น๊ด๋ จ ๋ถ์ผ์ ์๋ก์ด ๊ธฐ์ ์ ์ฐพ๊ณ ๊ฐ์ข์ ์ฑ ์ ํตํด ๊ณต์ ํ๊ณ ์์ต๋๋ค.
ํ) ํ๋ฆฌ๋์
์ ) (์ฃผ) ๋น์ฆํ๋ฌ๊ทธ ์ ๋ต์๋ฃจ์ ์ฌ์ ๋ถ ํ์ฅ
์ ) (์ฃผ) ํผ๋๋ชฝํค์ค ์๋์คํ ๋ฆฌ ์๋น์ค ๊ฐ๋ฐ ํ์ฅ
youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw
email: freeseamew@gmail.com
blog1: https://medium.com/freeseamew
blog2: https://dev.to/freeseamew
์ฐจ์ธ๋ Node.js ๋ฐฑ์๋ ์๋ฒ ๊ฐ๋ฐ(Fastify & Prisma & Typescript์ ํจ๊ปํ๋)
GraphQL ์์ ์ ๋ณต (๊ฐ์์ ํค์ค์คํฌ๋ฅผ ๊ตฌํํ๋ฉฐ ๋ฐฐ์ฐ๋ ํ์คํ ๊ณผ์ )
yes24, ๊ต๋ณด๋ฌธ๊ณ , ์๋ผ๋
์ ์ฒด
5๊ฐ โ (1์๊ฐ 6๋ถ)
๋ฌด๋ฃ