"TypeScript와 JavaScript의 핵심 개념 한눈에 정리"

사진: Unsplash 의 charlesdeluvio

JavaScript 개요

JavaScript(JS)는 웹 개발의 핵심 언어로, 클라이언트 및 서버 측 프로그래밍에 사용됩니다. ECMA International에서 관리하는 ECMAScript(ES) 표준을 기반으로 발전하며, 최근 ES6(ECMAScript 2015) 이후 꾸준히 업데이트되고 있습니다.

주요 특징

1. 동적 타입(Dynamically Typed)
   • 변수를 선언할 때 데이터 타입을 명시하지 않으며, 런타임 시 결정됨.
   • let, const, var을 사용하여 변수 선언 가능.
2. 비동기 프로그래밍(Asynchronous Programming)
   • setTimeout(), setInterval(), Promise, async/await 등을 활용한 비동기 작업 처리.
3. 프로토타입 기반 객체 지향(Prototype-based OOP)
   • 클래스를 사용하지 않고도 객체를 생성 및 확장할 수 있음.
   • ES6 이후 class 문법이 도입되었지만, 내부적으로는 프로토타입 기반.
4. 이벤트 루프(Event Loop) & 논블로킹 I/O
   • JavaScript는 단일 스레드(Single-threaded) 기반이지만, 이벤트 루프를 활용하여 비동기 처리를 수행.
5. 함수형 프로그래밍(Functional Programming) 지원
   • 고차 함수(Higher-order Functions), 클로저(Closures), 일급 함수(First-class Functions) 개념 지원.

주요 문법

// 변수 선언
let name = "JavaScript";
const PI = 3.14;

// 함수 선언
function add(a, b) {
    return a + b;
}

// 화살표 함수 (Arrow Function)
const multiply = (a, b) => a * b;

// 객체 리터럴
const person = { name: "Alice", age: 25 };

// 비동기 처리
async function fetchData() {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
}

 

 

TypeScript 개요

TypeScript(TS)는 JavaScript의 상위 집합(Superset)으로, Microsoft에서 개발한 정적 타입을 지원하는 언어입니다.

주요 특징

1. 정적 타입(Static Typing) 지원
   • number, string, boolean, object, array, enum, tuple 등의 타입 명시 가능.
   • 인터페이스(interface) 및 타입 별칭(type)을 활용하여 더 안전한 코드 작성.
2. 최신 JavaScript 기능 지원
   • ES6+의 모든 기능을 지원하며, 브라우저 호환성을 위해 컴파일 단계에서 ES5로 변환 가능.
3. 강력한 OOP 지원
   • 클래스(class), 인터페이스(interface), 추상 클래스(abstract class), 제네릭(generics) 등을 지원.
4. 컴파일러(Transpiler) 기능
   • TypeScript 코드는 tsc(TypeScript Compiler)를 사용하여 JavaScript로 변환됨.
   • 설정 파일 tsconfig.json을 통해 빌드 및 트랜스파일 설정 가능.
5. 타입 추론(Type Inference) & 타입 가드(Type Guards)
   • 명시적으로 타입을 지정하지 않아도 자동으로 추론하는 기능.
   • typeof, instanceof 등을 활용한 타입 체크 가능.

주요 문법

// 변수 타입 지정
let username: string = "TypeScript";
let age: number = 30;

// 함수 타입 정의
function add(a: number, b: number): number {
    return a + b;
}

// 인터페이스 활용
interface Person {
    name: string;
    age: number;
}

const person: Person = { name: "Bob", age: 25 };

// 클래스 정의
class Car {
    constructor(public brand: string, private speed: number) {}

    accelerate(): void {
        console.log(`${this.brand} is moving at ${this.speed} km/h`);
    }
}

const myCar = new Car("Tesla", 100);
myCar.accelerate();

// 제네릭 사용
function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("Hello");

 

JavaScript vs TypeScript 비교

특성	JavaScript	TypeScript
타입 시스템	동적 타입	정적 타입
컴파일 단계	없음	tsc(트랜스파일링 필요)
OOP 지원	제한적(프로토타입 기반)	클래스 및 인터페이스 지원
브라우저 실행	직접 실행 가능	JavaScript로 변환 후 실행
코드 안정성	런타임 오류 가능	컴파일 단계에서 오류 감지
학습 난이도	쉬움	상대적으로 어려움

 

실전 적용 사례

1. JavaScript 활용
   • 웹 애플리케이션 개발 (React, Vue, Angular 등)
   • Node.js를 이용한 백엔드 API 개발
   • Chrome 확장 프로그램 개발
2. TypeScript 활용
   • 대규모 프로젝트에서 코드 안정성을 높이기 위해 사용
   • React, Vue, Angular 프레임워크와 결합하여 사용
   • NestJS와 같은 백엔드 프레임워크에서 활용

 

결론

• 소규모 프로젝트: 빠르게 개발하고 유지보수가 쉬운 JavaScript가 적합.
• 대규모 프로젝트: 코드 안정성을 높이고, 협업이 중요한 TypeScript가 적합.