๐Ÿ Programming/Svelte

๐Ÿ Programming/Svelte

[Svelte] VS Code์— ํ™˜๊ฒฝ ์„ธํŒ…ํ•˜๊ธฐ

VS Code์— Svelte ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ™˜๊ฒฝ์„ ์„ธํŒ…ํ•ด๋ณด์ž ** ์„ธํŒ…ํ•˜๊ธฐ ์ „์—, ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•  ํด๋”๋ฅผ ๋งŒ๋“ค์–ด ๋‘”๋‹ค. 1. VS Code๋ฅผ ์‹คํ–‰ํ•œ ํ›„, ํ„ฐ๋ฏธ๋„์„ ์—ฐ๋‹ค. 2. ์ƒ๋‹จ์˜ 'ํŒŒ์ผ'์—์„œ ๋ฏธ๋ฆฌ ๋งŒ๋“ค์–ด ๋‘” ํด๋”๋ฅผ ์—ฐ๋‹ค. 3. ํ„ฐ๋ฏธ๋„์— 'npm init svelte@next ~~~' ๋ฅผ ์ž…๋ ฅํ•œ ํ›„, ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค์ •ํ•ด์ค€๋‹ค. (*~~~์—๋Š” ์ƒ์„ฑํ•˜๊ณ ์ž ํ•˜๋Š” ํ”„๋กœ์ ํŠธ ์ด๋ฆ„) 4. ์ƒ๋‹จ์˜ 'ํŒŒ์ผ'์—์„œ ๋ฐฉ๊ธˆ ์ƒ์„ฑํ•œ ํด๋”๋ฅผ ์—ฐ๋‹ค. 5. ํ„ฐ๋ฏธ๋„์— 'yarn' ๋ช…๋ น์–ด๋กœ yarn์„ ์„ค์น˜ํ•œ๋‹ค. (* npm ์‚ฌ์šฉํ•  ์‚ฌ๋žŒ์€ npm install ๋ช…๋ น์–ด ์‚ฌ์šฉ) 6. ์™ผ์ชฝ์˜ ๋งจ ์•„๋ž˜ 'ํ™•์žฅ'์—์„œ 'Svelte for VS Code' ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์น˜ํ•œ๋‹ค. 7. src/routes ์— '__layout.svelt..

๐Ÿ Programming/Svelte

[Svelte] Svelte๋ž€?

2021๋…„ Stack Overflow ๊ฐœ๋ฐœ์ž ์„ค๋ฌธ์กฐ์‚ฌ ๊ฒฐ๊ณผ์—์„œ 1์œ„๋ฅผ ์ฐจ์ง€ํ•œ, ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๊ฐ€์žฅ ์‚ฌ๋ž‘๋ฐ›๋Š” ์›น ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ๋ฝ‘ํžŒ Svelte(์Šค๋ฒจํŠธ)์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. ์ด ๊ธ€์—์„œ๋Š” Svelte๊ฐ€ ๋ฌด์—‡์ธ์ง€, ๊ทธ๋ฆฌ๊ณ  ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€, React์™€๋Š” ๋ฌด์—‡์ด ๋‹ค๋ฅด๊ณ  ์–ด๋–ป๊ฒŒ React๋ณด๋‹ค ๋น ๋ฅธ์ง€์— ๋Œ€ํ•ด ํฌ์ŠคํŒ…ํ•ด๋ณด๋ ค ํ•œ๋‹ค. Svelte ๋ž€? ๋น ๋ฅธ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ๋„๊ตฌ · ์˜คํ”ˆ ์†Œ์Šค ํ”„๋ก ํŠธ์—”๋“œ ์›น ํ”„๋ ˆ์ž„์›Œํฌ Svelte(์Šค๋ฒจํŠธ)๋Š” 2016๋…„ ์ถœ์‹œ๋œ ์˜คํ”ˆ ์†Œ์Šค ํ”„๋ก ํŠธ์—”๋“œ ์›น ํ”„๋ ˆ์ž„์›Œํฌ๋กœ, ๋น ๋ฅธ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ํˆด์ด๋‹ค. Interactiveํ•œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ•œ๋‹ค๋Š”๋ฐ ์žˆ์–ด React๋‚˜ Vue์™€ ๊ฐ™์€ JavaScript ํ”„๋ ˆ์ž„์›Œํฌ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ์œ ์‚ฌํ•˜๋‹ค. Svelte ์ปดํฌ๋„ŒํŠธ๋Š” 3๊ฐ€์ง€..

Dhey
'๐Ÿ Programming/Svelte' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก