분류 전체보기

팩토리 패턴은 이름처럼, 객체를 생성해주는 패턴을 의미합니다. 공장에서 제품들을 찍어내듯이, 코드 상으로 비슷한 객체를 조건에 맞게 찍어냅니다. 팩토리 패턴의 특징 - 상위 클래스는 클래스의 뼈대를 제공한다. ( 추상 클래스를 사용하곤 합니다. ) - 하위 클래스에서 구체적인 정보를 전달해줍니다. - 팩토리 함수 or 팩토리 클래스에서 조건에 맞게 객체를 생성해줍니다. - 상위 클래스에서 주로 로직을 관리하기 때문에 유지보수하기 쉽다는 장점이 있습니다. 타입스크립트를 이용해서 팩토리 패턴 사용해보기 1 ( 추상 클래스 ) type LectureType = 'Database' | 'Algorithm' | 'SelfStudy'; // 상위 클래스 (추상 클래스) abstract class Lecture { ..

디자인 패턴에서 가장 먼저 배우게 되는 싱글톤 패턴입니다. 객체를 생성할 때, 매번 새로운 참조값을 가진 객체를 생성할 수 있는데요. 만약, 같은 객체를 사용해야 한다면 비효율적인 방법이 될 수 있습니다. 싱글톤 패턴을 이용하면, 몇 가지 장점이 있습니다. 싱글톤 패턴을 사용하는 이유 - 하나의 인스턴스를 사용하기 때문에 불필요한 메모리 낭비를 방지 - 하나의 인스턴스로 불필요한 코드를 덜 작성 - 데이터베이스 연결 모듈에 많이 사용한다고 합니다. 타입스크립트를 이용해서 싱글톤 패턴을 만들어보기 2가지 방법을 이용해서 싱글톤 패턴을 코드로 표현해봤습니다. 1. static 변수를 이용해서 구현 2. 일반적인 클래스로 구현 // static 변수를 이용해서 구현 class Singleton { privat..

[ 목차 ]사용자에게 최신 데이터를 보여주려는 노력useQueryuseMutationqueryClient.invalidQueries 사용자에게 최신 데이터를 보여주려는 노력React-Query는 사용자에게 새로운 정보를 보여줄 수 있는 옵션을 제공합니다.  1. Remount컴포넌트 또는 페이지를 다시 mount 했을 때, 새로운 데이터를 갱신합니다.refetchOnMount 옵션을 통해 설정할 수 있으며, default 값은 true입니다. 2. Window refocus윈도우 창을 다시 focus 할 때, 새로운 데이터를 갱신합니다.refetchOnWindowFocus 옵션을 통해 설정할 수 있으며, default 값은 true입니다. 3. Network reconnect네트워크가 다시 연결되면, 새..

[ 목차 ] Query 상태 (Status) StaleTime과 CacheTime 정리 Query 상태 (status) 아래 다섯 가지 상태로 정의되어 있습니다. 1. fetching 2. fresh 3. stale 4. paused 5. inactive 1. fetching QueryFn을 이용해서 데이터를 요청하는 상태입니다. 2. fresh 새로운 데이터를 받은 상태입니다. default로 staleTime이 0으로 정의되어 있는데요. default일 때는, 순간적으로 fresh 상태로 유지됩니다. 3. stale 데이터의 상태가 최신이 아님을 뜻하는 상태입니다. 이 상태일 때는 특정 조건 (windowFocus, remount 등...) 이나 백그라운드 상황에서 QueryFn을 통해 새로운 데이터..

[ 목차 ] 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..

React-Query는 useInfiniteQuery hook을 제공합니다. 문서에도 해당 hook에 대한 API 명세와 사용 방법이 소개되고 있는데요. 공식 문서의 설명이 조금 부족해서 그런지는 모르겠는데, 이해가 되지 않는 부분이 있었고 삽질도 하였습니다. 페이지네이션을 구현한 코드를 정리하였습니다. 비동기 통신 라이브러리로는 axios를 사용하였습니다. // 페이징을 구현한 컴포넌트 import axios from "axios"; import { useInfiniteQuery } from "react-query"; interface PostData { body: string; id: number; title: string; userId: number; } function Test1() { const..