[TECH-QA] ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ฐ˜์˜ ์–ธ์ด์ด๋ฉฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ƒ์œ„ํ™•์ •์ „์ž…๋‹ˆ๋‹ค. ์ •์ ํƒ€์ž…์œผ๋กœ ์ปดํŒŒ์ผ ๋‹จ๊ณ„์—์„œ ์˜ค๋ฅ˜๋ฅผ ํฌ์ฐฉํ• ์ˆ˜ ์žˆ๋Š” ์žฅ์ ์ด ์žˆ๊ณ  ๊ฐ•๋ ฅํ•œ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํŠน์ง•

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ€์žฅ ํฐ ํŠน์ง•์€ ์ •์  ํƒ€์ž… ์‹œ์Šคํ…œ์„ ๋„์ž…ํ–ˆ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค.
    ์ด๋Š” ๋ณ€์ˆ˜, ํ•จ์ˆ˜, ๊ฐ์ฒด ๋“ฑ์˜ ํƒ€์ž…์„ ์ฝ”๋“œ ์ž‘์„ฑ ๋‹จ๊ณ„์—์„œ ๋ช…์‹œ์ ์œผ๋กœ ์ •์˜ํ•ด ์ค๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์ •์˜๋œ ํƒ€์ž…์€ ์ปดํŒŒ์ผ ๋‹จ๊ณ„์—์„œ ์˜ค๋ฅ˜๋ฅผ ํฌ์ฐฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋ฉฐ, ๋Ÿฐํƒ€์ž„์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ์ž ์žฌ์ ์ธ ๋ฒ„๊ทธ๋ฅผ ์‚ฌ์ „์— ์ค„์ด๋Š” ๋ฐ ํฐ ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐ•๋ ฅํ•œ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
    ํด๋ž˜์Šค(Class), ์ธํ„ฐํŽ˜์ด์Šค(Interface), ์ œ๋„ค๋ฆญ(Generics), ๋ชจ๋“ˆ(Module)๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์—ฌ ๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ์‹œ ์ฝ”๋“œ์˜ ๊ตฌ์กฐ๋ฅผ ๋” ์ฒด๊ณ„์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.
    ์˜ˆ๋ฅผ ๋“ค์–ด, ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ์ฒด์˜ ๊ตฌ์กฐ๋ฅผ ๋ช…ํ™•ํžˆ ์ •์˜ํ•  ์ˆ˜ ์žˆ๊ณ , ์ œ๋„ค๋ฆญ์„ ํ†ตํ•ด ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋ฉด์„œ๋„ ํƒ€์ž… ์•ˆ์ „์„ฑ์„ ๋ณด์žฅํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ES6(ECMAScript 2015) ๋ฐ ๊ทธ ์ดํ›„์˜ ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋Šฅ์„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ๋ฐ”๋ฒจ(Babel)๊ณผ ๊ฐ™์€ ๋ณ„๋„์˜ ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š” ์—†์ด, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ž์ฒด์ ์œผ๋กœ ์ตœ์‹  ECMAScript ๋ฌธ๋ฒ•์„ ๊ธฐ์กด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์—์„œ ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•ด์ค๋‹ˆ๋‹ค. ์ด๋Š” ๊ฐœ๋ฐœ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๊ณ  ์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๋Š” ๋ฐ ๊ธฐ์—ฌํ•ฉ๋‹ˆ๋‹ค.

  • ๋ช…์‹œ์ ์ธ ์ •์  ํƒ€์ž… ์ง€์ •์€ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ค๋ฉฐ, ํŠนํžˆ ํ˜‘์—… ํ™˜๊ฒฝ์—์„œ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์œ ์ง€๋ณด์ˆ˜ํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค๋‹ˆ๋‹ค.
    ์˜ˆ๋ฅผ ๋“ค์–ด, ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋‚˜ ๋ฐ˜ํ™˜๊ฐ’์— ํƒ€์ž…์„ ๋ช…์‹œํ•˜๋ฉด ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š”์ง€ ๋ฐ”๋กœ ์•Œ ์ˆ˜ ์žˆ์–ด ๋””๋ฒ„๊น… ๊ณผ์ •๋„ ํ›จ์”ฌ ์ˆ˜์›”ํ•ด์ง‘๋‹ˆ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ํƒ€์ž… ์ถ”๋ก (Type Inference) ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์—ฌ, ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ชจ๋“  ํƒ€์ž…์„ ์ง์ ‘ ๋ช…์‹œํ•˜์ง€ ์•Š๋”๋ผ๋„ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ๋ฌธ๋งฅ์„ ํ†ตํ•ด ํƒ€์ž…์„ ์ž๋™์œผ๋กœ ์ถ”๋ก ํ•˜๊ฒŒ ํ•จ์œผ๋กœ์จ ํŽธ๋ฆฌํ•จ๊ณผ ์•ˆ์ „์„ฑ์„ ๋™์‹œ์— ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

