bkdragon's log

싱글톤 패턴은 하나의 클래스에 단 하나의 인스턴스만 존재하도록 보장하는 디자인 패턴이다. 이 패턴은 동일한 인스턴스를 공유함으로써 메모리 사용량을 줄이고, 특정 리소스를 여러 객체가 공유해야 할 때 유용하다.싱글톤 패턴 구현 방법타입스크립트로 싱글톤 패턴을 구현하는 방법은 아래와 같다:1. 클래스의 생성자를 private으로 설정하기private 생성자는 외부에서 클래스를 인스턴스화하는 것을 막아준다. 이를 통해 클래스 외부에서는 new 키워드로 새로운 인스턴스를 만들 수 없게 된다.2. 클래스 내부에서 static 변수를 통해 인스턴스를 저장하기static 변수는 클래스 자체에 종속되며, 인스턴스를 한번만 생성한 후 공유할 수 있도록 한다.3. 클래스 메서드를 통해 인스턴스 접근 제공getInstanc..

빌더 패턴은 복잡한 객체를 생성하는 클래스와 표현하는 클래스를 분리하여, 동일한 절차에서도 서로 다른 표현을 생성하는 방법을 제공한다.쉽게 말해 객체를 여러 단계에 걸처 만들 수 있다.구성 요소Director(디렉터): Builder를 사용하여 객체를 생성하는 클래스. 추상 팩토리 패턴의 Client와 비슷한 역할을 한다.Builder(빌더): 객체의 각 부분을 만드는 방법을 정의하는 인터페이스ConcreteBuilder(구체적인 빌더): Builder 인터페이스를 구현하여 실제 객체를 만드는 클래스Product(제품): Builder를 통해 만들어지는 최종 객체예시 코드피자를 예로 들건데, 현실에서도 피자를 주문할 떄 크기를 선택하거나 토핑을 추가하거나 도우를 선택하는 등의 절차가 있을 수 있다.// ..

팩토리 메서드 패턴인스턴스를 생성자 대신 팩토리 클래스의 추상 메서드로 생성하게 하는 패턴. 서브 클래스에서 오버라이드해서 생성 내용을 유연하게 변경할 수 있다.구성 요소Product(제품): 팩토리 메서드에 의해 생성되는 객체의 추상 클래스.ConcreteProduct(구체적인 제품): Product의 구현체.Creator(창조자): 팩토리 메서드를 선언하는 추상 클래스. 실제 인스턴스를 생성하는 추상 메서드를 가진다.ConcreteCreator(구체적인 창조자): Creator의 구현체, 팩토리 메서드를 구현하여 구체적인 인스턴스를 생성한다.예시 코드abstract class Animal { abstract speak(): string;}abstract class AnimalFood { a..

타입스크립트와 자바스크립트의 관계 이해하기타입스크립트는 문법적으로 자바스크립트의 상위집합이다. 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이다. 이 특성은 자바스크립트 코드를 타입스크립트로 마이그레이션하는 데 엄청난 이점이 된다. 모든 자바스크립트 프로그램은 타입스크립트 프로그램이지만 그 반대는 아니다.타입스크립트의 타입 시스템의 주된 목표는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것이다. 타입스크립트를 정적 타입 시스템이라하고 하는 것이 바로 이 특징을 말하는 것이다.타입스크립트는 자바스크립트의 런타임 동작을 모델링한다.const x = 2 + "3";const y = "2" + 3;위 코드는 타입스크립트에서 오류를 발생하지 않는다.타입스크립트 설정 이해하기타입스크립..

프로퍼티가 많은 객체를 useReducer를 통해 상태로 다룰 때 Action의 type과 payload를 적절하게 추론하는 타입을 만들어보려고 한다. 목표는 이러하다 예를 들어 아래와 같은 타입이 있다.type User = { email: string; password: string; name: string; phone: string; age : number; deleted: boolean;};이때 Action 객체의 type은 "update_email", "update_password" .... 가 되고 payload가 그거에 맞게 string, string, number, boolean 이 되게 할 것이다. 추후에 상태 업데이트를 위해 dipatch 함수를 사용할..

화면 하단에서 올라오는 BottomSheet 를 React로 구현해보려고 한다. 데스크탑 해상도에서 Modal 창을 사용하는 화면을 대체할 수 있을 것 같다. 주 기능은 아래와 같다.특정 동작(버튼 클릭 등) 이후 화면 아래에서 올라온다.드래그를 통해 화면 아래로 내릴 수 있다.style은 tailwindcss를 사용했다.주 기능을 토대로 Props의 interface 부터 만들어보자.interface IProps { isOpen: boolean; onClose: () => void; children: React.ReactNode;}보여져야 하는 상황인지 알 수 있는 상태와 다시 안보이게 할 수 있는 함수를 받는다. UI와 기본 기능만 재활용할 것이기 때문에 내부 요소들은 children..

양수 문자열을 반환하는 Absolute 타입을 구현해보았다. type Absolute = `${T}` extends `-${infer F}` ? F : `${T}` 템플릿 리터럴 타입의 막강함을 다시 느꼈다

타입 시스템에서는 배열 타입의 길이를 Type['length'] 로 간단하게 구할 수 있다. 아쉽게도 문자열 타입에는 먹히지 않는다. 그래서 문자열의 길이를 구하려면 배열을 이용해야 한다! type LengthOfString = S extends `${infer F}${infer R}` ? LengthOfString : T['length'] 빈 배열을 처음 파라미터로 받고 재귀적으로 하나씩 쌓아간다음 마지막에 배열의 길이를 반환한다. 풀이가 좀 짧지만 글로 남기는 이유는 타입 시스템에서 사용할 수 있는 테크닉이 꽤 포함되어 있기 때문이다. 1. infer infer 키워드는 조건절에서 타입 추론을 도와준다. 2. 재귀 문자열은 하나씩 줄이고 배열은 하나씩 늘리면서 재귀적으로 들어간다. 3. length ..

as는 타입 단언을 할 수 있는 키워드이다. 컴파일러가 추론 하지 못하는 상황에서 개발자 입장에서 확실하다고 느낄 때 사용할 수 있다. 하지만 실제로 형변환이 일어나는 것은 아니다. 코드의 런타임 동작에는 아무런 영향을 주지 않는다. const number = 10; const showValue = (value : string) => console.log(value); showValue(number as unknown as string); 문제가 있는 부분인데 빨간 줄이 안뜬다! . as는 정말 확실할 때 써야한다. const person: Record = { name: 'bk', age: 27, hobby: 'music', }; const showNumber = (value : number) => co..