Language-tools: TypeScript ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์‚ฌ์šฉ๋˜์ง€ ์•Š์€ ๋‚ด๋ณด๋‚ด๊ธฐ ์†์„ฑ ๊ฒฝ๊ณ ๊ฐ€ ์ž˜๋ชป๋œ ์ค„์— ์žˆ์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2020๋…„ 08์›” 27์ผ  ยท  18์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: sveltejs/language-tools

๋ฒ„๊ทธ ์„ค๋ช…
์‚ฌ์šฉ๋˜์ง€ ์•Š์€ ์†์„ฑ์˜ export let ๋ฌธ์€ ๊ฒฝ๊ณ ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค. ๊ฒฝ๊ณ ๋Š” ๋‚˜๋ฅผ ์œ„ํ•ด ์‹ค์ œ ์†์„ฑ ์œ„์˜ ์ค„์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

์žฌํ˜„ํ•˜๋ ค๋ฉด

์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๋ฅผ typescript ( lang="ts" ๋˜๋Š” type="text/typescript" )๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
์ผ๋ถ€ ๋‚ด๋ณด๋‚ด๊ธฐ ์†์„ฑ์„ ์„ ์–ธํ•˜๊ณ  ์–ด๋””์—๋„ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค.

์˜ˆ์ƒ๋˜๋Š” ํ–‰๋™

๊ฒฝ๊ณ ๋Š” ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์†์„ฑ์— ๋Œ€ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์Šคํฌ๋ฆฐ ์ƒท

image

์†์„ฑ์ด ์Šคํฌ๋ฆฝํŠธ์˜ ์ฒซ ๋ฒˆ์งธ ์ค„์—์žˆ๋Š” ๊ฒฝ์šฐ :

image

์‹œ์Šคํ…œ (๋‹ค์Œ ์ •๋ณด๋ฅผ ์ž‘์„ฑํ•˜์‹ญ์‹œ์˜ค) :

  • ์šด์˜์ฒด์ œ : Windows 10, 64bit
  • IDE : VSCode
  • ํ”Œ๋Ÿฌ๊ทธ์ธ / ํŒจํ‚ค์ง€ : Svelte for VSCode

๋ชจ๋“  18 ๋Œ“๊ธ€

@ tsconfig / svelte๋ฅผ ์ตœ์‹ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜์‹ญ์‹œ์˜ค.

๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์ž„์‹œ๋กœ ์ถ”๊ฐ€ํ–ˆ์ง€๋งŒ ์•„๋ฌด๊ฒƒ๋„ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์˜ค, ๋‹น์‹ ์ด ๊ณต์‹ ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€๋Š” svelte์˜ ๊ธฐ๋ณธ ๊ตฌ์„ฑ์ž…๋‹ˆ๋‹ค. tsconfig.json ์˜ extends ์„ (๋ฅผ) ์ด์— ๋งž๊ฒŒ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
https://github.com/sveltejs/template/blob/8194bf8f6452f8117195bf304ac99b15d329fbb3/scripts/setupTypeScript.js#L87

# 333๊ณผ ์ค‘๋ณต

@ jasonlyu123 ๋‚ด๊ฐ€ ๋งํ–ˆ๋“ฏ์ด ๊ธฐ๋ณธ ๊ตฌ์„ฑ์„ ์ผ์‹œ์ ์œผ๋กœ ์ถ”๊ฐ€ํ–ˆ์ง€๋งŒ ์•„๋ฌด๊ฒƒ๋„ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์—ฌ์ „ํžˆ ์ž˜๋ชป๋œ ์ค„์— ์˜ค๋ฅ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ ๋‹ค์Œ tsc ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ์ž‘์—… ๊ณต๊ฐ„์—์„œ ts ํŒŒ์ผ์„ ์ปดํŒŒ์ผํ•˜๊ณ  ์ถœ๋ ฅ ํŒŒ์ผ์— ์†Œ์Šค ๋งต์ด ์žˆ๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋ฌธ์ œ๋Š” ์†Œ์Šค ๋งต์— ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” svelte ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ svelte ์ง„๋‹จ์„ ์–ป์Šต๋‹ˆ๋‹ค. svelte.config.js๊ฐ€ ์žˆ๊ณ  ์—ฌ๊ธฐ์— ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์ง€์ •ํ•˜๋ฉด ์ „์ฒ˜๋ฆฌ์—์ด๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๊ณต์‹ svelte-preprocess๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ ์™ธ์—๋Š” ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ „์ฒ˜๋ฆฌ ๊ธฐ๊ฐ€ ์†Œ์Šค ๋งต์„ ๋ฐ˜ํ™˜ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ฒฝ๊ณ ๋Š” ์ž˜๋ชป๋œ ์œ„์น˜์— ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ tsconfig.json์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋ชจ๋‹ˆํ„ฐ๋งํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋ณ€๊ฒฝ ํ›„ ์–ธ์–ด ์„œ๋ฒ„๋ฅผ ๋‹ค์‹œ ์‹œ์ž‘ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

ํ•ญ์ƒ ์†Œ์Šค ๋งต์„ ์ƒ์„ฑํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ๋‹จ์ผ ํŒŒ์ผ์—์„œ tsc ๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ๋ถ„๋ช…ํžˆ tsconfig๋ฅผ๋กœ๋“œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. tsc -p . ๋˜๋Š” tsc --build tsconfig.json ํ•˜๋ฉด ์˜ˆ์ƒ๋Œ€๋กœ ์†Œ์Šค ๋งต์ด ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.

