나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/타입스크립트

📌 - HTML - CSS - TypeScript 링크 https://kimyang-sun.github.io/memo-ts/ 설명 [메모 등록 및 삭제] - 링크 이미지, 유튜브 비디오, 직접 작성한 노트를 등록할 수 있습니다. - IMAGE, VIDEO, NOTE 세 개의 버튼을 통하여 등록할 수 있습니다. - 각각 메모의 우측 상단의 ❎ 버튼을 누르면 해당 메모가 삭제됩니다. [메모 드래그 앤 드롭] - 등록된 메모를 마우스로 드래그하여 옮길 수 있습니다. - HTML 드래그 앤 드롭 API를 이용하여 구현하였습니다.

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트로 큐(Queue) 기능을 구현해봤습니다. 큐는 FIFO로 First In First Out, 처음으로 들어온 데이터가 처음으로 나가는 구조입니다. // 큐 추상화 인터페이스 interface Queue { readonly size: number; enQueue(value: string): void; deQueue(): void; search(num: number): string; } // 추가될 노드 타입 생성 type QueueNode = { value: string; next?: QueueNode; } // 큐 클래스 class QueueImpl implements Queue { private _size: number = 0; // _size 값을 외부에서 접근하지 못하게 묶습니다. pr..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트로 스택(Stack) 기능을 구현해봤습니다. 스택은 LIFO로 Last In First Out, 마지막으로 들어온 데이터가 처음으로 나가는 구조입니다. // 스택 추상화 인터페이스 interface Stack { readonly size: number; push(value: string): void; pop(): void; search(num: number): string; } // 추가될 노드 타입 생성 type StackNode = { value: string; next?: StackNode; } // 스택 클래스 class StackImpl implements Stack { private _size: number = 0; // _size 값을 외부에서 접근하지 못하게 묶습니다. priva..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트에서 새로운 타입을 정해줄 수 있는 interface와 Type Alias(타입별칭) 에 대해 공부했습니다. 1. interface // interface interface Snacks { readonly name: string; // readonly는 해당 값이 할당된 후에 수정이 안되도록 합니다. price: number; sale?: boolean; // '?' 선택속성 (있을수도 없을수도 있습니다) } const snack1: Snacks = { name: 'Shrimp crackers', price: 1000 }; const snack2: Snacks = { name: 'Pocachip', price: 1500, sale: true }; interface로 Snacks 라는 과자 타입..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트 타입 추론과 타입 단언에 대해 공부했습니다. inference : 타입 추론으로서 타입을 따로 지정해주지 않아도 타입스크립트에서 똑똑하게 타입을 추론해줍니다. // Type Inference // 타입을 명시하지 않아도 처음 생성시 문자열로 생성이 되어 string으로 타입 추론이 됩니다. let string = 'We are the world!'; string = 100 // 문자열 타입에 숫자를 할당하여 오류가 발생합니다. // 함수의 인자도 마찬가지로 기본값 매개변수가 숫자라면 숫자로 선언됩니다. function write(number = 1000) { return number; // 1000 } write('number'); // 숫자가 아닌 문자열을 넣으면 오류가 발생합니다. ass..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트 Intersection Type에 대해 공부했습니다. 유니온 타입은 여러개의 값중에 하나를 선택하여 사용하는 것이었다면 인터섹션 타입은 반대로 하나를 선택하는것이 아닌 모든 값을 다 합치는 타입입니다. // Intersection Types // 상품이라는 타입을 지정해줍니다. type Item = { name: string; description: string; }; // 가격이라는 타입을 지정해줍니다. type Price = { price: number }; // shopping이라는 함수에는 Item 타입과 Price 타입이 같이 들어가야 합니다. function shopping(product: Item & Price) { console.log(product.name, product.d..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트 유니온 타입에 대해 공부했습니다. 하나의 타입에 여러개의 값을 지정해줄 수 있습니다. 선언할 때, 발생하는 케이스중에서 하나를 선택하면 됩니다. // Union Type type Rating = 'string | number'; // string과 number를 같이 타입으로 지정해줍니다. const first: Rating = 1; function ratingPrint(rating: Rating) { console.log(rating); }; ratingPrint(1); // 1 ratingPrint(일등); // '일등' 기본 예시입니다. 이렇게 하나의 타입에 여러개의 타입이나 값을 지정해줄 수 있습니다. 문자열 그 자체를 선언해줄수도 있어 만약 다른 문자열이 들어가게되면 오류가 발생합니..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트 Enum에 대해 공부했습니다. 값들을 한 곳에 열거하는 타입입니다. // TypeScript enum Stages { Easy = 1, // 1을 설정해주니까 1부터 지정됨 (아무것도 값을 지정해주지 않으면 0부터 순서대로 지정됨) Normal, // 그렇다면 이게 2가됨 Hard, // 3 Hell, // 4 } // 만약 문자열을 할당해준다면 그 다음에 뭐가올지 모르는 상태이기 때문에 직접 하나하나 다 할당해주어야 합니다. // ex Easy = 'easy', Normal = 'normal .... console.log(Stages.Normal); // 2 const stage: Stages = Stages.Normal; // 이렇게도 사용가능 const stage2: string = S..

2021. 1. 26.

코딩 기록/타입스크립트

타입스크립트에서는 배열과 튜플을 선언할 수 있습니다. 배열은 말 그대로 우리가 알고있는 배열이고 튜플은 서로 다른 타입의 데이터를 선언할 수 있는 타입입니다. const numbers: number[] = [1, 10, 100, 1000]; const peoples: string[] = ['Kim', 'Lee', 'Park']; 이렇게 타입 뒤에 []를 붙혀주시거나 const numbers: Array = [1, 10, 100, 1000]; const peoples: Array = ['Kim', 'Lee', 'Park']; Array 이렇게 해주시면 됩니다. 튜플은 서로 다른 타입의 데이터를 선언할 수 있습니다. let challenger: [number, string]; // 이렇게 하나의 변수에 두개..

2021. 1. 25.