• ABOUT
  • POSTS
  • GUESTBOOK

ยฉ 2025 BlueCool12 All rights reserved.

2026.01.21TypeScript

๐Ÿ“˜ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

0. TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

TypeScript๋ฅผ ๊ณต๋ถ€ํ•˜๊ธฐ ์ „์— ๋จผ์ € ํ•œ ๊ฐ€์ง€ ์งˆ๋ฌธ์„ ๋˜์ ธ๋ณผ ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

JavaScript๋กœ๋„ ์ž˜ ๋™์ž‘ํ•˜๋Š”๋ฐ ์™œ ๊ตณ์ด TypeScript๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ?

์ด ๊ธ€์—์„œ๋Š” ๋ณธ๊ฒฉ์ ์œผ๋กœ TypeScript ๋ฌธ๋ฒ•์„ ๋‹ค๋ฃจ๊ธฐ ์ „์— TypeScript๊ฐ€ ๋ฌด์—‡์ธ์ง€, ๊ทธ๋ฆฌ๊ณ  ์–ด๋–ค ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ–ˆ๋Š”์ง€๋ฅผ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

TypeScript๋ฅผ ๋‹จ์ˆœํ•œ ๋ฌธ๋ฒ•์ด ์•„๋‹Œ, ๋ฌด์—‡์„ ์œ„ํ•œ ๋„๊ตฌ์ธ์ง€ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์ด๋‹ค.


1. TypeScript๋ž€ ๋ฌด์—‡์ธ๊ฐ€?

TypeScript๋Š” JavaScript์— ํƒ€์ž…(Type) ์‹œ์Šคํ…œ์„ ์ถ”๊ฐ€ํ•œ ์–ธ์–ด์ด๋‹ค. JavaScript์˜ ์ƒ์œ„ ์ง‘ํ•ฉ(Superset)์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ์กด JavaScript ๋ฌธ๋ฒ•์„ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

TypeScript์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ์ •์  ํƒ€์ž… ๊ฒ€์‚ฌ(Static Type Checking)๋ฅผ ์ œ๊ณตํ•œ๋‹ค๋Š” ์ ์ด๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ปดํŒŒ์ผ ์‹œ์ ์— ์˜ค๋ฅ˜๋ฅผ ๋ฏธ๋ฆฌ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ์‚ฌ์‹ค์ด ์žˆ๋Š”๋ฐ TypeScript ์ฝ”๋“œ๋Š” ๊ฒฐ๊ตญ JavaScript๋กœ ์ปดํŒŒ์ผ๋˜์–ด ์‹คํ–‰๋œ๋‹ค๋Š” ์ ์ด๋‹ค. Node.js๋‚˜ ๋ธŒ๋ผ์šฐ์ €๋Š” TypeScript๋ฅผ ์ง์ ‘ ์‹คํ–‰ํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋”ฐ๋ผ์„œ TypeScript๋Š” ์‹คํ–‰ ํ™˜๊ฒฝ์ด ์•„๋‹ˆ๋ผ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ์•ˆ์ •์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•œ ๋„๊ตฌ์— ๊ฐ€๊น๋‹ค.


2. JavaScript์™€ TypeScript์˜ ์ฐจ์ด

JavaScript์˜ ๋Œ€ํ‘œ์ ์ธ ํŠน์ง•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • ๋™์  ํƒ€์ž… (Dynamic Typing)
  • ๋Ÿฐํƒ€์ž„์— ํƒ€์ž…์ด ๊ฒฐ์ •๋จ
  • ์œ ์—ฐํ•˜์ง€๋งŒ ์‹ค์ˆ˜์— ์ทจ์•ฝํ•จ
function add(a, b) {
return a + b;
}

add(1, "2"); // ๋ฌธ์ž์—ด ์—ฐ์‚ฐ "12"

์œ„ ์ฝ”๋“œ๋Š” ์—๋Ÿฌ ์—†์ด ์‹คํ–‰๋˜์ง€๋งŒ ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜๋„ํ•œ ๊ฒฐ๊ณผ๊ฐ€ ์•„๋‹ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’๋‹ค.

TypeScript์˜ ์ ‘๊ทผ ๋ฐฉ์‹

function add(a: number, b: number): number {
return a + b;
}

add(1, "2"); // ์ปดํŒŒ์ผ ์—๋Ÿฌ ๋ฐœ์ƒ

TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์‹คํ–‰ ์ „์— ์ด๋ฏธ ํƒ€์ž… ์˜ค๋ฅ˜๋ฅผ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ๋‹ค.

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

3. TypeScript๊ฐ€ ํ•ด๊ฒฐํ•˜๋ ค๋Š” ๋ฌธ์ œ

1. ์‹ค์ˆ˜๋ฅผ ๋น ๋ฅด๊ฒŒ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ๋‹ค
JavaScript์—์„œ๋Š” ์—๋Ÿฌ๊ฐ€ ๋Œ€๋ถ€๋ถ„ ์‹คํ–‰ ์‹œ์ (๋Ÿฐํƒ€์ž„)์— ๋“œ๋Ÿฌ๋‚œ๋‹ค. ๋ฐ˜๋ฉด TypeScript๋Š” ์œ„์—์„œ ํ™•์ธํ–ˆ๋“ฏ์ด ์ปดํŒŒ์ผ ์‹œ์ , ์ฆ‰ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ฑฐ๋‚˜ ํŒŒ์ผ์„ ์ €์žฅํ•˜๋Š” ์ˆœ๊ฐ„ ํ˜น์€ CI ๋นŒ๋“œ ๋‹จ๊ณ„์—์„œ ๋ฌธ์ œ๋ฅผ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ์–ด ๋ฐฐํฌ ์ „์— ์˜ค๋ฅ˜๋ฅผ ์ฐจ๋‹จํ•  ์ˆ˜ ์žˆ๋‹ค.

2. ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์ด ์ข‹์•„์ง„๋‹ค
JavaScript์˜ ๊ฒฝ์šฐ ์ฝ”๋“œ๊ฐ€ ์ปค์งˆ์ˆ˜๋ก ํ•จ์ˆ˜์˜ ์ž…๋ ฅ๊ฐ’์ด๋‚˜ ๋ฐ˜ํ™˜๊ฐ’์ด ๋ฌด์—‡์ธ์ง€ ํŒŒ์•…ํ•˜๊ธฐ ์–ด๋ ค์›Œ์ง„๋‹ค.

function process(data) {
// data๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ๊ธฐ ์–ด๋ ต๋‹ค
}

๋ฐ˜๋ฉด TypeScript์—์„œ๋Š” ํƒ€์ž…์„ ๋ช…์‹œํ•จ์œผ๋กœ์จ ์ฝ”๋“œ ์ž์ฒด๊ฐ€ ๋ฌธ์„œ ์—ญํ• ์„ ํ•˜๊ฒŒ ๋œ๋‹ค.

function process(data: UserResponse): void {
// data๋Š” UserResponse ํƒ€์ž…
}


3. ํ˜‘์—… ์‹œ ์•”๋ฌต์ ์ธ ๊ทœ์น™์„ ์ฝ”๋“œ๋กœ ๊ฐ•์ œํ•  ์ˆ˜ ์žˆ๋‹ค
์–ด๋–ค ๊ฐ’์ด null์ด ๋  ์ˆ˜ ์žˆ๋Š”์ง€, ์–ด๋–ค ํ•„๋“œ๋Š” ๋ฐ˜๋“œ์‹œ ์กด์žฌํ•ด์•ผ ํ•˜๋Š”์ง€, ์–ด๋–ค ํ˜•ํƒœ์˜ ๊ฐ์ฒด๊ฐ€ ์˜ค๊ฐ€๋Š”์ง€ ๋“ฑ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋Ÿฐ ๊ตฌ๋‘ ์•ฝ์†์„ ํƒ€์ž…์œผ๋กœ ๊ฐ•์ œํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋Š” ํ˜‘์—… ๊ณผ์ •์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์˜คํ•ด์™€ ๋ฒ„๊ทธ๋ฅผ ํฌ๊ฒŒ ์ค„์—ฌ์ค€๋‹ค.

4. TypeScript๊ฐ€ ํ•ด๊ฒฐํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒƒ

*TypeScript๋Š” ๋Ÿฐํƒ€์ž„ ์‹œ์ ์˜ ๋ฐ์ดํ„ฐ ๊ฒ€์ฆ์„ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๋Š”๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด API ์„œ๋ฒ„๊ฐ€ ์ž˜๋ชป๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๋‚ด๋ ค์ฃผ๋Š” ๊ฒฝ์šฐ, ์™ธ๋ถ€ ์ž…๋ ฅ ๊ฐ’์ด ์˜ˆ์ƒ๊ณผ ๋‹ค๋ฅธ ๊ฒฝ์šฐ ๋“ฑ ์ด๋Ÿฐ ๋ฌธ์ œ๋Š” TypeScript๋งŒ์œผ๋กœ๋Š” ํ•ด๊ฒฐํ•  ์ˆ˜ ์—†๋‹ค.

TypeScript๋Š” ์ฝ”๋“œ์˜ ํ˜•ํƒœ๋ฅผ ๋ณด์žฅํ•  ๋ฟ ์‹ค์ œ ๋ฐ์ดํ„ฐ์˜ ์ง„์‹ค์„ฑ์€ ๋ณด์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ž˜์„œ ์‹ค๋ฌด์—์„œ๋Š” ์ข…์ข… zod, joi, yup ๊ฐ™์€ ๋Ÿฐํƒ€์ž„ ๊ฒ€์ฆ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค.

TypeScript๋Š” JavaScript๋ฅผ ๋Œ€์ฒดํ•˜๊ธฐ ์œ„ํ•œ ์–ธ์–ด๋ผ๊ธฐ๋ณด๋‹ค JavaScript๋ฅผ ๋” ์•ˆ์ „ํ•˜๊ณ  ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๋„๊ตฌ์ด๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— TypeScript๋ฅผ ๊ณต๋ถ€ํ•œ๋‹ค๋Š” ๊ฒƒ์€ ์ƒˆ๋กœ์šด ์–ธ์–ด๋ฅผ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ JavaScript๋ฅผ ๋” ์ž˜ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ตํžˆ๋Š” ๊ณผ์ •์— ๊ฐ€๊น๋‹ค.

์ด์ „ ๊ธ€
๐Ÿž NestJS ์ฆ๋ถ„ ๋นŒ๋“œ ๋ฉ”์ปค๋‹ˆ์ฆ˜ ์ดํ•ด์™€ ์บ์‹œ ์ด์Šˆ ์ •๋ฆฌ
๋‹ค์Œ ๊ธ€
๐ŸŒณ ๋น„์„ ํ˜• ์ž๋ฃŒ๊ตฌ์กฐ์˜ ํ•ต์‹ฌ - ํŠธ๋ฆฌ(Tree) ๊ตฌ์กฐ ์™„์ „ ์ •๋ณต
์žฅ์‹์šฉ ๋กœ๊ณ