느려도 한걸음씩

TypeScript에는 우리가 타입을 보다 효율적이고 안전하게 다룰 수 있도록 도와주는 유틸리티 타입(Utility Types) 들이 존재합니다.이 글에서는 실무에서 자주 사용되는 대표적인 유틸리티 타입들을 알아보겠습니다. 이미 있는 타입을 변형하거나 선택적으로 사용하는 데 큰 도움이 돼요! 🔹 keyof - 객체의 키를 유니온 타입으로 만들기interface User { id: number; name: string; age: number; gender: 'm' | 'f';}type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender' keyof는 인터페이스의 속성 이름(key)들을 유니온 타입으로 만들어줍니다. const key: UserKey..

TypeScript를 사용하다 보면 여러 타입에 대해 재사용이 가능한 함수나 인터페이스를 만들고 싶을 때가 많습니다. 이럴 때 유용하게 사용할 수 있는 기능이 바로 제네릭(Generic)입니다.이 글에서는 제네릭의 개념부터 활용 방법까지, 실제 예제를 통해 차근차근 알아보겠습니다. 🔹 제네릭이란?제네릭(Generic)은 타입을 변수처럼 사용하는 문법입니다. 함수나 클래스, 인터페이스 등을 정의할 때 고정된 타입이 아닌, 나중에 사용할 때 결정될 수 있는 타입을 설정할 수 있게 도와줍니다.간단한 예제로 시작해볼게요. function getSize(arr: number[]): number { return arr.length;} 위 함수는 number[] 배열만 받을 수 있습니다. const arr1..

JavaScript에서 클래스(class)는 객체를 생성하기 위한 일종의 템플릿입니다. TypeScript는 여기에 정적 타입과 접근 제어자(Access Modifiers) 등을 추가하여 객체지향 프로그래밍을 더욱 강력하게 지원합니다. 이번 글에서는 TypeScript에서의 클래스 문법과 주요 개념을 정리해보겠습니다. 🔧 기본 클래스 구조와 생성자class Car { color: string; constructor(color: string) { this.color = color; } start() { console.log('go...'); }}const bmw = new Car('red');bmw.start();TypeScript에서는 클래스 내의..

타입스크립트를 사용할 때 자주 등장하는 개념 중 하나가 바로 리터럴 타입, 유니온 타입, 그리고 교차 타입입니다. 각각의 타입은 언제, 어떻게 사용해야 하는지 명확히 알고 있으면 코드의 안정성과 가독성을 크게 높일 수 있습니다. 이번 글에서는 이 세 가지 타입을 예제를 통해 쉽게 이해해 보겠습니다. 🔹 리터럴 타입 (Literal Type)리터럴 타입은 특정한 값만 허용하는 타입입니다. 변수 선언 시 const를 쓰면 해당 값 자체가 타입으로 추론되기도 합니다.const userName1 = 'Bob'; // 타입: 'Bob'let userName2 = 'Tom'; // 타입: string (let은 재할당 가능하므로)userName2 = 'John'; // ✅ 가능// userName2 =..

TypeScript에서 함수는 자바스크립트처럼 동작하지만, 정적 타입 덕분에 더 안전하고 명확하게 정의할 수 있습니다. 이번 글에서는 함수 정의, 옵셔널 파라미터, 나머지 매개변수, this 타입, 오버로드 등 TypeScript 함수 문법의 핵심을 정리합니다. ✅ 함수 타입 정의함수의 매개변수와 반환값의 타입을 명시할 수 있습니다.function add(num1: number, num2: number): number { return num1 + num2;} 반환값이 없는 함수는 void 타입을 사용합니다. function printHello(): void { console.log('Hello');} ❓ 옵셔널 파라미터 (Optional Parameter) 파라미터에 ?를 붙이면 선택적으로 받을 수..

interface는 TypeScript에서 객체의 구조를 정의할 때 사용하는 문법입니다. 객체를 더 명확하고 안전하게 사용할 수 있도록 도와주는 중요한 기능 중 하나입니다.이번 글에서는 인터페이스의 기본 개념부터 클래스와의 연결까지 간단한 예제들과 함께 정리해보겠습니다. ✅ 왜 인터페이스를 사용할까?let user: object;user = { name: 'xx', age: 30 };console.log(user.name); // ❌ 오류 발생 object 타입으로 지정하면 해당 객체의 속성에 직접 접근할 수 없습니다. 이럴 때 interface를 사용하면 해결할 수 있습니다. ✨ 인터페이스 기본 사용법interface User { name: string; age: number;}let us..

TypeScript는 JavaScript에 타입 시스템을 더한 언어입니다. 코드 작성 시 타입을 명확히 지정할 수 있어 유지보수와 디버깅에 큰 도움이 됩니다. 이번 글에서는 TypeScript의 기본 타입들을 정리해보겠습니다.✨ 기본 타입들📍 string, number, booleanlet car: string = 'bmw';// car = 20; // ❌ 오류 발생let age: number = 30;let isAdult: boolean = true; 변수에 타입을 지정하면 해당 타입 외의 값을 할당할 수 없습니다. 이는 코드의 안정성을 높여줍니다. 📍 배열 타입let arr1: number[] = [1, 2, 3];let arr2: Array = [1, 2, 3];let week1: string[..

자바스크립트에서 객체를 만드는 방식은 다양합니다. 그중에서도 class는 생성자 함수보다 더 명확하고 직관적인 문법으로 객체지향 프로그래밍을 구현할 수 있게 해줍니다. 이 글에서는 생성자 함수와 클래스의 차이점, 그리고 클래스 기반 상속, 오버라이딩까지 살펴보겠습니다. 🛠 생성자 함수 방식const User = function(name, age) { this.name = name; this.age = age; this.showName = function () { console.log(this.name); };};const mike = new User('Mike', 30); new 키워드를 사용해 객체를 생성합니다.각 인스턴스는 showName 메서드를 자신이 직접 소유합니다. (메모리 비..