🍑 Drag & Drop 4️⃣ Abstract class & method abstract class => 인스턴스화 할 수 없는 클래스, 상속만 가능 abstract method => 상속 후 구현 가능 / abstract 메소드는 private를 사용할 수 없다 추상화할거면 private을 삭제해야함.. 추상 클래스의 생성자에서 메소드를 불러오는 것보다 확장한 클래스에서 불러오는 것이 더 안전 정리 예정 Extends class with generic 부모가 될 클래스에서 제네릭으로 타입 지정 확장된 클래스에서 제네릭으로 특정 타입을 전달 정리 예정 Getter return 값이 존재해야함 접근은 일반 프로퍼티처럼 (get hello()가 있다면 this.hello()가 아니라 this.hello로)..

🍑 Drag & Drop 3️⃣ Singleton pattern 내용 추가 예정 Enum 내용 추가 예정

🍑 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이 맞는지 확인하려면 배열인지 여부를 확인..

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

Object & Array Big O of object 객체를 사용하기 좋을 때는 다음과 같다. 정렬할 필요가 없을 때 빠른 접근 / 삽입 / 삭제가 필요할 때 객체의 Big O 탐색 - O(N) 삽입 - O(1) 삭제 - O(1) 접근 - O(1) 탐색이 O(N)을 따르는 이유는 특정한 정보가 어떤 값에 있는지 확인하기 때문이다. const information = { name: 'Shoupeach', isApeach: true, favoriteNumbers: [4, 8] }; information이란 객체가 존재할 때 여기서 true라는 값이 information에서 어디에 저장되어 있는지 알기 위해서 먼저 name을 확인하고 값을 확인한다. name의 값은 Shoupeach이기 때문에 통과한 뒤 i..

React 1️⃣ What is React? 리액트는 선언형, 컴포넌트 기반의 JavaScript 라이브러리로 UI를 만들기 위해 사용된다. JSX라는 문법을 사용해 SPA를 개발할 수 있고, CSR로 작동한다. Declarative vs Imperative 리액트는 선언형 프로그래밍이다. 그래서 선언형이 뭔데..?! 🤔 선언형은 무엇을 할 것인지에 포커스를 둔 프로그래밍 방법이다. 반면에 선언형의 반대인 명령형은 어떻게 할 것인지에 중점을 두고 있다. 선언형의 무엇을과 명령형의 어떻게를 실생활에서 빗대어 이야기 해보자면, 맛있는 라면 🍜을 먹는다고 가정할 때 아래와 같은 차이를 보인다고 할 수 있겠다.. 선언형 (무엇을 🤔) 컵라면을 먹을래! 명령형 (어떻게 🙄) 뚜껑 형태의 용기를 가진 라면의 뚜껑을..

Git What is Git? Git은 버전을 관리하는데 도움을 주는 VCS(Version Control System) 중 하나이다. VCS 중에서도 DVCS(Distributed Version Control System)으로, 서버가 off-line이거나 인터넷이 연결되어 있지 않을 때도 개발을 진행할 수 있고 서버에 저장된 버전이 삭제되어도 복구가 가능한 것이 특징이다. Installation 나는 macOS를 사용하고 있기 때문에 mac에서 Git 설치하는 방법을..😄 우선 소중한 터미널 창을 띄워준다. 터미널 창에 다음의 명령어를 쳐준다. git 명령어를 치면 설치하라는 창이 뜰텐데, 설치 버튼을 누르면 설치 끝! 나는 이미 설치되어있는 상태이기 때문에 캡쳐를 할 수 없었음..😅 설치를 완료하고 ..

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

Generics 2️⃣ Keyof Constraint 제네릭으로 객체에 대한 제약 조건을 줄 때, 키 값을 필요로 한다면 keyof를 사용한 제약 조건을 쓰면 실수를 방지할 수 있다. function extractAndConvert( obj: T, key: U ) { return 'Value: ' + obj[key]; } extractAndConvert({}, 'name'); // Error occurred 제네릭 T의 제약 조건으로 object를 설정해주었고, U의 제약 조건으로 T의 key를 설정해주었다. extractAndConvert로 빈 객체({})와 name이라는 문자열을 전달했을 때, 빈 객체에는 name이라는 키 값이 없기 때문에 컴파일 오류가 난다! 제네릭으로 U extends keyof..

Big O Notation Need for Big O Notation "문자열을 받아서 이를 뒤집어 출력하는 함수를 작성하시오." for문을 사용하는 경우, 내장 문자열 메소드를 사용하는 경우 등등 이에 대한 해결책만 10가지가 넘는다... 🫠 이 중에 가장 best인 방법은 무엇일까? 여러 코드를 비교하고 성능을 평가할 수 있는 방법이 있다면 좋지 않을까? What is Big O Notation? 1부터 n까지 더하는 함수가 있다고 할 때, 2가지 경우를 생각해 볼 수 있다. function add1(n) { let result = 0; for (let i = 1; i = 0; j--) { console.log(j); } } 총 2개의 for문이 있기 때문에 O(N) + O(N)으로 결국 O(N)인..