하이고니의 개발 스토리

본 게시글은 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..

rotatedArraySearch 문제 부분적으로 오름차순 정렬된 정수의 배열(rotated)과 정수(target)를 입력받아 target의 인덱스를 리턴해야 합니다. 부분적으로 정렬된 배열: 배열을 왼쪽 혹은 오른쪽으로 0칸 이상 순환 이동할 경우 완전히 정렬되는 배열 예시: [4, 5, 6, 0, 1, 2, 3]은 왼쪽으로 3칸 또는 오른쪽으로 4칸 순환 이동할 경우 완전히 정렬됩니다. 그러면 연속된 숫자들만 있다는 거겠네?? 입력 인자 1 : rotated number 타입을 요소로 갖는 배열 rotated[i]는 정수 인자 2 : target number 타입의 정수 출력 number 타입을 리턴해야 합니다. 주의사항 rotated에 중복된 요소는 없습니다. target이 없는 경우, -1을 리턴..

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

Linked List 하나의 노드는 다음 노드만을 가리킨다. 위 linked list의 구조를 작성하면 다음과 같다. // linked list 구조 const list = { head: { value: 22, next: { value: 2, next: { value: 77, next: { value: 6, next: { value: 43, next: { value: 76, next: { value: 89, next: null }, }, }, }, }, }, }, } 이제 원하는 linked list를 구현할 수 있는 코드를 작성해보자. // Linked List 만들기 class Node { // 노드 하나를 정의하는 클래스 constructor(data) { this.data = data; this...

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

SOP(Same-Origin Policy)는 웹 보안에 관한 개념입니다. SOP란, 한 도메인에서 불러온 스크립트가 다른 도메인의 리소스에 접근하지 못하도록 제한하는 것입니다. SOP는 웹 취약점을 차단하고 보안을 강화하는 데 도움이 되며, 개인 정보 유출, 개인 정보 침해, 크로스 사이트 스크립팅 등의 공격에 대한 보호를 제공합니다. CORS(Cross-Origin Resource Sharing)은 웹 브라우저에서 다른 출처의 웹 자원에 접근하는 것을 허용하는 기술입니다. 웹 브라우저는 SOP에 의해 다른 출처의 웹 자원에는 접근할 수 없지만, CORS는 이러한 제약을 풀어줍니다. 서버에서 CORS를 허용하도록 설정하면, 웹 브라우저는 서버에서 제공하는 HTTP 헤더의 정보를 통해서 다른 출처에서 온 ..

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