πŸ€” νƒ€μž…μŠ€ν¬λ¦½νŠΈλŠ” μ™œ μ‚¬μš©ν• κΉŒ?

μ…”λ…ΈΒ·2022λ…„ 10μ›” 22일
0

🧐 νƒ€μž…μŠ€ν¬λ¦½νŠΈ(TypeScript)λž€?

TypeScript(νƒ€μž…μŠ€ν¬λ¦½νŠΈ)λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ— νƒ€μž…μ„ λΆ€μ—¬ν•œ μ–Έμ–΄μž…λ‹ˆλ‹€. "μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν™•μž₯된 μ–Έμ–΄" 라고 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. νƒ€μž…μŠ€ν¬λ¦½νŠΈλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ 달리 λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰ν•˜λ €λ©΄ νŒŒμΌμ„ ν•œλ²ˆ λ³€ν™˜ν•΄μ£Όμ–΄μ•Ό ν•©λ‹ˆλ‹€. 이 λ³€ν™˜ 과정을 μš°λ¦¬λŠ” 컴파일(complile) 이라고 λΆ€λ¦…λ‹ˆλ‹€.

그럼 νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό μ™œ μ¨μ•Όν• κΉŒμš”?

μžλ°”μŠ€ν¬λ¦½νŠΈλ„ μΆ©λΆ„νžˆ λ³΅μž‘ν•˜κ³  μ–΄λ €μš΄λ° μ™œ 또 λ‹€λ₯Έ μ–Έμ–΄λ₯Ό λ°°μ›Œμ•Ό ν• κΉŒμš”? 단지 μ΅œμ‹  κΈ°μˆ μ΄λΌμ„œ? ν˜Ήμ€ λ‹€λ₯Έ νšŒμ‚¬λ„ 많이 μ‚¬μš©ν•˜λ‹ˆκΉŒ μš°λ¦¬λ„ 써야 ν•˜λŠ” 걸까? λΌλŠ” 고민을 ν•˜κ²Œ λ©λ‹ˆλ‹€. νƒ€μž…μŠ€ν¬λ¦½νŠΈλŠ” μ•„λž˜ 2가지 κ΄€μ μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œμ˜ ν’ˆμ§ˆκ³Ό 개발 생산성을 높일 수 μžˆμŠ΅λ‹ˆλ‹€.

1. μ—λŸ¬μ˜ 사전 방지

  • νƒ€μž…μŠ€ν¬λ¦½νŠΈλŠ” μ—λŸ¬λ₯Ό 사전에 미리 μ˜ˆλ°©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜ 2개의 μ½”λ“œλ₯Ό λΉ„κ΅ν•˜μ—¬ μ–΄λ–»κ²Œ μ—λŸ¬λ₯Ό 사전에 방지할 수 μžˆλŠ”μ§€ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.
// math.js
function sum(a, b) {
  return a + b;
}
// math.ts
function sum(a: number, b: number) {
  return a + b;
}

두 μ½”λ“œ λͺ¨λ‘ 두 숫자의 합을 κ΅¬ν•˜λŠ” ν•¨μˆ˜ μ½”λ“œμž…λ‹ˆλ‹€. ν•˜λ‚˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ 그리고 λ‹€λ₯Έ ν•˜λ‚˜λŠ” νƒ€μž…μŠ€ν¬λ¦½νŠΈλ‘œ μž‘μ„±ν•˜μ˜€μ£ . 이 ν•¨μˆ˜λ₯Ό 가지고 μ‹€μ œ μ½”λ“œλ₯Ό μž‘μ„±ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

sum(10, 20); // 30
sum('10', '20'); // 1020

μžλ°”μŠ€ν¬λ¦½νŠΈμ— μ΅μˆ™ν•œ 뢄듀이라면 μœ„ μ½”λ“œμ˜ κ²°κ³Όκ°€ κ·Έλ ‡κ²Œ ν—·κ°ˆλ¦¬μ§„ μ•Šμ„ κ²λ‹ˆλ‹€. 숫자 λŒ€μ‹  λ¬Έμžμ—΄μ„ λ”ν•˜κΈ° λ•Œλ¬Έμ— 10 + 20 = 30이 μ•„λ‹Œ 1020μ΄λΌλŠ” κ²°κ³Όκ°€ λ‚˜νƒ€λ‚©λ‹ˆλ‹€.

이처럼 μ˜λ„ν•˜μ§€ μ•Šμ€ μ½”λ“œμ˜ λ™μž‘μ„ μ˜ˆλ°©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜μ™€ 같이 말이죠.

