Svelte
๋ HTML
์์ฑ๊ตฌ์กฐ์ ๊ฑฐ์ ์ ์ฌํ ํํ๋ก ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ ์ ์๋ React
์ ์ ์ฌํ FE Framework
(ํ๋ ์์ํฌ๊ฐ ๋ง๋์ง์ ๋ํ ๋
ผ์์ ์ผ๋จ ๋์ด๊ฐ์)์ด๋ค. ๊ฐ์ฅ ํฐ ํน์ง์ React
์ฒ๋ผ state
์ props
์ฌ์ฉ์ด ์ธ์์ ์ด์ง ์๊ณ , ์ง๊ด์ ์ด๋ฉฐ ์ปดํฌ๋ํธ ๋๋๋ง ์
๋ฐ์ดํธ๊ฐ ์๋์ ์ผ๋ก ๋๋ค๋ ๊ฒ์ด๋ค. (๊ฐ๋ น useState
๋ฅผ ์ฐ์ง ์๋๋ผ๋)
๊ฐ์ธ์ ์ผ๋ก Svelte
๋ฅผ ์ฐธ ์ข์ํ๋ค. ์ง๊ด์ ์ด๋ฉฐ, JSX
๋ผ๋ ํฌ๋์ ๋นํ์ค(๋ด๊ฐ ์๊ฐํ๊ธฐ์ ๊ทธ๋ ๋ค)์ ์ฐ์ง ์์ ์ ์๊ธฐ์ ๊ทธ๋ ๋ค.
Svelte
์์ฒด๊ฐ ์ฐธ ์ ๋ง๋ค์ด์ง ์ธ์ด์ด๊ณ ์ฌ์ฉ์๋ ๋ถํธํจ์ด ์ ํ ์๊ณ , ์ค์ ๋์ Toy Project์๋ ๋ค์ ํ์ฉํ๋ค. ๋ค๋ง, ์น๋ช
์ ์ธ ๋ฌธ์ ๊ฐ ์๋๋ฐ ๋ฐ๋ก ์ํ๊ณ์ด๋ค. ์ํ๊ณ๊ฐ ๊ฐ์ถ์ด์ง์ง ์์ ์ํ์์๋ ์๋ฌด๋ฆฌ ์ข์๋ ์๋ฏธ๊ฐ ์๋ค. 2023๋
์ด๋ค. Component
๊ธฐ๋ฐ ๊ฐ๋ฐ์ด ์ผ์ํ ๋์ด ์๊ณ , ๋ชจ๋ ๊ฒ์ ํผ์ ๋ง๋ค ์ ์๋ ์ธ์์ด๋ค. ์ด ์ ์ด ๋๋ ๋๋ฌด ์์ฝ๋ค.
๋ง์ฝ Svelte
๊ฐ React
๊ฐ ๋์จ ํ์ฐธ ์ดํ ๋์ค์ง ์๊ณ ํ 1~2๋
๊ฒฉ์ฐจ๋ฅผ ๋์์ ๋ ๋์์๋ค๋ฉด vue
์ฒ๋ผ 2์ธ์ ์ญํ ์ ํ ์๋ ์์์ ๊ฒ์ด๋ค. ๋ฌผ๋ก ์์ฆ์ ์ ๋ช
ํ ํ๋ก์ ํธ๋ค์ Svelte
๋ ๋ณ๋ ฌ๋ก ์ง์ํ๋ ๊ฒฝ์ฐ๋ค์ด ๋ง์ด ๋ณด์ด์ง๋ง, 99๊ฐ๊ฐ Svelte
๋ฅผ ์ง์ํ๋ค ํ๋๋ผ๋ ๊ฒฐ๊ตญ 1๊ฐ๊ฐ ์ง์ํ์ง ์๋๋ค๋ฉด, ๋งค์ฐ ๊ท์ฐฎ์์ด ๋ฐ๋ฅด๊ฒ ๋๋ค.
์๋ค. ์ด๊ฒ ๋ฌธ์ ๋ค. ๋ค๋ฅธ ์ฌ์ํ ๋ฌธ์ ์ ๋ค์ด์ผ ์ด๋ป๊ฒ๋ ๊ณ ์ณ๋๊ฐ๊ฑฐ๋ ํ๋ฉด ๋๋ ๋ฌธ์ ์ธ๋ฐ, ์ด๊ฑด ํด๊ฒฐ์ฑ
์ด ์์ ์๋ ์์ค์ด๋ค. ๊พธ์คํ ๊ฐ๋ฐ์ด ๋์ด์ผ ํ๋๋ฐ, ์ด๋ฏธ ๊ธฐ์
๋ค ์
์ฅ์์๋ React
์ ๊ฐ์ ๊ฒ๋ค์ ์ ์ฌ์ฉํ๊ณ ์๋ ์
์ฅ์์ ์๋ก์ด ์ปดํฌ๋ํธ๋ค์ ๋ค๋ฅธ ์ธ์ด๋ก ๋ ๊ฐ๋ฐํ๊ฒ ํ ์ ์ธ์ฑ
์ด ์๋ค. ๋ฌผ๋ก React
์ปดํฌ๋ํธ๋ค์ Svelte
์์๋ ์ฌ์ฉํ๊ฒ ํ๋ ๋ฐฉ์์ ์ทจํ๋ ๋ฐฉ์์ ํด๊ฒฐ์ฑ
์ด ์์ ์ ์๋ค. ๊ทผ๋ฐ ๊ทธ๋ผ React
์ฐ๋ฉด ๋์ง ์ Svelte
์ฐ๊ฒ ๋๊ฐ.
๋๋ ์ด๊ฒ ์ ๋ง ๋ณ๋ก๋ผ๊ณ ์๊ฐํ๋ค. Svelte
์ ํต์ฌ์ ๊ฐ๋จํจ์ ์์๋ค. ๊ทธ๋ฐ๋ฐ ์ด ํ๋ก์ ํธ๋ ๋๋ฌด ๋ณต์กํ๋ค. ์ค์ ๋ก Svelte
๊ฐ๋ฐ์ ์ฃผ๋ํ๋ ๊ฐ๋ฐ์๋ ์ด Sveltekit
์ ์ฒซ๋ฒ์งธ ์ ์๋ฒ์ ์ ๋ด๋๊ธฐ๊น์ง ์๋นํ ์๊ฐ์ด ๊ฑธ๋ ธ๋ค. (์ค๋ ฅ์๋ ๊ฐ๋ฐ์์์๋) ๊ทธ๋ฆฌ๊ณ Svelte
๋ฆด๋ฆฌ์ฆ ์์ ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์ด๋ฏธ SSR
์ํ๊ณ์ ์ด๋ฏธ ๊ฐ์๋ค์ด ๋ค์ ์กด์ฌํ๋ค. ์ด๋ค ์ฌ์ด์ Svelte
๋ฅผ ์ธ ์ ์๋ค๋ ์ด์ ๋ง์ผ๋ก Sveltekit
์ ์ฌ์ฉํ๊ฒ ํ๊ธฐ์๋ ๋๋ฌด ๋ฉ๋ฆฌํธ๊ฐ ์ ๋ค.
๊ทธ๋์ ์ ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋ค ๋๋ ๋ด๊ฐ ์ฌ๋ํ๋ Svelte
๋ฅผ ๋ฒ๋ฆฌ๊ณ React
๊ธฐ๋ฐ์ vite
๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ๋ง์๋จน์๋ค. 2023๋
์์๋ ์ด๊ฒ ์ ์ผ ์ฐ๊ธฐ ์ฝ๊ณ , ์ํ๊ณ๋ ํฌ๋๊น. ๋ช๋
๊ฐ ์ง์ผ๋ณด๋ฉฐ ์ฌ์ฉํ๋ ํ๋ก์ ํธ์ธ Svelte
์ธ๋ฐ, ๋ช๋
์งธ ์ด๋ฐ ์ปดํฌ๋ํธ ๋ถ์กฑ ๋ฌธ์ ๋ค์ด ํด๊ฒฐ๋์ง ์์์ ๋๋ ๋์ด์ ์ฐ์ง ์์ ๊ฒ ๊ฐ๋ค.
๊ทธ๋๋ ์ ๋ค์๋ ํ๋ก์ ํธ์ฌ์ ํ๋๋ ์ปดํฌ๋ํธ ๋ง๋ค์ด์ ๊ณต๊ฐ๋ ํ๊ณ ํ๋๋ฐ ์ด๊ฒ ๋ญ ํ๋์ฌ๋ ๋ ๋ฌ๋ผ๋ถ๋๋ค๊ณ ํด๊ฒฐ๋ ๋ฌธ์ ๋ ์๋๋ผ์..