✅ 본 게시글은 스토리북 7.1.0 버전과 TypeScript를 기반으로 작성되었습니다. 잦고 반복되는 디자인 변경은 개발자를 힘들게 해요!디자인 시스템을 개발하면서 가장 힘든 부분은 변경 사항이 발생했을 때 컴포넌트의 UI가 정상적으로 렌더링되는지 확인하는 것이었다.특히나 가장 기본 요소인 색, 여백, 글씨 크기와 같은 요소가 변경될 경우 현재 컴포넌트 뿐만이 아닌 다른 모든 컴포넌트에 영향을 미치기 때문에 이를 일일이 확인해가며 이를 체크하는 것이 너무 힘들었고 시간도 많이 소비되었으며 미처 잡지 못하는 경우 역시 존재했다.때문에 이를 해결할 수 있는 방법이 없을까 테스트 쪽으로 눈을 돌리게 되었고, 거기에서 스토리북의 Visual Test를 통해 이를 해결할 수 있다는 것을 알게 되어 적용해보게 되..
🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 ✅ as 속성을 위한 컴포넌트 문자열 별칭을 정해보자 이번 글은 프로젝트에 적용된 내용도 아니고 그냥 `이런 것도 가능할까?` 라는 생각으로 시도해 본거라 굳이 다형성 컴포넌트를 구성하는데 필요한 내용은 아니다. 아이디어도 심플하고... 가볍게 봐주면 좋겠다. 만약 다형성 컴포넌트를 만들어보고 싶다면 1편을, as 속성을 특정 태그로 제한을 두고 싶다면 2편을 참고하자. 그래서 주제가 뭐냐면, 컴포넌트에 문자열(string) 형태의 별칭을 정해서 as 속성..
🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 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: ..
