๐Ÿซ[P.o.C] Typescript๊ฐ€ ํ•ญ์ƒ ์˜ณ์ง€๋Š” ์•Š๋‹ค.๐Ÿซ

Now.Meยท2022๋…„ 9์›” 12์ผ
0

piece-of-chocolate

๋ชฉ๋ก ๋ณด๊ธฐ
2/2
post-custom-banner

Javascript์™€ Typescript
์–ธ์ œ ์–ด๋–ค ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์„๊นŒ?

"์š”์ฆ˜ ๋Œ€์„ธ๋Š” ์—ญ์‹œ Typescript์ง€!" ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์ง€.
๊ทผ๋ฐ ์ด๊ฒŒ ํ•ญ์ƒ ์ •๋‹ต์ด ์•„๋‹ ์ˆ˜ ์žˆ๊ฒ ๋”๋ผ.

์ตœ๊ทผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 20๋…„์ฐจ ๊ฐœ๋ฐœ์ž์ฒ˜๋Ÿผ ์ฃผ์„๋‹ค๋Š” ๋ฒ• ์ด๋ผ๋Š” ์˜์ƒ์„ ๋ณด๋˜ ์ค‘ ๋งˆ์ง€๋ง‰ ๋ถ€๋ถ„์—์„œ Typescript๊ฐ€ ์•„๋‹Œ Javascript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ณณ์ด ์ƒ๊ฒจ๋‚˜๊ณ  ์žˆ๋‹ค๊ณ  ํ•˜๋”๋ผ๊ณ .

๐Ÿ’ŽTypescript

๐ŸŽฏTypescript ์žฅ์ 

1. TypeError๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

๋ง ๊ทธ๋Œ€๋กœ ํƒ€์ž…์ด ์ •์ (์ •ํ•ด์ ธ์žˆ๋‹ค)๋ผ๋Š” ๋œป์ด์•ผ. ์˜ˆ๋ฅผ ๋“ค์–ด์„œ ์•„๋ž˜์™€ ๊ฐ™์€ ํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ž.

function foo (a, b) {
  return a - b;
}

์ด๋•Œ foo๋งŒ ๋ดค์„ ๋•Œ, a์™€ b์— ์–ด๋–ค ํƒ€์ž…์˜ prameter๋ฅผ ๋„ฃ์–ด์•ผํ•˜๋Š”์ง€ ๋ชจ๋ฅด๋‹ˆ๊นŒ ๋‚ด๊ฐ€ ์›ํ•˜์ง€ ์•Š๋Š” ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ฌ ์ˆ˜ ์žˆ๊ฒ ์ง€?
๋งŒ์•ฝ a, b์— ์–ด๋–ค ํƒ€์ž…์˜ ๊ฐ’์„ ๋„ฃ์–ด์•ผํ•˜๋Š”์ง€ ์•Œ๊ฒŒ๋˜๋ฉด, ๊ทธ๋ฆฌ๊ณ  ๋งŒ์•ฝ ๋‹ค๋ฅธ ํƒ€์ž…์ด ๋“ค์–ด์™”์„ ๋•Œ ์ปดํŒŒ์ผ ์‹œ๊ธฐ์— ์—๋Ÿฌ๋ฅผ ๋„์–ด์ฃผ๋ฉด ๊ฐœ๋ฐœ์ž ์ž…์žฅ์—์„œ ์‹ค์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๊ฒ ์ง€?

๐Ÿ’ŽJavascript

๐ŸŽฏJavascript ์žฅ์ 

1. Typescript๋ณด๋‹ค Type์— ์žˆ์–ด ์ž์œ ๋กญ๋‹ค.

๋ถ„๋ช… type์„ ๊ฐ•์ œํ•˜๋Š”๊ฒŒ typescript์˜ ์žฅ์ ์ด์—ˆ์ง€? ํ•˜์ง€๋งŒ ๋ณ€๊ฒฝ์ด ๋งŽ์€ ์ดˆ๊ธฐ ๊ฐœ๋ฐœ ๋‹จ๊ณ„์—์„œ๋Š” ์–ด๋–จ๊นŒ?
api ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ function์˜ parameter ๋“ฑ๋“ฑ. ๊ทธ๋•Œ๋งˆ๋‹ค ๊ฐ๊ฐ์˜ type๊นŒ์ง€ ๊ณ ๋ ค ๋ฐ ์ˆ˜์ •ํ•ด์•ผํ•˜๋ฉด ์ผ์ด 2๋ฐฐ๊ฐ€ ๋˜๊ฒ ์ง€? ๊ทธ๋ž˜์„œ Typescript๋ณด๋‹ค ์ž์œ ๋กœ์šด Javascript๊ฐ€ ์ดˆ๊ธฐ์—๋Š” ์ข‹์„ ์ˆ˜ ์žˆ์–ด.

2. Typescript๋Š” ๊ฒฐ๊ตญ Javascript๋กœ ๋ณ€ํ™˜ํ•ด์•ผํ•œ๋‹ค.

