🍑 Drag & Drop 2️⃣ Tuple is an array tuple은 JavaScript에는 없고 TypeScript에만 있는 타입이다. 따라서 특정 변수를 tuple 타입으로 지정했을 때, 아래와 같은 방법으로 tuple 타입임을 확인할 수 없다. const engineer: [string, string, string] = ['Apeach', 'Ogu', 'Choonsik']; engineer instanceof Tuple; // ❌ typeof engineer === 'tuple'; // ❌ (false) But tuple은 TypeScript에만 존재하는 타입이지만 JavaScript로 생각해봤을 때 결국은 배열이다. 그러므로 선언한 변수가 tuple이 맞는지 확인하려면 배열인지 여부를 확인..

Decorators 3️⃣ Validation decorator 프로퍼티 데코레이터 예시 class Course { title: string; price: number; constructor(t: string, p: number) { this.title = t; this.price = p; } } const courseForm = document.querySelector('form')!; courseForm.addEventListener('submit', event => { event.preventDefault(); const titleEl = document.getElementById('title') as HTMLInputElement; const priceEl = document.getElementB..

Decorators 2️⃣ Decorator the synthetic sugar 클래스 데코레이터는 constructor를 반환하면서 기존 constructor를 확장할 수 있다. constructor를 확장할 때 super();는 기존 클래스 확장에서와 마찬가지로 기존 클래스의 정보를 기억하고 싶을 때 사용하면 된다. function ClassDeco() { return function(target: T) { return class extends target { constructor(..._: any[]) { super(); // not necessary /* write your code */ } } } } @ClassDeco class Person { name = 'Shou'; get name() {..

Decorators 1️⃣ What is Decorators? 클래스, 프로퍼티, 액세서, 메소드, 파라미터에 첨부할 수 있는 특별한 함수이다. 데코레이터가 붙은 클래스 등등 에서는 데코레이터에서 정의된 기능이 동작한다. 정의한 데코레이터 함수를 @ 기호를 붙여 실행할 수 있다. function ClassDeco(constructor: Function) { console.log('Logging...'); console.log(constructor); } @ClassDeco class Person { name = 'Shou'; constructor() { console.log('Creating person object...'); } } /* Logging... class Person { constructo..

클래스와 인스턴스 ✏️ 클래스 클래스란? 클래스는 속성과 메소드를 정의하는 공간이다. 속성은 클래스에 포함되는 변수를 의미하고, 메소드는 클래스에 포함되는 함수를 의미한다. 클래스를 정의하는 데에는 2가지 방법이 있다. 함수로 정의 (ES5 문법) function Introduce(name, age, favorite) { // 인스턴스 만들어질 때 실행되는 코드 } class 키워드로 정의 (ES6 문법) class Introduce { constructor(name, age, favorite) { // 인스턴스가 만들어질 때 실행되는 코드 } } 여기서 constructor는 클래스가 인스턴스 객체를 생성할 때 객체를 초기화하는 메소드이다. constructor 메소드를 다음과 같이 사용한다면, cla..

객체 지향 객체 지향 프로그래밍이란? 하나의 청사진을 만들고 그 청사진을 바탕으로, 즉 자바스크립트에서는 class를 바탕으로 하는 하나의 객체, 즉 instance를 만드는 프로그래밍 패턴을 의미한다. ✏️ 클래스와 인스턴스 클래스는 속성과 메소드를 정의하는 공간이고 인스턴스는 클래스에서 정의된 정보드를 가져와 이용하는 객체이다. 속성은 클래스에 포함되는 변수를 의미하고, 메소드는 클래스에 포함되는 함수를 의미한다. 클래스를 정의하는 데에는 2가지 방법이 있다. 함수로 정의 (ES5 문법) function Introduce(name, age, favorite) { // 인스턴스 만들어질 때 실행되는 코드 } class 키워드로 정의 (ES6 문법) class Introduce { constructor(..