Project Drag & Drop 1️⃣ ! & as TypeScript에서 DOM 조작할 때 오류 해결하기 class ProjectInput { templateElement: HTMLTemplateElement; hostElement: HTMLDivElement; constructor() { this.templateElement = document.getElementById( 'project-input' )! as HTMLTemplateElement; this.hostElement = document.getElementById('app')! as HTMLDivElement; } } document.getElementById('id');에서 !를 추가하는 이유는 TypeScript가 이것이 null일수..

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 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..