Typescript๋กœ ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด ์ด ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ Javascript๋กœ ๋ณ€ํ™˜ํ•œ ๋’ค, Javascript๋ฅผ ๋‹ค์‹œ Bytecode๋กœ ๋ณ€ํ™˜ํ•ด ์ฝ”๋“œ๋ฅผ ํ•ด์„ํ•˜๊ฒŒ ๋ผ. ์ด๋•Œ Typescript๋ฅผ Javascript๋กœ ๋ณ€ํ™˜ํ•  ๋•Œ ์ฝ”๋“œ๊ฐ€ ๊ฐœํŒ์ผ ์ˆ˜ ์žˆ๊ณ  ์ฝ”๋“œ์–‘์ด ์ฆ๊ฐ€ํ•  ์ˆ˜ ์žˆ์–ด.

๐Ÿ’Ž๊ฒฐ๋ก 

๊ฒฐ๋ก ์€ ๊ฐœ๋ฐœ ์ดˆ๊ธฐ์—๋Š” Javascript๊ฐ€ ์ข‹์„ ์ˆ˜ ์žˆ์–ด.
ํ•˜์ง€๋งŒ ์ดํ›„ ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์ง€๊ณ  ํ”„๋กœ์ ํŠธ์— ๊ฐ€๋‹ดํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์ด ๋งŽ์•„์งˆ์ˆ˜๋ก ์‹ค์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋Š” Typescript๊ฐ€ ์ข‹์€๊ฑฐ์ง€.
๊ทธ๋ž˜์„œ ๊ฐœ๋ฐœ ์ดˆ๋ฐ˜์—๋Š” javascript๋ฅผ ์“ฐ๊ณ , ๋‚˜์ค‘์— ๊ฐœ๋ฐœ์ด ๋งˆ๋ฌด๋ฆฌ๊ฐ€ ๋˜๋ฉด Typescript๋กœ ๋Œ์•„๊ฐ€๋Š” ๊ฐœ๋ฐœ์ž๋„ ์žˆ๋Œ€.

๐Ÿ’ŽIn My Case

ํ˜„์žฌ ๋‚ด๊ฐ€ ๋งก๊ณ ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋„ ์•„๋ฌด๊ฒƒ๋„ ์—†์„ ๋ฌด(็„ก)์—์„œ ์‹œ์ž‘ํ–ˆ์–ด.
์ดˆ๋ฐ˜์—๋Š” ๋‹น์—ฐํžˆ Typescript๊ฐ€ ์ข‹์•„๋ณด์—ฌ์„œ Typescript๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ์ง€. ์ง€๊ธˆ๋„ Typescript๋กœ ์งœ๊ณ  ์žˆ๊ณ .

๊ทผ๋ฐ Javascript ์“ฐ๋Š” ์ฒซ๋ฒˆ์งธ ์ด์œ ๊ฐ€ ๋„ˆ๋ฌด ์™€๋‹ฟ๋Š”๊ฑฐ์•ผ.
api ์ŠคํŽ™์€ ์ž์ฃผ ๋ฐ”๋€Œ๊ณ  ์ถ”๊ฐ€๋˜๋Š”๋ฐ ๊ทธ๋•Œ๋งˆ๋‹ค ์ธํ„ฐํŽ˜์ด์Šค ์ˆ˜์ •ํ•ด์ค˜์•ผํ•˜๋Š”๋ฐ ์ด๊ฒŒ ์€๊ทผ ๊ท€์ฐฎ๊ฑฐ๋“ .

๊ทธ๋ž˜๋„ ๋‚ด ๊ฒฝ์šฐ์—๋Š” ๋ฐฑ์—”๋“œ ๋ฐ์ดํ„ฐ ์„ค๊ณ„๋„ ๋ชจ๋‘ ํŒŒ์•…ํ•˜๊ณ  ์žˆ๊ณ  api ์ŠคํŽ™๋„ ์ง์ ‘ ์ •ํ•˜๊ณ  ์žˆ์–ด์„œ ์ƒ๊ฐ๋ณด๋‹ค ๋ณ€๊ฒฝ์ด ๋งŽ์ด ์ผ์–ด๋‚˜์ง€๋„ ์•Š์•„. ๊ทธ๋ž˜์„œ ๋‚ด ์ƒํ™ฉ์—์„œ๋Š” Typescript๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ๋” ํŽธํ•˜๋”๋ผ๊ณ .

Typescript๋ฅผ ์‚ฌ์šฉํ• ์ง€ Javascript๋ฅผ ์‚ฌ์šฉํ• ์ง€๋Š” ํ”„๋กœ์ ํŠธ์˜ ํŠน์„ฑ๋งˆ๋‹ค ๋‹ฌ๋ผ์ง€๋Š” ๊ฒƒ ๊ฐ™์•„.

๐Ÿ™์ฐธ๊ณ  ์‚ฌ์ดํŠธ

โ–ถ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 20๋…„์ฐจ ๊ฐœ๋ฐœ์ž์ฒ˜๋Ÿผ ์ฃผ์„๋‹ค๋Š” ๋ฒ•
https://youtu.be/ORmnc-hLrYs

profile
Hi :) Future me
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€