// math.ts
function sum(a: number, b: number) {
  return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 μ—†μŠ΅λ‹ˆλ‹€.

이 μ½”λ“œλ₯Ό VSCodeμ—μ„œ ν™•μΈν•˜λ©΄ λ‹€μŒκ³Ό 같은 였λ₯˜λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

2. μ½”λ“œ μžλ™ μ™„μ„±κ³Ό κ°€μ΄λ“œ

νƒ€μž…μŠ€ν¬λ¦½νŠΈμ˜ 또 λ‹€λ₯Έ μž₯점은 μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ 개발 툴의 κΈ°λŠ₯을 μ΅œλŒ€λ‘œ ν™œμš©ν•  수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. μš”μ¦˜μ— ν”„λŸ°νŠΈμ—”λ“œ κ°œλ°œμ„ ν•  λ•Œ κ°€μž₯ 많이 μ‚¬μš©λ˜λŠ” Visual Studio CodeλŠ” 툴의 λ‚΄λΆ€κ°€ νƒ€μž…μŠ€ν¬λ¦½νŠΈλ‘œ μž‘μ„±λ˜μ–΄ μžˆμ–΄ νƒ€μž…μŠ€ν¬λ¦½νŠΈ κ°œλ°œμ— μ΅œμ ν™” λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

개발자 κ΄€μ μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈμ— νƒ€μž…μ΄ λ”ν•΄μ‘Œμ„ λ•Œ μ–΄λ– ν•œ μž₯점이 μžˆλŠ”μ§€ μ‚΄νŽ΄λ³΄κΈ° μœ„ν•΄ μ•„λž˜ μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό λ³΄κ² μŠ΅λ‹ˆλ‹€.

// math.js
function sum(a, b) {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString();

μœ„ μ½”λ“œλŠ” μ•žμ—μ„œ μ‚΄νŽ΄λ΄€λ˜ sum() ν•¨μˆ˜λ₯Ό μ΄μš©ν•˜μ—¬ 두 숫자의 합을 κ΅¬ν•œ λ‹€μŒ toLocaleString()(νŠΉμ • μ–Έμ–΄μ˜ ν‘œν˜„ 방식에 맞게 숫자λ₯Ό ν‘œκΈ°ν•˜λŠ” API)λ₯Ό μ μš©ν•œ μ½”λ“œμž…λ‹ˆλ‹€. μ—¬κΈ°μ„œ toLocaleString()λΌλŠ” APIκ°€ μ–΄λ–€ 역할을 ν•˜λŠ”μ§€κ°€ μ€‘μš”ν•œκ²Œ μ•„λ‹ˆλΌ μœ„μ™€ 같이 μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ totalμ΄λΌλŠ” λ³€μˆ˜μ˜ νƒ€μž…μ΄ μ½”λ“œλ₯Ό μž‘μ„±ν•˜λŠ” μ‹œμ μ— number λΌλŠ” 것을 μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ μΈμ§€ν•˜μ§€ λͺ»ν•˜κ³  μžˆλŠ”κ²Œ μ€‘μš”ν•©λ‹ˆλ‹€.

달리 λ§ν•˜λ©΄, κ°œλ°œμžκ°€ 슀슀둜 sum() ν•¨μˆ˜μ˜ κ²°κ³Όλ₯Ό μ˜ˆμƒν•˜κ³  νƒ€μž…μ΄ number라고 κ°€μ •ν•œ μƒνƒœμ—μ„œ number의 API인 toLocaleString()λ₯Ό μ½”λ”©ν•˜κ²Œ λ˜λŠ” 것이죠. 이 과정을 보면 μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

μœ„μ—μ„œ λ³Ό 수 μžˆλ“―μ΄ totaμ΄λΌλŠ” 값이 μ •ν•΄μ Έ μžˆμ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μžλ°”μŠ€ν¬λ¦½νŠΈ Numberμ—μ„œ μ œκ³΅ν•˜λŠ” API인 toLocaleString()을 일일이 μž‘μ„±ν–ˆμŠ΅λ‹ˆλ‹€. λ§Œμ•½μ— μ˜€νƒˆμžλΌλ„ λ‚˜μ„œ toLocalString()이라고 ν–ˆλ‹€λ©΄ 이 math.js νŒŒμΌμ„ λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰ν–ˆμ„ λ•Œλ§Œ 였λ₯˜λ₯Ό 확인할 수 μžˆμ—ˆμ„ κ²λ‹ˆλ‹€.

그런데 λ§Œμ•½ μ•„λž˜μ™€ 같이 νƒ€μž…μŠ€ν¬λ¦½νŠΈλ‘œ μž‘μ„±ν•˜λ©΄ μ–΄λ–»κ²Œ λ κΉŒμš”?

function sum(a: number, b: number): number {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString();

λ³€μˆ˜ total에 λŒ€ν•œ νƒ€μž…μ΄ μ§€μ •λ˜μ–΄ 있기 λ•Œλ¬Έμ— VSCodeμ—μ„œ ν•΄λ‹Ή νƒ€μž…μ— λŒ€ν•œ APIλ₯Ό 미리 보기둜 λ„μ›Œμ€„ 수 있고 λ”°λΌμ„œ, APIλ₯Ό λ‹€ 일일이 μΉ˜λŠ” 것이 μ•„λ‹ˆλΌ tab으둜 λΉ λ₯΄κ³  μ •ν™•ν•˜κ²Œ μž‘μ„±ν•΄λ‚˜κ°ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.

profile
초보개발자

0개의 λŒ“κΈ€