ํƒ€์ž…์ถ”๋ก ์ด๋ž€?
๋ณ€์ˆ˜ ์„ ์–ธ์—์„œ์˜ ํƒ€์ž… ์ถ”๋ก : ๋ณ€์ˆ˜๋ฅผ ์ดˆ๊ธฐํ™”ํ•  ๋•Œ ๊ฐ’์„ ํ• ๋‹นํ•˜๋ฉด, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ํ•ด๋‹น ๊ฐ’์˜ ํƒ€์ž…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ณ€์ˆ˜์˜ ํƒ€์ž…์„ ์ถ”๋ก ํ•ฉ๋‹ˆ๋‹ค.
ํ•จ์ˆ˜ ๋ฐ˜ํ™˜ ํƒ€์ž… ์ถ”๋ก :ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ๋ช…์‹œ์ ์œผ๋กœ ํƒ€์ž…์œผ๋กœ ์„ ์–ธํ•˜์ง€ ์•Š์•„๋„, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ ๋กœ์ง์„ ๋ถ„์„ํ•ด ๋ฐ˜ํ™˜ ํƒ€์ž…์„ ์ถ”๋ก ํ•ฉ๋‹ˆ๋‹ค.
๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์—์„œ์˜ ํƒ€์ž… ์ถ”๋ก :๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ๊ฐ ์†์„ฑ์˜ ํƒ€์ž…์„ ๋ช…์‹œํ•˜์ง€ ์•Š์•„๋„, ์ดˆ๊ธฐํ™”๋œ ๊ฐ’์— ๋”ฐ๋ผ ํƒ€์ž…์ด ์ถ”๋ก ๋ฉ๋‹ˆ๋‹ค.

์ถ”๊ฐ€์ ์œผ๋กœ, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ๋ฐฉ๋Œ€ํ•œ ์ƒํƒœ๊ณ„๋ฅผ ์ž๋ž‘ํ•ฉ๋‹ˆ๋‹ค. ํƒ€์ž… ์ •์˜ ํŒŒ์ผ(.d.ts)์„ ํ†ตํ•ด ๊ธฐ์กด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(์˜ˆ: React, Lodash ๋“ฑ)์™€์˜ ํ†ตํ•ฉ์ด ์šฉ์ดํ•˜๋ฉฐ, ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ œ๊ณตํ•˜๋Š” DefinitelyTyped ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ์ˆ˜๋งŽ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ํƒ€์ž… ์ •์˜๋ฅผ ์‰ฝ๊ฒŒ ๊ฐ€์ ธ์™€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋ก ํŠธ์—”๋“œ(React, Angular, Vue.js)์™€ ๋ฐฑ์—”๋“œ(Node.js) ๊ฐœ๋ฐœ ๋ชจ๋‘์—์„œ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋ฉฐ, ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ์—์„œ ํ•„์ˆ˜์ ์ธ ๋„๊ตฌ๋กœ ์ž๋ฆฌ ์žก์•˜์Šต๋‹ˆ๋‹ค. ๊ฒฐ๋ก ์ ์œผ๋กœ, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์œ ์—ฐ์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ์ •์  ํƒ€์ž…์˜ ์•ˆ์ •์„ฑ๊ณผ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๊ฐ•๋ ฅํ•จ์„ ๋”ํ•œ ์–ธ์–ด๋กœ, ์ฝ”๋“œ ํ’ˆ์งˆ์„ ๋†’์ด๊ณ  ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋ ค๋Š” ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ์ด์ƒ์ ์ธ ์„ ํƒ์ž…๋‹ˆ๋‹ค.