TypeScript์ JavaScript์ ์ฃผ์ ์ฐจ์ด์ , ์ฅ๋จ์ , ๊ทธ๋ฆฌ๊ณ ๊ฐ ์ธ์ด๋ฅผ ํ๋ก์ ํธ์ ์ธ์ ์ ํํด์ผ ํ๋์ง์ ๋ํ ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค.
TypeScript vs JavaScript: ์ด๋ค ๊ฒ์ ์ ํํด์ผ ํ ๊น?
JavaScript๋ ์ค๋ซ๋์ ์น ๊ฐ๋ฐ์ undisputed ์์ด์์ผ๋ฉฐ, ๊ฐ๋จํ ์ธํฐ๋ํฐ๋ธ ์์๋ถํฐ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ชจ๋ ๊ฒ์ ๊ตฌ๋ํ์ต๋๋ค. ํ์ง๋ง ํ๋ก์ ํธ์ ๊ท๋ชจ์ ๋ณต์ก์ฑ์ด ์ปค์ง๋ฉด์ JavaScript์ ๋์ ํ์ (dynamically typed) ํน์ฑ์ ํ๊ณ๊ฐ ๋์ฑ ๋ช ํํด์ก์ต๋๋ค. ์ด๋ฌํ ํ๊ณ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋ฑ์ฅํ ๊ฒ์ด ๋ฐ๋ก TypeScript์ ๋๋ค. TypeScript๋ JavaScript์ ์ ์ ํ์ (statically typed) ์์ ์งํฉ์ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด๋ค ์ธ์ด๊ฐ ๋น์ ์ ํ๋ก์ ํธ์ ์ ํฉํ ๊น์? ์ด ์ข ํฉ ๊ฐ์ด๋๋ TypeScript์ JavaScript์ ์ฃผ์ ์ฐจ์ด์ ์ ๊น์ด ํ๊ณ ๋ค์ด, ๊ฐ๊ฐ์ ์ฅ๋จ์ ์ ํ๊ตฌํ๊ณ , ์ธ์ ๊ฐ ์ธ์ด๋ฅผ ์ ํํด์ผ ํ๋์ง์ ๋ํ ์ค์ฉ์ ์ธ ์ง์นจ์ ์ ๊ณตํ ๊ฒ์ ๋๋ค.
๊ธฐ๋ณธ ์ดํดํ๊ธฐ
JavaScript: ๋์ ์ธ ํ์ค
JavaScript๋ ์ฃผ๋ก ํ๋ก ํธ์๋ ์น ๊ฐ๋ฐ์ ์ฌ์ฉ๋๋ ๋์ ํ์ ์ ์ธํฐํ๋ฆฌํฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋๋ค. ์ ์ฐ์ฑ๊ณผ ์ฌ์ฉ ํธ์์ฑ ๋๋ถ์ ์์ฒญ๋ ์ธ๊ธฐ๋ฅผ ์ป์์ง๋ง, ๋์ ์ธ ํน์ฑ์ผ๋ก ์ธํด ํนํ ๋๊ท๋ชจ ์ฝ๋๋ฒ ์ด์ค์์ ๋๋ฒ๊ทธํ๊ธฐ ์ด๋ ค์ด ๋ฐํ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. JavaScript๋ ์ธ์ด์ ๊ธฐ๋ฅ๊ณผ ๊ตฌ๋ฌธ์ ์ ์ํ๋ ECMAScript ํ์ค์ ๊ธฐ๋ฐ์ผ๋ก ํฉ๋๋ค.
JavaScript์ ์ฃผ์ ํน์ง:
- ๋์ ํ์ : ๋ณ์ ํ์ ์ ๋ฐํ์์ ๊ฒ์ฌ๋๋ฏ๋ก, ์ฝ๋๊ฐ ์คํ๋ ๋๊น์ง ์ค๋ฅ๊ฐ ๋ฐ๊ฒฌ๋์ง ์์ ์ ์์ต๋๋ค.
- ์ธํฐํ๋ฆฌํฐ ์ธ์ด: ์ปดํ์ผ ๊ณผ์ ์์ด ์ฝ๋๊ฐ ํ ์ค์ฉ ์คํ๋ฉ๋๋ค.
- ์ ์ฐํจ: ๋์ ์ ์ฐ์ฑ์ ์ ๊ณตํ๋ฉฐ ๋น ๋ฅธ ํ๋กํ ํ์ดํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ํญ๋์ ์ง์: ์ฌ์ค์ ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ์ ํธํ๋๋ฉฐ, ๋ฐฉ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ํ๋ ์์ํฌ ์ํ๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
TypeScript: JavaScript์ ์ ์ ํ์ ์ถ๊ฐํ๊ธฐ
TypeScript๋ JavaScript์ ์์ ์งํฉ์ผ๋ก, ์ธ์ด์ ์ ์ ํ์ , ํด๋์ค, ์ธํฐํ์ด์ค๋ฅผ ์ถ๊ฐํฉ๋๋ค. ์ผ๋ฐ JavaScript๋ก ์ปดํ์ผ๋๋ฏ๋ก JavaScript๋ฅผ ์ง์ํ๋ ๋ชจ๋ ํ๊ฒฝ๊ณผ ํธํ๋ฉ๋๋ค. TypeScript๋ ์ฝ๋ ์ ์ง๋ณด์์ฑ, ํ์ฅ์ฑ์ ๊ฐ์ ํ๊ณ ๋ฐํ์ ์ค๋ฅ์ ์ํ์ ์ค์ด๋ ๊ฒ์ ๋ชฉํ๋ก ํฉ๋๋ค. TypeScript๋ฅผ ๋ ์๊ฒฉํ๊ณ ์ฒด๊ณ์ ์ธ ๋ฒ์ ์ JavaScript๋ผ๊ณ ์๊ฐํ ์ ์์ต๋๋ค.
TypeScript์ ์ฃผ์ ํน์ง:
- ์ ์ ํ์ : ๋ณ์ ํ์ ์ ์ปดํ์ผ ์์ ์ ๊ฒ์ฌ๋์ด ๋ฐํ์ ์ด์ ์ ์ค๋ฅ๋ฅผ ์ก์๋ ๋๋ค.
- JavaScript์ ์์ ์งํฉ: ์ ํจํ ๋ชจ๋ JavaScript ์ฝ๋๋ ์ ํจํ TypeScript ์ฝ๋์ด๊ธฐ๋ ํฉ๋๋ค.
- ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ(OOP) ์ง์: ํด๋์ค, ์ธํฐํ์ด์ค, ์์๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- ํฅ์๋ ์ฝ๋ ์ ์ง๋ณด์์ฑ: ์ ์ ํ์ ๊ณผ OOP ๊ธฐ๋ฅ์ ์ฝ๋ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํต๋๋ค.
- ์ ์ง์ ๋์ ๊ฐ๋ฅ: ๊ธฐ์กด JavaScript ํ๋ก์ ํธ์ ์ ์ง์ ์ผ๋ก ํตํฉ๋ ์ ์์ต๋๋ค.
TypeScript์ JavaScript์ ์ฃผ์ ์ฐจ์ด์
1. ํ์ ์์คํ
TypeScript์ JavaScript์ ๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ TypeScript์ ์ ์ ํ์ ์์คํ ์ด ์กด์ฌํ๋ค๋ ๊ฒ์ ๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ๋ฐ์๋ ๋ณ์, ํจ์ ๋งค๊ฐ๋ณ์ ๋ฐ ๋ฐํ ๊ฐ์ ํ์ ์ ์ ์ํ ์ ์์ต๋๋ค. JavaScript๋ ๋ฐํ์์ ํ์ ์ ์ถ๋ก ํ๋ ๋ฐ๋ฉด, TypeScript๋ ์ปดํ์ผ ์ค์ ํ์ ์ ํ์ธํ์ฌ ์ ์ฌ์ ์ธ ์ค๋ฅ๊ฐ ํ๋ก๋์ ์ ๋๋ฌํ๊ธฐ ์ ์ ์ก์๋ ๋๋ค.
์์ (TypeScript):
function greet(name: string): string {
return "Hello, " + name;
}
let user: string = "Alice";
console.log(greet(user)); // Output: Hello, Alice
์ด ์์์์, ์ฐ๋ฆฌ๋ `name` ๋งค๊ฐ๋ณ์์ ํ์ ์ `string`์ผ๋ก, `greet` ํจ์์ ๋ฐํ ํ์ ์ `string`์ผ๋ก ๋ช ์์ ์ผ๋ก ์ ์ํ์ต๋๋ค. TypeScript๋ `greet` ํจ์์ ์ซ์๋ ๋ฌธ์์ด์ด ์๋ ๋ค๋ฅธ ํ์ ์ ์ ๋ฌํ๋ ค๊ณ ํ๋ฉด ์ค๋ฅ๋ฅผ ๋ฐ์์ํฌ ๊ฒ์ ๋๋ค.
์์ (JavaScript):
function greet(name) {
return "Hello, " + name;
}
let user = "Alice";
console.log(greet(user)); // Output: Hello, Alice
JavaScript์์๋ `name` ๋งค๊ฐ๋ณ์์ ํ์ ์ด ๋ช ์์ ์ผ๋ก ์ ์๋์ง ์์ต๋๋ค. ๋ง์ฝ ์ค์๋ก `greet` ํจ์์ ์ซ์๋ฅผ ์ ๋ฌํ๋๋ผ๋, ์ฝ๋๋ ์ฌ์ ํ ์คํ๋์ด ์๊ธฐ์น ์์ ๊ฒฐ๊ณผ๋ฅผ ์ด๋ํ ์ ์์ต๋๋ค. ์ด๋ ์คํ ์ ์ ์ค๋ฅ๋ฅผ ์ก์๋ด๋ TypeScript๋ณด๋ค ์์ ์ฑ์ด ๋จ์ด์ง๋๋ค.
2. ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ (OOP)
JavaScript๊ฐ ํ๋กํ ํ์ ์ ํตํด OOP ๊ฐ๋ ์ ์ง์ํ๋ ๋ฐ๋ฉด, TypeScript๋ ํด๋์ค, ์ธํฐํ์ด์ค, ์์ ๋ฐ ์ ๊ทผ ์ ์ด์(public, private, protected)๋ฅผ ํตํด ๋์ฑ ๊ฒฌ๊ณ ํ๊ณ ์น์ํ OOP ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๋๊ท๋ชจ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๊ตฌ์กฐํํ๊ณ ์กฐ์งํํ๋ ๊ฒ์ ๋ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
์์ (TypeScript):
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound(): string {
return "Generic animal sound";
}
}
class Dog extends Animal {
breed: string;
constructor(name: string, breed: string) {
super(name);
this.breed = breed;
}
makeSound(): string {
return "Woof!";
}
}
let myDog = new Dog("Buddy", "Golden Retriever");
console.log(myDog.name); // Output: Buddy
console.log(myDog.breed); // Output: Golden Retriever
console.log(myDog.makeSound()); // Output: Woof!
์ด ์์๋ TypeScript์์ ํด๋์ค, ์์ ๋ฐ ๋ฉ์๋ ์ค๋ฒ๋ผ์ด๋ฉ์ ์ฌ์ฉ์ ๋ณด์ฌ์ค๋๋ค. `Dog` ํด๋์ค๋ `Animal` ํด๋์ค๋ฅผ ์์๋ฐ์ ๋ช ํํ๊ณ ์ฒด๊ณ์ ์ธ ๊ตฌ์กฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
3. ํด๋ง ๋ฐ IDE ์ง์
TypeScript๋ Visual Studio Code, WebStorm, Sublime Text์ ๊ฐ์ ์ธ๊ธฐ ์๋ IDE์์ ์๋ ์์ฑ, ๋ฆฌํฉํ ๋ง, ์ ์ ๋ถ์์ ํฌํจํ ํ์ํ ํด๋ง ์ง์์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๊ฐ๋ฐ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํค๊ณ ์ค๋ฅ ๋ฐ์ ๊ฐ๋ฅ์ฑ์ ์ค์ ๋๋ค. JavaScript ํด๋ง๋ ํฌ๊ฒ ๊ฐ์ ๋์์ง๋ง, TypeScript์ ์ ์ ํ์ดํ์ ๋ ์ ํํ๊ณ ์ ๋ขฐํ ์ ์๋ ํด๋ง์ ๊ธฐ๋ฐ์ ์ ๊ณตํฉ๋๋ค.
4. ๊ฐ๋ ์ฑ ๋ฐ ์ ์ง๋ณด์์ฑ
TypeScript์ ์ ์ ํ์ดํ ๋ฐ OOP ๊ธฐ๋ฅ์ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ฝ๊ณ ์ดํดํ ์ ์๋๋ก ํฉ๋๋ค. ๋ช ์์ ์ธ ํ์ ์ฃผ์์ ์์๋๋ ๋ฐ์ดํฐ ํ์ ์ ๋ํ ๋ช ํ์ฑ์ ์ ๊ณตํ๋ฉฐ, ํด๋์ค ๋ฐ ์ธํฐํ์ด์ค์ ์ฌ์ฉ์ ๋ชจ๋์ฑ๊ณผ ์ฝ๋ ์ฌ์ฌ์ฉ์ ์ด์งํฉ๋๋ค. ์ด๋ ํนํ ํ ๋จ์๋ก ์์ ํ ๋ ๋๊ท๋ชจ ํ๋ก์ ํธ์ ์ ์ง๋ณด์์ฑ์ ๊ทน์ ์ผ๋ก ํฅ์์ํฌ ์ ์์ต๋๋ค.
5. ์ปดํ์ผ
TypeScript ์ฝ๋๋ ๋ธ๋ผ์ฐ์ ๋ Node.js ๋ฐํ์์์ ์คํ๋๊ธฐ ์ ์ JavaScript๋ก ์ปดํ์ผ๋์ด์ผ ํฉ๋๋ค. ์ด ์ปดํ์ผ ๊ณผ์ ์ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ์ถ๊ฐ ๋จ๊ณ๋ฅผ ๋ถ์ฌํ์ง๋ง, TypeScript๊ฐ ์ค๋ฅ๋ฅผ ์กฐ๊ธฐ์ ์ก์๋ด๊ณ ์์ฑ๋ JavaScript ์ฝ๋๋ฅผ ์ต์ ํํ ์ ์๋๋ก ํด์ค๋๋ค. ์ปดํ์ผ ๋จ๊ณ๋ Webpack, Parcel, Rollup๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋ ํ๋ก์ธ์ค์ ์ฝ๊ฒ ํตํฉ๋ ์ ์์ต๋๋ค.
์ฅ์ ๊ณผ ๋จ์
TypeScript์ ์ฅ์
- ํฅ์๋ ์ฝ๋ ํ์ง: ์ ์ ํ์ดํ์ ์ค๋ฅ๋ฅผ ์กฐ๊ธฐ์ ์ก์๋ด์ด ๋์ฑ ๊ฒฌ๊ณ ํ๊ณ ์ ๋ขฐํ ์ ์๋ ์ฝ๋๋ฅผ ๋ง๋ญ๋๋ค.
- ๊ฐํ๋ ์ ์ง๋ณด์์ฑ: ๋ช ์์ ์ธ ํ์ ๊ณผ OOP ๊ธฐ๋ฅ ๋๋ถ์ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ฝ๊ณ ์ดํดํ๋ฉฐ ์ ์ง๋ณด์ํ ์ ์์ต๋๋ค.
- ๋ ๋์ ํ์ฅ์ฑ: ๊ตฌ์กฐํ๋ ํน์ฑ์ผ๋ก ์ธํด ํฌ๊ณ ๋ณต์กํ ํ๋ก์ ํธ์ ๋งค์ฐ ์ ํฉํฉ๋๋ค.
- ์ฐ์ํ ํด๋ง: ์๋ ์์ฑ, ๋ฆฌํฉํ ๋ง, ์ ์ ๋ถ์์ ํฌํจํ ํ์ํ IDE ์ง์.
- ์ ์ง์ ๋์ ๊ฐ๋ฅ: ๊ธฐ์กด JavaScript ํ๋ก์ ํธ์ ์ ์ง์ ์ผ๋ก ํตํฉ๋ ์ ์์ต๋๋ค.
TypeScript์ ๋จ์
- ํ์ต ๊ณก์ : ์ ์ ํ์ดํ ๋ฐ OOP์ ๊ด๋ จ๋ ์๋ก์ด ๊ตฌ๋ฌธ ๋ฐ ๊ฐ๋ ์ ํ์ตํด์ผ ํฉ๋๋ค.
- ์ปดํ์ผ ๋จ๊ณ: ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ์ถ๊ฐ ๋จ๊ณ๋ฅผ ๋ถ์ฌํฉ๋๋ค.
- ๋ณต์ก์ฑ ์ฆ๊ฐ: ์ ์ ํ์ดํ์ด ํ์์ ์ด์ง ์์ ์๊ท๋ชจ ํ๋ก์ ํธ์์๋ ๋ณต์ก์ฑ์ ๋ํ ์ ์์ต๋๋ค.
JavaScript์ ์ฅ์
- ๋ฐฐ์ฐ๊ธฐ ์ฌ์: ํนํ ์ด๋ณด์์๊ฒ ๋น๊ต์ ๋ฐฐ์ฐ๊ณ ์ฌ์ฉํ๊ธฐ ์ฝ์ต๋๋ค.
- ๋น ๋ฅธ ํ๋กํ ํ์ดํ: ๋น ๋ฅธ ํ๋กํ ํ์ดํ ๋ฐ ์คํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ๊ด๋ฒ์ํ ์ฑํ: ์ฌ์ค์ ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ์์ ์ง์๋๋ฉฐ, ๋ฐฉ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ํ๋ ์์ํฌ ์ํ๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
- ์ปดํ์ผ ๋จ๊ณ ์์: ์ฝ๋๋ฅผ ๋ธ๋ผ์ฐ์ ๋ Node.js ๋ฐํ์์์ ์ง์ ์คํํ ์ ์์ต๋๋ค.
JavaScript์ ๋จ์
- ๋ฐํ์ ์ค๋ฅ: ๋์ ํ์ดํ์ ๋๋ฒ๊ทธํ๊ธฐ ์ด๋ ค์ด ๋ฐํ์ ์ค๋ฅ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
- ๋ฎ์ ์ ์ง๋ณด์์ฑ: ์ ์ ํ ๊ตฌ์กฐ์ ์กฐ์ง ์์ด ๋๊ท๋ชจ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ ์ง๋ณด์ํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค.
- ์ ํ์ ์ธ OOP ์ง์: ํ๋กํ ํ์ ๊ธฐ๋ฐ ์์์ ํด๋์ค ๊ธฐ๋ฐ OOP๋ณด๋ค ํผ๋์ค๋ฝ๊ณ ์ง๊ด์ ์ด์ง ์์ ์ ์์ต๋๋ค.
TypeScript๋ฅผ ์ ํํด์ผ ํ ๋
TypeScript๋ ๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ์ ํ์ํ ์ ํ์ ๋๋ค:
- ํฌ๊ณ ๋ณต์กํ ํ๋ก์ ํธ: TypeScript์ ์ ์ ํ์ดํ ๋ฐ OOP ๊ธฐ๋ฅ์ ๋๊ท๋ชจ ํ๋ก์ ํธ์์ ๋ณต์ก์ฑ์ ๊ด๋ฆฌํ๊ณ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํค๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ํ ํ๋ก์ ํธ: TypeScript์ ๋ช ํํ ํ์ ์ฃผ์๊ณผ ๊ตฌ์กฐํ๋ ์ฝ๋๋ฒ ์ด์ค๋ ๊ฐ๋ฐ์ ๊ฐ์ ํ์ ์ ์ฉ์ดํ๊ฒ ํฉ๋๋ค.
- ๋์ ์ ๋ขฐ์ฑ์ด ์๊ตฌ๋๋ ํ๋ก์ ํธ: TypeScript์ ์กฐ๊ธฐ ์ค๋ฅ ๊ฐ์ง๋ ๋ฐํ์ ์ค๋ฅ์ ์ํ์ ์ค์ด๊ณ ์ฝ๋ ํ์ง์ ํฅ์์ํต๋๋ค.
- OOP ์์น์ ์ฌ์ฉํ๋ ํ๋ก์ ํธ: TypeScript๋ JavaScript๋ณด๋ค ๋ ๊ฒฌ๊ณ ํ๊ณ ์ง๊ด์ ์ธ OOP ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
- ์ ์ง๋ณด์์ฑ์ด ์ค์ํ ํ๋ก์ ํธ: TypeScript๋ ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ฝ๊ณ ์ดํดํ๋ฉฐ ์ ์ง๋ณด์ํ ์ ์๋๋ก ํฉ๋๋ค.
์์ ์๋๋ฆฌ์ค: ์์ฒ ์ค์ ์ฝ๋์ ์ฌ๋ฌ ์๊ฐ๋์ ๋ถ์ฐ๋ ๊ฐ๋ฐํ์ด ์๋ ๋๊ท๋ชจ ์ ์์๊ฑฐ๋ ํ๋ซํผ์ ๊ตฌ์ถํ๋ค๊ณ ์์ํด ๋ณด์ญ์์ค. TypeScript๋ ์ ์ ํ์ดํ ๋ฐ OOP ๊ธฐ๋ฅ์ ํตํด ๋ณต์ก์ฑ์ ๊ด๋ฆฌํ๊ณ , ํ์ ์ ๊ฐ์ ํ๋ฉฐ, ์ค๋ฅ ์ํ์ ์ค์ด๋ ๋ฐ ๋์์ด ๋๋ฏ๋ก ํ๋ช ํ ์ ํ์ด ๋ ๊ฒ์ ๋๋ค. ๋ช ํํ ํ์ ์ฃผ์์ ์ ์ฒด ์ฝ๋๋ฒ ์ด์ค์ ์ต์ํ์ง ์์ ๊ฐ๋ฐ์๋ผ๋ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ์ ์ง๋ณด์ํ ์ ์๋๋ก ํด์ค ๊ฒ์ ๋๋ค.
JavaScript๋ฅผ ์ ํํด์ผ ํ ๋
JavaScript๋ ๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ์ ์ข์ ์ ํ์ ๋๋ค:
- ์๊ณ ๊ฐ๋จํ ํ๋ก์ ํธ: JavaScript์ ๋จ์์ฑ๊ณผ ์ฌ์ฉ ํธ์์ฑ์ ์ ์ ํ์ดํ์ด ํ์์ ์ด์ง ์์ ์๊ท๋ชจ ํ๋ก์ ํธ์ ์ด์์ ์ ๋๋ค.
- ๋น ๋ฅธ ํ๋กํ ํ์ดํ: JavaScript๋ ์ปดํ์ผ ์ค๋ฒํค๋ ์์ด ๋น ๋ฅธ ์คํ๊ณผ ํ๋กํ ํ์ดํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ์ด๋ฐํ ๋ง๊ฐ ๊ธฐํ์ด ์๋ ํ๋ก์ ํธ: JavaScript๋ ์ปดํ์ผ ๋จ๊ณ๊ฐ ์์ด ๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ๊ฐ์ํํ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ์ด ์ค์ํ ํ๋ก์ ํธ: ์ปดํ์ผ์ ์ต์ ํ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ์ง๋ง, ์ผ๋ถ ํ์ ์์ฅ์ ๊ฒฝ์ฐ, ๋งค์ฐ ์ ์คํ๊ฒ ์์ฑ๋ JavaScript๊ฐ ํธ๋์คํ์ผ๋ง ์ค๋ฒํค๋๋ฅผ ํผํจ์ผ๋ก์จ ์ฝ๊ฐ ๋ ๋์ ์ฑ๋ฅ์ ๋ณด์ผ ์ ์์ต๋๋ค.
์์ ์๋๋ฆฌ์ค: ๊ฐ์ธ ์น์ฌ์ดํธ๋ฅผ ์ํ ๊ฐ๋จํ ์ธํฐ๋ํฐ๋ธ ์ ๋๋ฉ์ด์ ์ ๋ง๋ ๋ค๊ณ ๊ฐ์ ํด ๋ณด์ญ์์ค. ํ๋ก์ ํธ๊ฐ ์๊ณ TypeScript์ ๋ณต์ก์ฑ์ด ํ์ํ์ง ์๊ธฐ ๋๋ฌธ์ JavaScript๊ฐ ์ ํฉํ ์ ํ์ด ๋ ๊ฒ์ ๋๋ค. JavaScript์ ๋น ๋ฅธ ํ๋กํ ํ์ดํ ๊ธฐ๋ฅ์ ๋ค์ํ ์ ๋๋ฉ์ด์ ๊ธฐ์ ์ ์ ์ํ๊ฒ ์คํํ๊ณ ํ๋ก์ ํธ๋ฅผ ์ฆ์ ๊ฐ๋ํ ์ ์๋๋ก ํด์ค ๊ฒ์ ๋๋ค.
์ค์ฉ์ ์ธ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
TypeScript ์ฌ์ฉ ์ฌ๋ก
- Angular ์ ํ๋ฆฌ์ผ์ด์ : ์ธ๊ธฐ ์๋ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ์ธ Angular๋ TypeScript๋ก ๊ตฌ์ถ๋์์ผ๋ฉฐ, ๊ทธ ๊ธฐ๋ฅ์ ๊ด๋ฒ์ํ๊ฒ ํ์ฉํฉ๋๋ค.
- React ์ ํ๋ฆฌ์ผ์ด์ : React๋ JavaScript์ ํจ๊ป ์ฌ์ฉํ ์ ์์ง๋ง, ํนํ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์์ React์ ํจ๊ป TypeScript๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝ๋ ํ์ง๊ณผ ์ ์ง๋ณด์์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. Material UI์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ข ์ข TypeScript ํ์ ์ ์๋ฅผ ์ ๊ณตํฉ๋๋ค.
- Node.js ๋ฐฑ์๋ ์ ํ๋ฆฌ์ผ์ด์ : TypeScript๋ Node.js๋ฅผ ์ฌ์ฉํ์ฌ ๊ฒฌ๊ณ ํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ๋ฐฑ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค. NestJS์ ๊ฐ์ ํ๋ ์์ํฌ๋ TypeScript๋ก ๊ตฌ์ถ๋์์ผ๋ฉฐ, ์๋ฒ ์ธก ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์ ๊ตฌ์กฐํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค.
- ํฌ๋ก์ค ํ๋ซํผ ๋ชจ๋ฐ์ผ ๊ฐ๋ฐ: Ionic ๋ฐ NativeScript์ ๊ฐ์ ํ๋ ์์ํฌ๋ TypeScript๋ฅผ ์ง์ํ์ฌ ๊ฐ๋ฐ์๊ฐ ๋จ์ผ ์ฝ๋๋ฒ ์ด์ค๋ก ํฌ๋ก์ค ํ๋ซํผ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์๋๋ก ํฉ๋๋ค.
JavaScript ์ฌ์ฉ ์ฌ๋ก
- ๊ธฐ๋ณธ ์น์ฌ์ดํธ ์ธํฐ๋ํฐ๋ธ ์์: JavaScript๋ ํผ ์ ํจ์ฑ ๊ฒ์ฌ, ์ด๋ฏธ์ง ์บ๋ฌ์ , ๋ฉ๋ด ์ ๋๋ฉ์ด์ ๊ณผ ๊ฐ์ ๊ฐ๋จํ ์ธํฐ๋ํฐ๋ธ ์์๋ฅผ ์น์ฌ์ดํธ์ ์ถ๊ฐํ๋ ๋ฐ ์ฌ์ ํ ์ฃผ๋ ฅ ์ธ์ด์ ๋๋ค.
- ์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA): Vue.js์ ๊ฐ์ ํ๋ ์์ํฌ๋ JavaScript์ ํจ๊ป SPA๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ง๋ง, ์ด ๋ถ์ผ์์ TypeScript๊ฐ ์ ์ ๋ ์ธ๊ธฐ๋ฅผ ์ป๊ณ ์์ต๋๋ค.
- ๋ธ๋ผ์ฐ์ ํ์ฅ: JavaScript๋ ๋ธ๋ผ์ฐ์ ํ์ฅ์ ๊ฐ๋ฐํ๋ ์ฃผ์ ์ธ์ด์ ๋๋ค.
- ๊ฒ์ ๊ฐ๋ฐ: JavaScript๋ Phaser์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฐ ๊ฒ์์ ๊ฐ๋ฐํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
JavaScript์์ TypeScript๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๊ธฐ
๊ธฐ์กด JavaScript ํ๋ก์ ํธ๊ฐ ์๋ค๋ฉด, ์ ์ง์ ์ผ๋ก TypeScript๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ ์ ์์ต๋๋ค. ๋ค์์ ๋จ๊ณ๋ณ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค:
- TypeScript ์ค์น: npm ๋๋ yarn์ ์ฌ์ฉํ์ฌ TypeScript ์ปดํ์ผ๋ฌ๋ฅผ ์ ์ญ์ผ๋ก ์ค์นํฉ๋๋ค: `npm install -g typescript` ๋๋ `yarn global add typescript`.
- TypeScript ๊ตฌ์ฑ: TypeScript ์ปดํ์ผ๋ฌ๋ฅผ ๊ตฌ์ฑํ๊ธฐ ์ํด ํ๋ก์ ํธ ๋ฃจํธ์ `tsconfig.json` ํ์ผ์ ์์ฑํฉ๋๋ค.
- ํ์ผ ์ด๋ฆ ๋ณ๊ฒฝ: JavaScript ํ์ผ ์ด๋ฆ์ `.ts`(TypeScript์ฉ) ๋๋ `.tsx`(JSX๊ฐ ํฌํจ๋ TypeScript์ฉ)๋ก ๋ณ๊ฒฝํฉ๋๋ค.
- ํ์ ์ฃผ์ ์ถ๊ฐ: ์ฝ๋์ ์ ์ง์ ์ผ๋ก ํ์ ์ฃผ์์ ์ถ๊ฐํฉ๋๋ค. ์ฝ๋๋ฒ ์ด์ค์ ๊ฐ์ฅ ์ค์ํ ๋ถ๋ถ๋ถํฐ ์์ํ์ญ์์ค.
- TypeScript ์ปดํ์ผ: `tsc` ๋ช ๋ น์ ์ฌ์ฉํ์ฌ TypeScript ์ฝ๋๋ฅผ ์ปดํ์ผํฉ๋๋ค: `tsc`.
- ์ค๋ฅ ํด๊ฒฐ: TypeScript ์ปดํ์ผ๋ฌ๊ฐ ๋ณด๊ณ ํ๋ ๋ชจ๋ ํ์ ์ค๋ฅ๋ฅผ ์์ ํฉ๋๋ค.
- ์ฝ๋ ๋ฆฌํฉํฐ๋ง: ํด๋์ค ๋ฐ ์ธํฐํ์ด์ค์ ๊ฐ์ TypeScript์ ๊ธฐ๋ฅ์ ํ์ฉํ๋๋ก ์ฝ๋๋ฅผ ๋ฆฌํฉํฐ๋งํฉ๋๋ค.
tsconfig.json ์์:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
TypeScript์ JavaScript์ ๋ฏธ๋
TypeScript์ ์ธ๊ธฐ๋ ์ต๊ทผ ๋ช ๋ ๊ฐ ๊พธ์คํ ์ฆ๊ฐํ์ผ๋ฉฐ, ํ์ฌ ๊ธฐ์ ์์ค ํ๋ก์ ํธ์ ์ต์ ์น ๊ฐ๋ฐ์์ ๋๋ฆฌ ์ฌ์ฉ๋๊ณ ์์ต๋๋ค. ๊ทธ๋ฌ๋ JavaScript๋ ์น์ ๊ธฐ๋ฐ์ผ๋ก ๋จ์ ์์ผ๋ฉฐ ์๋ก์ด ๊ธฐ๋ฅ๊ณผ ๊ฐ์ ์ฌํญ์ผ๋ก ๊ณ์ ๋ฐ์ ํ๊ณ ์์ต๋๋ค. ECMAScript ํ์ค์ JavaScript๊ฐ ๊ด๋ จ์ฑ๊ณผ ๊ฒฝ์๋ ฅ์ ์ ์งํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
TypeScript์ JavaScript๋ ๊ณ์ํด์ ๊ณต์กดํ๋ฉฐ ์๋ก๋ฅผ ๋ณด์ํ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค. TypeScript๋ ๋์ ์ ์ง๋ณด์์ฑ์ด ์๊ตฌ๋๋ ํฌ๊ณ ๋ณต์กํ ํ๋ก์ ํธ์ ์ ํธ๋๋ ์ ํ์ผ๋ก ๋จ์ ๊ฒ์ด๋ฉฐ, JavaScript๋ ์๊ท๋ชจ ํ๋ก์ ํธ ๋ฐ ๋น ๋ฅธ ํ๋กํ ํ์ดํ์ ๊ณ์ ์ฌ์ฉ๋ ๊ฒ์ ๋๋ค.
๊ฒฐ๋ก
TypeScript์ JavaScript ์ค ์ ํ์ ํ๋ก์ ํธ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค. TypeScript๋ ์ฝ๋ ํ์ง, ์ ์ง๋ณด์์ฑ, ํ์ฅ์ฑ ์ธก๋ฉด์์ ์๋นํ ์ด์ ์ ์ ๊ณตํ๋ฏ๋ก ํฌ๊ณ ๋ณต์กํ ํ๋ก์ ํธ์ ํ๋ฅญํ ์ ํ์ ๋๋ค. JavaScript๋ ์๊ท๋ชจ ํ๋ก์ ํธ, ๋น ๋ฅธ ํ๋กํ ํ์ดํ, ๊ทธ๋ฆฌ๊ณ ๋จ์์ฑ์ด ๊ฐ์ฅ ์ค์ํ ์๋๋ฆฌ์ค์์ ์ฌ์ ํ ๊ฐ์น ์๋ ์ธ์ด์ ๋๋ค.
๊ถ๊ทน์ ์ผ๋ก, ์ด๋ค ์ธ์ด๊ฐ ์์ ์๊ฒ ์ ํฉํ์ง ๊ฒฐ์ ํ๋ ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ ๋ ๊ฐ์ง ๋ชจ๋๋ฅผ ์คํํด๋ณด๊ณ ์์ ์ ๊ฐ๋ฐ ์คํ์ผ๊ณผ ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ์ ๊ฐ์ฅ ์ ๋ง๋ ๊ฒ์ ํ์ธํ๋ ๊ฒ์ ๋๋ค. TypeScript๋ฅผ ๋ฐฐ์ฐ๋ ๊ฒ์ ์น ๊ฐ๋ฐ์๋ก์์ ๊ธฐ์ ์ ํฌ๊ฒ ํฅ์์ํค๊ณ , ๋ ๊ฒฌ๊ณ ํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์๋ ๋๊ตฌ๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.