![]()
서론사이드 프로젝트에서 카카오톡 공유하기 기능을 구현해야 하는 경우가 생겼는데, 경험을 기록해둡니다.어떤 UI (버튼, 이미지) 를 클릭하면, 카카오톡 API를 통해 카카오톡 앱이 열리고 친구에게 메시지를 공유할 수 있는데요. API를 호출할 때, 특정 정보를 전달하고 이 정보를 메시지 링크에 붙여줍니다.메시지 링크가 열리면 저희 서비스로 이동해서, 서비스에서 이 정보로 특정 액션을 할 수 있습니다. 카카오톡 공유하기 플로우 카카오톡 공유하기 API카카오에 대한 타입정의가 없기 때문에, kakao.d.ts 파일을 만들어 다음과 같은 타입정의를 하였습니다.kakao.d.ts는 tsconfig.json에서 넣어줘서 컴파일러가 타입을 정의할 수 있도록 했습니다. // kakao.d.ts/** ..
![]()
객체를 얕은 복사할 때, 전개 연산자(...)를 많이 사용합니다. 객체 전개 연산자 (Object Spread) 라는 단어처럼 연산자 앞에 객체만 가능할 것이라고 생각했는데요. 아니었습니다. 포스팅 제목과 같은 고민을 하게 된 계기는, 객체 전개 연산자를 특이하게 사용한 코드를 이해하려고 했기 때문인데요. 검색 기능을 제공하는 사이트에서, 필터링 기능을 구현할 때 쿼리 스트링 (URL 파라미터)을 많이 사용하는데, 특정 쿼리를 넘기고 싶지 않을 때가 있습니다. // 쿼리스트링 const query = { name: name, age: age, ...(isCategory && { category: category }) // isCategory 값에 따라 category 쿼리 유무를 결정 }; // 쿼리스트..
![]()
제네릭 타입을 선언해서, 문자열 리터럴 타입으로 추론하도록 하고 싶은 상황이 발생해서 이것저것 시도하다가 찾은 방법을 정리해봅니다. 세 가지 경우를 예시로 정리해보려고 합니다. 1) 함수에 단일값을 받는 경우 2) 함수에 배열 한 개를 받기 3) 함수에 배열 한 개를 받되, 제네릭 타입을 문자열 타입으로 제한하는 경우 1) 함수에 단일값을 받는 경우 // 단일값 function getValue(param: T) { return param } const v1 = getValue('string') // 'string' 타입 const v2 = getValue('ABC') // 'ABC' 타입 단일값을 제네릭으로 지정한 경우, 문자열 리터럴 타입으로 타입 추론을 잘하고 있습니다. 2) 함수에 배열 한 개를 받..
![]()
BFS에 대한 소개 BFS는 Breadh-First-Search의 약자로 너비우선탐색이라고 합니다. 그래프가 주어졌을 때, 노드(Vertex)를 가까운 노드부터 탐색하는 알고리즘입니다. BFS 알고리즘을 구현할 때는 큐와 배열을 사용합니다. 큐는 현재 노드로부터 인접한 노드들을 담아주는 역할을 해줍니다. 배열은 현재 노드를 방문했는지 체크하는 역할로 사용됩니다. 가까운 노드(인접 노드)부터 탐색하기 때문에 A노드에서 B노드까지의 최단거리를 구할 수 있습니다. DFS 알고리즘과 마찬가지로 그래프, 현재노드, 방문여부 정보를 넘겨줌으로써 알고리즘을 구현할 수 있습니다. 알고리즘 1. 시작 노드를 큐에 삽입합니다. 2. 방문하지 않았다면 방문했다고 체크합니다. 3. 큐에서 노드를 제거한 후, 해당 노드의 모든..
![]()
DFS에 대한 소개 DFS는 Depth-First-Search의 약자로, 깊이우선탐색이라고 합니다. 그래프가 주어졌을 때, 노드(또는 정점, Vertex)를 되도록 깊이 탐색하는 알고리즘입니다. DFS 알고리즘을 구현할 때, 스택과 배열을 사용합니다. 재귀함수로 구현하게 되면 재귀함수 자체가 스택 역할을 담당해줍니다. 배열은 노드를 방문했는지를 체크합니다. 노드의 갯수만큼의 크기를 가지고 있습니다. DFS 알고리즘 함수에 다음의 정보를 넘겨줌으로써, 그래프 탐색이 시작됩니다. 1. 2차원 배열로 노드와 간선(Edge)을 구현한 그래프 2. 탐색할 노드 번호 3. 방문 여부를 체크할 배열 알고리즘 1. 노드를 스택에 삽입한다. 2. 방문하지 않았으면 방문했다고 표시한다. 3. 해당 노드의 인접 노드를 탐색..
![]()
큐의 모습 큐의 특징 탐색 시, O(n) 만큼 소요됩니다. 추가, 삭제 시, O(1) 만큼 소요됩니다. 맨 앞의 노드를 head, 맨 뒤의 노드를 tail로 기억합니다. 식당에서 순서를 기다리는 대기열과 비슷합니다. 데이터 노드 구현하기 class Node { value: number; prev: Node | null = null; next: Node | null = null; constructor(value: number) { this.value = value; } } prev, next 프로퍼티가 있습니다. value 프로퍼티로 데이터를 받고 있고, 숫자 데이터만 받기로 정했습니다. * 큐를 이중 연결 리스트를 이용해서 구현했습니다. [ 이중 연결 리스트 개념 ] [Typescript] 자료구조 : ..
![]()
스택의 모습 스택의 특징 탐색 시, O(n) 만큼 소요됩니다. 추가, 삭제 시, O(1) 만큼 소요됩니다. 최상위 노드를 top을 통해 기억하고 있습니다. 접시 쌓는 것과 비슷한 모양을 가지고 있습니다. 데이터 노드 구현하기 class Node { value: number; prev: Node | null = null; next: Node | null = null; constructor(value: number) { this.value = value; } } prev, next 프로퍼티가 있습니다. value 프로퍼티로 데이터를 받고 있고, 숫자 데이터만 받기로 정했습니다. * 이번 글에서는 스택을 이중 연결 리스트를 이용해서 구현하기로 했습니다. * 스택은 단방향 연결 리스트로도 구현 가능합니다만, 편..
![]()
단방향 연결 리스트에 이어서 이번엔 이중 연결 리스트입니다. 단방향 연결 리스트 개념을 보고 오시는 것이 좋습니다 :) [Typescript] 자료구조 : 단방향 연결 리스트 (Singly-LinkedList) 자료구조를 공부할 때, 처음 등장하는 녀석입니다. 연결 리스트. 말 그대로, 데이터 (노드)를 연결해 놓은 것입니다. 단방향 연결 리스트의 모습 단방향 연결 리스트의 특징 탐색 시, O(n) 만큼 소 cheolsker.tistory.com 이중 연결 리스트의 모습 이중 연결 리스트의 특징 탐색 시, O(n) 만큼 소요됩니다. 추가, 삭제 시, O(1) 만큼 소요됩니다. 메모리 상으로 인접하지 않은 데이터들을 연결할 수 있습니다. (공간 효율성이 뛰어남) * 단방향 연결 리스트와 특징이 유사합니다..
![]()
자료구조를 공부할 때, 처음 등장하는 녀석입니다. 연결 리스트. 말 그대로, 데이터 (노드)를 연결해 놓은 것입니다. 단방향 연결 리스트의 모습 단방향 연결 리스트의 특징 탐색 시, O(n) 만큼 소요됩니다. 추가, 삭제 시, O(1) 만큼 소요됩니다. 메모리 상으로 인접하지 않은 데이터들을 연결할 수 있습니다. (공간 효율성이 뛰어남) 다음 노드의 위치(next)를 잃어버린다면, 데이터 손실이 일어날 수 있습니다. 배열과의 비교하기 배열의 특징 탐색 시, O(1) 만큼 소요됩니다. (인덱스로 데이터에 접근 가능) 추가, 삭제 시, O(n) 만큼 소요됩니다. (데이터 추가 or 삭제 후, 모든 데이터를 이동시켜야 하기 때문) 데이터들이 메모리상으로 인접한 위치에 있습니다. 탐색할 일이 많다면 배열, 추..
![]()
팩토리 패턴은 이름처럼, 객체를 생성해주는 패턴을 의미합니다. 공장에서 제품들을 찍어내듯이, 코드 상으로 비슷한 객체를 조건에 맞게 찍어냅니다. 팩토리 패턴의 특징 - 상위 클래스는 클래스의 뼈대를 제공한다. ( 추상 클래스를 사용하곤 합니다. ) - 하위 클래스에서 구체적인 정보를 전달해줍니다. - 팩토리 함수 or 팩토리 클래스에서 조건에 맞게 객체를 생성해줍니다. - 상위 클래스에서 주로 로직을 관리하기 때문에 유지보수하기 쉽다는 장점이 있습니다. 타입스크립트를 이용해서 팩토리 패턴 사용해보기 1 ( 추상 클래스 ) type LectureType = 'Database' | 'Algorithm' | 'SelfStudy'; // 상위 클래스 (추상 클래스) abstract class Lecture { ..
![]()
디자인 패턴에서 가장 먼저 배우게 되는 싱글톤 패턴입니다. 객체를 생성할 때, 매번 새로운 참조값을 가진 객체를 생성할 수 있는데요. 만약, 같은 객체를 사용해야 한다면 비효율적인 방법이 될 수 있습니다. 싱글톤 패턴을 이용하면, 몇 가지 장점이 있습니다. 싱글톤 패턴을 사용하는 이유 - 하나의 인스턴스를 사용하기 때문에 불필요한 메모리 낭비를 방지 - 하나의 인스턴스로 불필요한 코드를 덜 작성 - 데이터베이스 연결 모듈에 많이 사용한다고 합니다. 타입스크립트를 이용해서 싱글톤 패턴을 만들어보기 2가지 방법을 이용해서 싱글톤 패턴을 코드로 표현해봤습니다. 1. static 변수를 이용해서 구현 2. 일반적인 클래스로 구현 // static 변수를 이용해서 구현 class Singleton { privat..
![]()
[ 목차 ] Introduction Mapped Type 사용하기 Pick 유틸타입 살펴보기 Introduction 매핑된 타입(Mapped Type)은 제네릭을 사용해서 다른 타입을 바탕으로 새로운 타입을 만드는 것을 의미합니다. 특징으로는, 1. 중복을 방지할 수 있고, 2. 다른 타입을 참조해서 사용하며, 3. 제네릭과 인덱스 시그니처를 사용한다는 것입니다. Mapped Type 사용하기 /** 예제1 **/ type StudyRoom { name: string; cost: string; availablePeople: number; startTime: Date; endTime: Date; } // StudyRoom 타입을 바탕으로 새로운 타입을 생성 type NewStudyRoom = { [K in..
![]()
[ 목차 ] Introduction 먼저 간단한 클래스 작성 생성자의 타입 표현하기 Introduction 리액트를 사용하면서 클래스를 거의 사용하지 않고, 함수 위주로 사용했었는데요. 그래서인지, 생성자 함수를 타입으로 표현하는 방식이 너무 생소하게 다가왔습니다. 몇 가지 시행착오를 통해, 알아낸 바를 정리하고자 합니다. 먼저 간단한 클래스 작성 class Person { constructor(private name: string, private age: number) {} getName() { return this.name; } getAge() { return this.age; } } const person = new Person("Rabbit", 10); person.getName(); // "Ra..
![]()
[ 목차 ] TS에서의 keyof 연산자 TS에서의 keyof 연산자 자바스크립트에서는 keyof 연산자가 존재하지 않습니다. keyof 연산자는 타입의 키 값들을 유니온 타입으로 반환해줍니다. keyof 연산자 는 객체 타입에 사용할 수 있습니다. interface Rabbit { name: string; age: number; place: string; move: () => void; } type KeyofRabbit = keyof Rabbit; // 테스트 const rabbit1: KeyofRabbit = "age"; // ok const rabbit2: KeyofRabbit = "food"; // error!
![]()
[ 목차 ] JS에서의 typeof 연산자 TS에서의 typeof 연산자 JS에서의 typeof 연산자 자바스크립트에서도 typeof 연산자가 존재합니다. 어떤 값의 type을 string 형태로 반환하는 연산자입니다. const a = typeof 1; // "number" const b = typeof "str"; // "string" const c = typeof false; // "boolean" const d = typeof {}; // "object" const e = typeof []; // "object" const f = typeof function () {}; // "function" const g = typeof null; // "object" -> 주의! const h = typeo..
![]()
[ 목차 ] Introduction 제네릭 맛보기 제네릭 종류 - 함수, 인터페이스, 클래스 제네릭 제약 조건 (constraints) 제네릭 디폴트 파라미터 Introduction 타입스크립트에서 제네릭은 빠질 수 없는 개념이 되었습니다. 유틸함수도 제네릭을 사용하고 있고, API 인터페이스를 작성하거나 함수를 사용할 때도 많이 사용하고 있습니다. 제네릭에 대해서 타입을 위한 함수와 같다는 표현을 사용하는 것도 보았는데요. 제네릭은 타입에 대한 중복을 제거해줄 수 있기 때문에 이런 표현을 사용한 것 같습니다. 제네릭 맛보기 타입스크립트에서 제네릭은 함수, 인터페이스, 클래스 등에 사용할 수 있습니다. 가장 일반적인 방법은 함수에 제네릭을 사용하는 것일 겁니다. function age(value: num..
![]()
타입스크립트 컴파일러에게 컴파일 과정에 해당 모듈을 추가하도록 처리하는 문법입니다. XML 형태의 지시어를 파일의 상단에 위치시켜야 하며, 삼중 슬래시 지시어 선언 이전에 다른 코드가 있으면 주석으로 인식됩니다. 주로 타입 선언(*.d.ts)을 관리할 때 사용하는 것으로 보입니다. /// 위와 같은 형태로 선언할 수 있으며, ...위치에는 프로퍼티 이름과 값이 들어가는데 그 종류에 따라 다르게 동작합니다. // test_types.d.ts /// // test.d.ts declare let a: number; declare let b: string; declare let c: boolean; 트리플 슬래시 지시어는 ts 파일 상단에 위치해야 합니다. // test_types.d.ts declare let..
![]()
Next.js 환경에서 Jest + Cypress를 구축하는 도중에 문제가 발생했습니다. Jest로 만든 테스트 코드 (*.test.ts | tsx) 는 문제없이 타이핑 및 자동완성이 잘 되는데, Cypress로 테스트 코드 (*.spec.ts) 를 작성할 때 타이핑 및 자동완성이 되지가 않습니다. Cypress를 이용한 E2E 테스트 코드는 보통 cypress 디렉토리 내에 작성하게 되는데, cypress 디렉토리 내부의 테스트 코드들이 루트 디렉토리의 tsconfig.json의 설정에 영향을 받고 있기 때문입니다. // /tsconfig.json { "compilerOptions": { ... // 다른 설정 }, "exclude: [ ... // 다른 설정 "cypress" ] } 루트 디렉토리의 ..
