🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 ✅ 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 ⚠️ 본 게시글은 이론적으로 검증된 방법이 아닌 시행착오 끝에 구현되는 방법을 찾아 기술한 글로 잘못되거나 정확하지 않은 내용을 포함할 수 있습니다. 다형성 컴포넌트에서 As 속성을 제한해보자 지난 글에서는 as 속성에 따라 다르게 렌더링되는 다형성 컴포넌트를 어떻게 만드는지 살펴봤었다. 그런데 새로운 요구사항이 등장했다. 음...그런데 Button 컴포넌트가 button 태그나 a 태그로만 렌더링 되게 할 수는 없나요? 물론 타입을 2개를 만든다던가 ..
✅ 본 게시글은 스토리북 7.1.0 버전과 TypeScript를 기반으로 작성되었습니다. Storybook으로 컴포넌트를 문서화해보자 치스톡에서 디자인 시스템을 만들면서 신경쓰고 있는 부분 중 하나가 스토리북 활용이다. 스토리북은 컴포넌트를 서비스 로직과 독립된 UI를 실행, 테스트하는 용도로도 사용할 수 있지만, 컴포넌트를 설명하기 위한 문서로도 사용할 수 있다. 오늘은 이 문서 용도에 집중에서 스토리북으로 어떻게 컴포넌트 문서를 작성할 수 있는지 알아보려고 한다. 1️⃣ Autodocs & JSDoc로 문서 작성하기 - `'autodocs'` 태그 스토리북은 컴포넌트를 자동으로 문서화해주는 기능을 가지고 있다. 바로 autodocs 기능인데 이는 스토리북의 메타 정보에 tag에 `'autodocs'`..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 533 - Concat JavaScript의 `Array.concat` 함수를 타입 시스템에서 구현하세요. 타입은 두 인수를 받고, 인수를 왼쪽부터 concat한 새로운 배열을 반환해야 합니다. type Result = Concat // expected to be [1, 2] 풀이 type Concat = T extends readonly [...infer A] ? U extends readonly [...infer B] ? [...A, ...B] : never : never; extends와 infer를 통해서 T와 U 내부의 타입들을..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 268 - If 조건 `C`, 참일 때 반환하는 타입 `T`, 거짓일 때 반환하는 타입 `F`를 받는 타입 If를 구현하세요. `C`는 `true` 또는 `false`이고, `T`와 `F`는 아무 타입입니다. type A = If // expected to be 'a' type B = If // expected to be 'b' 풀이 type If = C extends true ? T : F; extends를 이용한 조건문 연습 문제인 듯 하다.
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 189 - Awaited Promise와 같은 타입에 감싸인 타입이 있을 때, 안에 감싸인 타입이 무엇인지 어떻게 알 수 있을까요? type ExampleType = Promise type Result = MyAwaited // string 풀이 type Thenable = { then: (_: (_:T) => any) => any } type MyAwaited = T extends Thenable ? U extends Thenable ? MyAwaited : U : never type MyAwaited = T extends { then..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 43 - Exclude `T`에서 `U`에 할당할 수 있는 타입을 제외하는 내장 제네릭 `Exclude`를 이를 사용하지 않고 구현하세요. type Result = MyExclude // 'b' | 'c' 풀이 type MyExclude = T extends U ? never : T; 타입스크립트의 타입시스템은 유니온 타입을 분배시켜 처리한다. 예를 들어 `'a' | 'b' | 'c' extends 'a'`라면 이는 `'a' extends 'a' | 'b' extends 'a' | 'c' extends 'a'`로 처리된다. 따라서 `My..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 18 - Length of Tuple 배열(튜플)을 받아 길이를 반환하는 제네릭 Length를 구현하세요. type tesla = ['tesla', 'model 3', 'model X', 'model Y'] type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT'] type teslaLength = Length // expected 4 type spaceXLength = Length // expected 5 풀이 type Length = T['..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 14 - First of Array 배열(튜플) `T`를 받아 첫 원소의 타입을 반환하는 제네릭 `First`를 구현하세요. type arr1 = ['a', 'b', 'c'] type arr2 = [3, 2, 1] type head1 = First // expected to be 'a' type head2 = First // expected to be 3 풀이 type First = T extends [infer U, ...unknown] ? U : never `infer`는 `extends`와 함께 쓰이며 타입을 추출해서 뒤에서 다시 ..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 11 - Tuple to Object 배열(튜플)을 받아, 각 원소의 값을 key/value로 갖는 오브젝트 타입을 반환하는 타입을 구현하세요. const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const type result = TupleToObject // expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'} 풀이 type TupleToObject = { [P in ..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 7 - Readonly T의 모든 프로퍼티를 읽기 전용(재할당 불가)으로 바꾸는 내장 제네릭 Readonly를 이를 사용하지 않고 구현하세요. interface Todo { title: string description: string } const todo: MyReadonly = { title: "Hey", description: "foobar" } todo.title = "Hello" // Error: cannot reassign a readonly property todo.description = "barFoo" // Error: ..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 4 - Pick T에서 K 프로퍼티만 선택해 새로운 오브젝트 타입을 만드는 내장 제네릭 Pick을 이를 사용하지 않고 구현하세요. interface Todo { title: string description: string completed: boolean } type TodoPreview = MyPick const todo: TodoPreview = { title: 'Clean room', completed: false, } 풀이 type MyPick = { [Property in K]: T[Property]; } K가 T 타입의 key..
Create Issue Branch로 이슈 브랜치를 자동으로 만들어보자 깃허브는 Issue의 Development 항목을 통해서 이슈 브랜치를 만들 수 있는 기능을 제공한다. 하지만.... 이게 좀 여러모로 불편한 점들이 있다. prefix 설정이라거나, 이슈 이름으로 그대로 브랜치를 만들어서 이름을 영어로 적어야한다거나...등등 그래서 오늘은 깃허브 액션 맛보기 겸 Create Issue Branch를 통해서 이슈에 브랜치를 자동으로 생성해보려한다. Create Issue Branch 왜 쓰나요? 앞서 말했듯, 깃허브에서는 이미 이슈를 대상으로 브랜치를 만들 수 있는 기능을 제공한다. 하지만 이슈 이름을 그대로 브랜치로 만들어버리기 때문에 특정 규칙으로 브랜치 이름을 만들고 싶다면 커스텀 하는 것이 불..
