일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 티스토리챌린지
- java
- 웹애플리케이션서버
- JPA
- component
- react-hook-form
- hook
- test
- Redux
- Chakra
- tanstackquery
- RTK
- JavaSpring
- css
- Gin
- ReactHooks
- designpatterns
- javascript
- typescript
- springboot
- backend
- storybook
- frontend
- React
- Spring
- 오블완
- golang
- satisfiles
- go
- Today
- Total
목록Typescript (14)
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..
양수 문자열을 반환하는 Absolute 타입을 구현해보았다. type Absolute = `${T}` extends `-${infer F}` ? F : `${T}` 템플릿 리터럴 타입의 막강함을 다시 느꼈다
문자열에서 특정부분을 모두 찾아 대체하는 타입을 만들어보자. 템플릿 리터럴 타입과 재귀를 이용해줘야 한다. 다만 이때 신경써야 하는 포인트는 이미 대체된 이후로 재귀가 되어야 한다는 것이다. 특정 부분이 대체되고 나서의 문자열에 대체하려는 요소가 새롭게 생겨나도 지나간 부분이기에 무시해줘야 한다. type ReplaceAll = From extends '' ? S : S extends `${infer F}${From}${infer R}` ? `${F}${To}${ReplaceAll}` : S From을 To 대체하고 남은 부분 (R)부터 재귀에 들어가는 것을 볼 수 있다. 간단해보여도 어려운 문제였다!
타입 시스템에서는 배열 타입의 길이를 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..
Upcasting과 Downcasting 부모 자식 상속관계의 클래스가 있을 때, Upcasting : 자식 → 부모 방향으로 형변환하는 것. Downcasting : 부모 → 자식 방향으로 형변환하는 것. 타입에도 적용되는 개념이다. const variable = 10 위 코드를 타입스크립트는 다음과 같은 순서로 추론한다. variable 의 type을 알 수 없다. 10 은 number type을 가지는 literal이다. variable 은 number literal이 할당 되므로 number type이다. const variable = { grade: "a", score: 90 } 위 코드는 다음과 같은 순서로 추론된다. variable 의 type 을 알 수 없다. { grade: "a", sc..
Template Literal Type이란 기존 TypeScript의 String Literal Type을 기반으로 새로운 타입을 만드는 도구이다. 기본 형태를 살펴보자. type World = "world"; type Greeting = `hello ${World}`; // type Greeting = "hello world" 유니온 타입을 이용할 수도 있다. type Hello = 'hello' type Contury = 'Korea' | 'Japan' | 'China' | 'America' type Greeting = `${Hello} ${Contury}`; // 'hello Korea' | 'hello Japan' | 'hello China' | 'hello America' Conditional ..
타입을 정의할 때 입력에 따라서 다르게 정의할 수 있을까? 당연히 가능하다. 대부분의 프로그래밍 언어처럼 타입스크립트에서도 if문의 역할을 하는 기능이 있다. 바로 Conditional types이다. T extends U ? X : Y T타입이 적어도 U타입이라면 X타입 아니라면 Y타입이 된다. 이 개념을 사용한 타입챌린지 문제를 보자. https://github.com/type-challenges/type-challenges/blob/main/questions/00268-easy-if/README.ko.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collecti..