svelte.config.js ๊ฒฝ์šฐ)๋ฅผ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋˜ํ•œ ์–ด๋–ค ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๊นŒ?

์ž๋™ ๋ชจ๋“œ์—์„œ svelte-preprocess ๊ธฐ๋ณธ ํ”„๋กœ์„ธ์„œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์— ์˜ค๋ฅ˜๊ฐ€์žˆ๋Š” ์ตœ์†Œํ•œ์˜ ์˜ˆ์ œ ์ €์žฅ์†Œ ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์ž๋™ ๋ชจ๋“œ์—์„œ ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ๋ช…์‹œ ์ ์œผ๋กœ ์„ค์ •ํ•˜์—ฌ svelte.config.js ๋งŒ๋“ค๋ ค๊ณ ํ–ˆ์ง€๋งŒ ์ค‘์š”ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋ช…์‹œ ์ ์œผ๋กœ ๋งŒ ์‚ฌ์šฉ typescript ๋ฐ›๋Š” ๊ฒฝ๋กœ์™€ ํ•˜๋‚˜ tsconfig.json ๋ฌด์—‡์ด๋“  ํ•˜๋‚˜๋ฅผ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค.

์Œ ... ์ด๊ฒƒ์€ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ์ผ์ž…๋‹ˆ๋‹ค. tsconfig.json ์—์„œ sourcemap ๋„ true๋กœ ์„ค์ • ํ•œ ๊ฒฝ์šฐ์—๋งŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋ฉด extends ๊ฐ€ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ธ€์Ž„, ์ง€๊ธˆ์€ ๋ช…์‹œ ์ ์œผ๋กœ ์„ค์ •ํ•ด๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.
๊ฐ์‚ฌ

๋„ค, ๋‚ ์”ฌํ•œ ์ „์ฒ˜๋ฆฌ์˜ ์†Œ์Šค ํŒŒ์ผ์„ ๊ฐ„๋žตํžˆ ์‚ดํŽด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. extends ๊ตฌ๋ฌธ ๋ถ„์„ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
๋ฌธ์ œ๋ฅผ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์ด ๋ฌธ์ œ ๋Š” svelte-preprocess ์—์„œ ์—ด์—ˆ์Šต๋‹ˆ๋‹ค . docs์— ๋”ฐ๋ผ ์ž๋™ ์‚ฌ์ „ ์ฒ˜๋ฆฌ ๋ชจ๋“œ์—์„œ ์†Œ์Šค ๋งต์ด ์ƒ์„ฑ๋˜์–ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ : ๋ฌธ์„œ๊ฐ€ ์ž˜๋ชป๋˜์—ˆ์œผ๋ฏ€๋กœ ์ง์ ‘ true ๋กœ ์„ค์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

@brunnerh ์ œ๊ฑฐํ•˜๋Š” ๊ฒฝ์šฐ "sourceMaps": true ๋‹น์‹ ์˜ ๊ธฐ๋ณธ ์„ค์ • ์ฐธ์กฐ tsconfig.json ํ•  ๋Œ€์‹ ํ•˜๊ณ  sveltePreprocess({sourceMap: true}) ๋‹น์‹ ์˜ svelte.config.js , ๊ทธ๊ฒƒ์€ ์˜ฌ๋ฐ”๋ฅธ์—์„œ ๊ฒฝ๊ณ ๋ฅผ ๋ณด์—ฌ ์•Š์Šต๋‹ˆ๋‹ค ๊ทธ๋Ÿผ ์ค„?

@brunnerh ์ œ๊ฑฐํ•˜๋Š” ๊ฒฝ์šฐ "sourceMaps": true ๋‹น์‹ ์˜ ๊ธฐ๋ณธ ์„ค์ • ์ฐธ์กฐ tsconfig.json ํ•  ๋Œ€์‹ ํ•˜๊ณ  sveltePreprocess({sourceMap: true}) ๋‹น์‹ ์˜ svelte.config.js , ๊ทธ๊ฒƒ์€ ์˜ฌ๋ฐ”๋ฅธ์—์„œ ๊ฒฝ๊ณ ๋ฅผ ๋ณด์—ฌ ์•Š์Šต๋‹ˆ๋‹ค ๊ทธ๋Ÿผ ์ค„?

์•„๋‹ˆ์š”, ์•„์ง ๊บผ์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.

์ถ”๊ฐ€ ๊ฒฝ์šฐ์—๋งŒ ์ž‘๋™ ๊ทธ๋ž˜์„œ "sourceMaps": true ๋ฐ›๋Š” tsconfig.json ?

์˜ˆ

svelte-preprocess ๊ด€๋ จ ๋ฌธ์ œ์ด๋ฏ€๋กœ ์ข…๋ฃŒํ•ฉ๋‹ˆ๋‹ค. "sourceMap-option์„ ํ†ตํ•ด ์ „์ฒ˜๋ฆฌ๋ฅผ ์•Œ๋ ค์ค„ ๋•Œ ์†Œ์Šค ๋งต์ด ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค"๋ฌธ์ œ๊ฐ€ ์ตœ์‹  ๋ฒ„์ „์—์„œ ์ˆ˜์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค. " extends - tsconfig.json ์ด ์ง€์›๋˜์ง€ ์•Š์Œ"์€ https://github.com/sveltejs/svelte-preprocess/issues/300 ์—์„œ ์ถ”์ ๋ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