이 글은 아래 강의를 바탕으로 정리한 글입니다. 🤗
<https://inf.run/UGoRu>안녕하세요! 오늘은 프론트엔드 개발의 필수 도구가 된 TypeScript에 대해 알아보겠습니다. JavaScript를 더 안전하고 생산적으로 사용할 수 있게 해주는 TypeScript, 과연 왜 이렇게 많은 개발자들이 열광하는 걸까요? 함께 살펴보시죠! 🚀
TypeScript는 C#의 아버지로 불리는 마이크로소프트의 개발자 **앤더스 하일스버그(Anders Hejlsberg)**가 만든 오픈소스 프로그래밍 언어입니다. 현재도 전 세계 수많은 개발자들이 이 언어의 발전에 기여하고 있으며, 활발한 커뮤니티를 자랑하고 있습니다.
TypeScript는 완전히 새로운 언어가 아닙니다. JavaScript에 타입 시스템을 추가한 확장판이라고 할 수 있죠. 기존 JavaScript 코드를 더 안전하게 작성할 수 있도록 도와주는 도구입니다.
JavaScript는 동적 타입 언어로서 큰 장점을 가지고 있습니다. 하나의 변수에 다양한 타입의 값을 자유롭게 넣을 수 있어 매우 유연하죠. 하지만 이런 유연함은 양날의 검입니다.
문제는 실행 전까지 오류를 발견할 수 없다는 점입니다. 잘못된 코드를 작성해도 런타임에만 오류가 나타나기 때문에, 프로젝트 규모가 커질수록 예상치 못한 버그로 인해 서비스가 중단될 위험이 커집니다.
정적 타입 시스템(Java, C++ 등)은 안전하지만 모든 변수에 타입을 명시해야 해서 코드량이 많아지고 번거롭습니다. TypeScript는 이 두 가지 문제를 동시에 해결하는 독특한 방법을 제시합니다.
💡 TypeScript는 **점진적 타입 시스템(Gradual Type System)**을 사용합니다. 변수의 초기값을 보고 자동으로 타입을 추론하기 때문에, 안전성을 확보하면서도 개발 편의성을 유지할 수 있습니다.
💡 타입 시스템이란?
프로그래밍 언어에서 타입을 어떻게 정의하고, 언제 검사하며, 어떻게 관리할지를 규정한 체계입니다. 크게 두 가지로 나뉩니다.1. 정적 타입 시스템: 코드 실행 전에 모든 변수의 타입을 미리 결정 (Java, C++)
2. 동적 타입 시스템: 코드 실행 중에 변수의 타입을 유동적으로 결정 (JavaScript, Python)
대부분의 프로그래밍 언어는 다음과 같은 과정을 거쳐 실행됩니다.
컴파일러는 코드를 바로 기계어로 변환하지 않습니다. 그 전에 **AST(Abstract Syntax Tree, 추상 문법 트리)**라는 중간 형태로 변환합니다.
📌 AST란?
코드에서 공백, 주석, 탭 같은 실행과 무관한 요소들을 제거하고, 코드를 트리 형태의 자료구조로 분해하여 저장한 것입니다. 컴파일러가 코드를 이해하기 쉬운 형태로 만든 것이죠.
TypeScript는 일반 언어와 조금 다른 방식으로 동작합니다.
⚠️ 중요한 포인트: TypeScript의 타입 코드는 컴파일 후 모두 사라집니다! 타입 검사는 오직 개발 단계에서만 수행되며, 최종 JavaScript 코드에는 타입 정보가 포함되지 않습니다.
이런 방식 덕분에 TypeScript로 작성한 코드는 타입 검사를 통과한 안전한 JavaScript 코드가 됩니다. 런타임 전에 미리 오류를 잡아내어 더 안정적인 프로그램을 만들 수 있는 것이죠.
이제 실제로 TypeScript를 사용하기 위한 환경을 설정해봅시다!
먼저 Node.js의 내장 기능(console, fs 등)에 대한 타입 정보를 제공하는 패키지를 설치해야 합니다.
npm install --save-dev @types/node⭐ 왜 필요할까요? TypeScript는 코드 실행 전에 타입 검사를 수행합니다. 만약
console.log처럼 Node.js가 제공하는 기능의 타입이 정의되지 않으면, TypeScript 컴파일러가 "이게 뭔지 모르겠어요!"라며 오류를 발생시킵니다.@types/node는 이런 내장 기능들의 타입 정보를 제공해줍니다.
TypeScript 컴파일러(TSC)는 npm의 typescript 패키지에 포함되어 있습니다.
sudo npm install -g typescript설치 후에는 다음과 같이 사용할 수 있습니다.
# TypeScript 파일 컴파일
tsc index.ts
# 생성된 JavaScript 파일 실행
node index.js매번 컴파일하고 실행하는 것은 번거롭습니다. **TSX(TypeScript Execute)**를 사용하면 한 번에 실행할 수 있습니다!
# TSX 설치
sudo npm install -g tsx
# TypeScript 파일 바로 실행
tsx src/index.tsTSX를 사용하면 JavaScript 파일을 생성하지 않고도 TypeScript 코드를 바로 실행할 수 있어 개발이 훨씬 편리해집니다. 🚀
TypeScript의 진정한 힘은 컴파일러 옵션을 통해 프로젝트에 맞게 세밀하게 조정할 수 있다는 점입니다. tsconfig.json 파일에서 다양한 옵션을 설정할 수 있습니다.
TypeScript 컴파일러에게 어떤 파일을 컴파일할지 알려줍니다.
{
"include": ["src"]
}이 설정은 "src 폴더 안의 모든 TypeScript 파일을 컴파일해줘"라는 의미입니다.
컴파일 결과로 생성될 JavaScript 코드의 버전을 지정합니다.
{
"compilerOptions": {
"target": "ESNext"
},
"include": ["src"]
}ESNext는 최신 JavaScript 문법을 사용한다는 의미입니다. 구형 브라우저 지원이 필요하다면 ES5나 ES6로 설정할 수 있습니다.
생성될 JavaScript 코드가 사용할 모듈 시스템을 결정합니다.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext"
},
"include": ["src"]
}컴파일된 JavaScript 파일이 저장될 위치를 설정합니다.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"outDir": "dist"
},
"include": ["src"]
}이제 tsc 명령어를 실행하면 컴파일된 파일이 dist 폴더에 생성됩니다. 소스 코드와 빌드 결과물을 깔끔하게 분리할 수 있죠!
TypeScript의 타입 검사를 얼마나 엄격하게 수행할지 결정하는 가장 중요한 옵션입니다.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"outDir": "dist",
"strict": true
},
"include": ["src"]
}strict: true로 설정하면 더 안전한 코드를 작성할 수 있지만, 초기에는 오류가 많이 발생할 수 있습니다. 프로젝트의 성격에 따라 조절하세요.
TypeScript의 모든 파일은 기본적으로 전역 파일로 취급됩니다. 따라서 서로 다른 파일에서 같은 이름의 변수를 선언하면 충돌이 발생합니다.
이 문제를 해결하려면 각 파일에 export나 import 키워드를 사용해 독립 모듈로 만들어야 하는데, 매번 하기엔 번거롭죠. moduleDetection 옵션이 이를 자동화해줍니다!
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"outDir": "dist",
"strict": true,
"moduleDetection": "force"
},
"include": ["src"]
}이제 모든 TypeScript 파일이 자동으로 독립 모듈로 취급되어 변수명 충돌 걱정 없이 개발할 수 있습니다!
TypeScript는 단순히 JavaScript에 타입을 추가한 것 이상의 가치를 제공합니다. 코드의 안정성을 높이고, 개발 경험을 향상시키며, 대규모 프로젝트에서도 유지보수가 용이한 코드를 작성할 수 있게 해줍니다.
처음에는 타입 시스템이 낯설고 복잡하게 느껴질 수 있지만, 익숙해지면 TypeScript 없이는 개발하기 어려울 정도로 강력한 도구가 됩니다.
이 글이 TypeScript를 시작하는 데 도움이 되었기를 바랍니다. 다음 포스트에서는 TypeScript의 기본 타입과 고급 타입에 대해 더 자세히 알아보겠습니다!