하이고니의 개발 스토리

본 게시글은 udemy 강좌(Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS)를 수강한 내용을 바탕으로 합니다. 프로젝트 관리 앱. 이 앱에서는 사용자가 프로젝트를 생성할 수 있고, 상태(active / finished) 별 프로젝트를 볼 수 있다. - Project는 프로젝트 개체를 나타내며 id, 제목, 설명, 인원 수 및 상태(active / finished)를 가진다. - ProjectItem은 프로젝트 목록의 단일 항목을 나타내며 프로젝트 제목, 인원 수 및 설명을 표시한다. - State 클래스는 리스너가 상태 업데이트를 구독할 수 있도록 한다. - ProjectState는 State의 하위 클래스로서 프로젝트를 위한 애플리케이션 상태를 관리한다. 이는 싱..

Typescript: 기초부터 실전형 프로젝트까지 with React + NodeJS 정확하게 뭘 하는지 설명도 안 해주고 다짜고짜 클래스 만들면서 출발해가지고 너무나도 어려웠다,,, 오버뷰라도 살짝 한 다음에 코드 작성으로 들어갔으면 이해하기가 훨씬 쉽지 않았을까 싶다. 솔직히 강의의 절반도 이해 못한 것 같다. 모르는 건 다 제쳐두고 이해한 것 위주로 작성할 예정이다. Title Description People ADD PROJECT 번호 제목 내용 let temp = document.querySelector('template'); let tbody = document.querySelector('tbody'); //데이터 SET let db = [ {'id':'1','title':'title1','c..

우리는 때때로 코드에서 호출하는 방식에 따라, 다양한 타입으로 구문이 작동하게끔 하고 싶다. 위 코드에서 getSize 함수의 인자는 숫자가 요소로 포함된 배열이기 때문에, 다른 요소를 포함한 배열을 인자로 받을 수 없다. 아래의 예시도 보자. class DataStorage { private data: (string | number | boolean)[] = []; addItem(item: string | number | boolean) { this.data.push(item); } removeItem(item: string | number | boolean) { if (this.data.indexOf(item) === -1) { return; } this.data.splice(this.data.ind..

type alias vs interface type alias는 모든 타입에 이름을 달아줄 수 있음. interface는 객체 타입에만 가능. 그럼 객체 타입도 그냥 type alias로 이름 달아주면 되는 거 아닙니까? 하지만 type alias는 새로운 프로퍼티 정의가 불가능하고, interface는 가능하다. (같은 이름의 인터페이스에 새로운 타입을 선언할 수 있음) 그럼 왜 굳이 이렇게 확장 가능한 방법과 확장 불가능한 방법으로 나눠 놨습니까? type alias를 쓰는 게 좀 더 명확하긴 하다. 확장될 일이 없기 때문에. 하지만 interface를 활용해서 선언 병합을 하는 경우가 필요할 때도 있다. // @emotion/react/types export interface Theme {} // ..

클래스 선언 시 때로는 일부 메서드의 구현을 선언하지 않고, 하위 클래스가 해당 메서드를 제공할 것을 예상할 수도 있다. 추상화하려는 클래스 이름과 메서드 앞에 타입스크립트의 abstract 키워드를 추가한다. 이러한 추상화 메서드 선언은 추상화 기본 클래스에서 메서드의 본문을 제공하는 것을 건너뛰고, 인터페이스와 동일한 방식으로 선언된다. abstract class School { readonly name: string; constructor(name: string) { this.name = name; } abstract getStudentTypes(): string[]; } class Preschool extends School { getStudentTypes() { return ["preschool..

인터페이스와 타입 별칭 사이에는 몇 가지 차이점이 있다. 인터페이스는 속성 증가를 위해 merge할 수 있다. 이 기능은 내장된 전역 인터페이스 또는 npm 패키지와 같은 외부 코드를 사용할 때 특히 유용하다. 인터페이스는 클래스 구조의 타입을 확인하는 데 사용할 수 있지만 타입 별칭은 그 용도로 사용할 수 없다. 인터페이스는 이름 없는 객체 리터럴의 별칭이 아닌, '이름 있는 객체'로 간주되므로 특이한 오류 케이스를 좀 더 쉽게 읽을 수 있다. 속성 타입 선택적 속성 객체 타입과 마찬가지로 모든 객체가 필수적으로 인터페이스 속성을 가질 필요는 없다. 타입 애너테이션 : 앞에 ?를 사용해 인터페이스의 속성이 선택적 속성임을 나타낼 수 있다. interface Book { author?: string; p..

선택적 매개변수란? 자바스크립트에서 함수에 매개변수가 제공되지 않으면 함수 내부의 인수값은 undefined으로 설정된다. 함수에 매개변수를 제공할 필요가 없을 수도 있고, undefined 값을 의도적으로 사용할 수도 있다. 이런 경우에는 타입 애너테이션의 : 앞에 ?를 추가해 매개변수가 선택적이라고 표시할 수 있다. 선택적 매개변수에는 항상 | undefined가 유니언 타입으로 추가되어 있다. 아래 코드에서 매개변수 singer는 선택 사항으로 표시된다. 타입은 string | undefined function announceSong(song: string, singer?: string) { console.log(`Song: ${song}`); if (singer) { console.log(`Sin..

상속 하나의 클래스를 만들고, 그 클래스를 물려받는 세부적인 클래스를 만들고 싶을 때 상속을 사용한다. class Department { private employees: string[] = []; constructor(private readonly id: string, private name: string) { } describe(this: Department) { console.log(`Department (${this.id}): ${this.name}`); } addEmployee(employee: string) { this.employees.push(employee); } printEmployeeInformation() { console.log(this.employees.length); conso..

private / public Department라는 클래스를 만들어보자. Department는 name, employees라는 프로퍼티를 가지고 있고, 부서 이름을 출력하는 describe 메서드와 employee를 추가할 수 있는 addEmployee라는 메서드를 포함한다. 마지막에 있는 printEmployeeInformation 메서드는 employees 배열의 정보를 출력한다. class Department { name: string; employees: string[] = []; constructor(n: string) { this.name = n; } describe(this: Department) { console.log('Department: ' + this.name); } addEmpl..

파도 파도 끝이 없는 this의 세계.. 'this'는 일반적으로 메서드를 요청하는 기능을 한다. class Department { name: string; // 키 이름만 정의하고 키가 갖게될 타입 정의 constructor(n: string) { // new 로 인스턴스 만들 때 인자를 받는다. this.name = n; } describe() { console.log('Department: ' + this.name); } } const accounting = new Department('Accounting'); accounting.describe(); const accountingCopy = { describe: accounting.describe }; accountingCopy.describe()..