✅ 본 글은 TailwindCSS, Tailwind Variants 라이브러리를 사용하여 작성되었습니다. Tailwind Variants를 통해 재사용할 수 있는 상호작용 상태를 만들어보자 디자인 시스템을 만들면서 여러 가지를 시도해보고 있는데 그 중 하나로 컴포넌트의 상호작용 상태를 어떻게 쉽게 재사용할 수 있을까? 라는 부분이 있었다. 컴포넌트를 만들 때마다 일일이 hover, press에 대한 상태를 정의해주는 것도 힘들었고, 개발 과정에서 수정될 경우 각 컴포넌트에서 이를 일일이 처리해줘야하는 등 문제가 있었기 때문이다.물론 어느 정도 토큰화해서 이러한 점을 개선할 수 있지만, 결국 각 컴포넌트에서 개별로 정의해야하는 점이 불편하다고 생각했다. 이를 해결하기 위한 방법을 처음 본 곳은 구글의 Ma..
🔯 다형성 컴포넌트 시리즈 1. 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) 2. 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 3. 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 부록. 다형성 컴포넌트 개발에 대한 고민 기록 ✅ 다형성 컴포넌트, 어떻게 만들 수 있을까? 다형성 컴포넌트 만들기 게시글은 이미 작성되어 올라가 있는 상태지만, 고민에 대한 기록을 남기는 것이 프로젝트에서 해야할 일이라 생각이 들어 다형성 컴포넌트를 만들면서 했던 고민들을 적어본다. 다형성 컴포넌트를 만들 때 고려했던 사항들은 아래와 같았다. 1. as라는 props를 직접 받아서 해당 태그로 렌더링될 것 2. 렌더링 될 수 있는 태그의 ..
출처 : 백준, https://www.acmicpc.net/problem/16236 16236번: 아기 상어 N×N 크기의 공간에 물고기 M마리와 아기 상어 1마리가 있다. 공간은 1×1 크기의 정사각형 칸으로 나누어져 있다. 한 칸에는 물고기가 최대 1마리 존재한다. 아기 상어와 물고기는 모두 크기를 가 www.acmicpc.net 더보기 먼저, 생각해야 할 부분 1. 먹을 수 있는 물고기의 위치와 거기까지의 거리를 어떻게 찾을지 생각해야한다. 2. 같은 거리의 물고기 중 위 왼쪽에 위치한 물고기를 찾아야한다. 풀이 import sys from collections import deque KEY_SIZE = 'size' KEY_EAT_FISH = 'eatFish' KEY_POINT = 'point' d..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 8 - Readonly 2 `T`에서 `K` 프로퍼티만 읽기 전용으로 설정해 새로운 오브젝트 타입을 만드는 제네릭 `MyReadonly2`를 구현하세요. `K`가 주어지지 않으면 단순히 `Readonly`처럼 모든 프로퍼티를 읽기 전용으로 설정해야 합니다. interface Todo { title: string description: string completed: boolean } const todo: MyReadonly2 = { title: "Hey", description: "foobar", completed: false, } to..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 3 - Omit `T`에서 `K` 프로퍼티만 제거해 새로운 오브젝트 타입을 만드는 내장 제네릭 `Omit`를 이를 사용하지 않고 구현하세요. interface Todo { title: string description: string completed: boolean } type TodoPreview = MyOmit const todo: TodoPreview = { completed: false, } 풀이 type MyOmit = { [P in keyof T as P extends K ? never : P]: T[P] } 대부분은 Pick..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 2 - Get Return Type 내장 제네릭 `ReturnType`을 이를 사용하지 않고 구현하세요. const fn = (v: boolean) => { if (v) return 1 else return 2 } type a = MyReturnType // should be "1 | 2" 풀이 type MyReturnType = T extends (...args: any) => infer ReturnType ? ReturnType : never args는 :을 통해서 파라미터 타입을 지정해주는 반면에 리턴 타입은 바로 infer로 가져..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 898 - Includes JavaScript의 `Array.includes` 함수를 타입 시스템에서 구현하세요. 타입은 두 인수를 받고, `true` 또는 `false`를 반환해야 합니다. type isPillarMen = Includes // expected to be `false` 풀이 type IsEqual = (() => T extends X ? 1 : 2) extends (() => T extends Y ? 1 : 2) ? true : false type Includes = T extends [infer First, ...in..
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 3312 - Parameters 내장 제네릭 ``Parameters``를 이를 사용하지 않고 구현하세요. const foo = (arg1: string, arg2: number): void => {} type FunctionParamsType = MyParameters // [arg1: string, arg2: number] 풀이 type MyParameters any> = T extends (...args: infer Params) => any ? Params : never
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 3060 - Unshift `Array.unshift`의 타입 버전을 구현하세요. type Result = Unshift // [0, 1, 2,] 풀이 type Unshift = T extends [...infer Rest] ? [U, ...Rest] : never
출처: Type Challenges, https://github.com/type-challenges/type-challenges/blob/main/README.ko.md 3057 - Push `Array.push`의 제네릭 버전을 구현하세요. type Result = Push // [1, 2, '3'] 풀이 type Push = T extends [...infer REST] ? [...REST, U] : never infer를 사용해서 ...를 사용해서 배열 내부를 그대로 가져와서 연결하면 된다.
✅ 본 게시글은 스토리북 7.1.0 버전과 TypeScript를 기반으로 작성되었습니다. 잦고 반복되는 디자인 변경은 개발자를 힘들게 해요!디자인 시스템을 개발하면서 가장 힘든 부분은 변경 사항이 발생했을 때 컴포넌트의 UI가 정상적으로 렌더링되는지 확인하는 것이었다.특히나 가장 기본 요소인 색, 여백, 글씨 크기와 같은 요소가 변경될 경우 현재 컴포넌트 뿐만이 아닌 다른 모든 컴포넌트에 영향을 미치기 때문에 이를 일일이 확인해가며 이를 체크하는 것이 너무 힘들었고 시간도 많이 소비되었으며 미처 잡지 못하는 경우 역시 존재했다.때문에 이를 해결할 수 있는 방법이 없을까 테스트 쪽으로 눈을 돌리게 되었고, 거기에서 스토리북의 Visual Test를 통해 이를 해결할 수 있다는 것을 알게 되어 적용해보게 되..
🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 ✅ as 속성을 위한 컴포넌트 문자열 별칭을 정해보자 이번 글은 프로젝트에 적용된 내용도 아니고 그냥 `이런 것도 가능할까?` 라는 생각으로 시도해 본거라 굳이 다형성 컴포넌트를 구성하는데 필요한 내용은 아니다. 아이디어도 심플하고... 가볍게 봐주면 좋겠다. 만약 다형성 컴포넌트를 만들어보고 싶다면 1편을, as 속성을 특정 태그로 제한을 두고 싶다면 2편을 참고하자. 그래서 주제가 뭐냐면, 컴포넌트에 문자열(string) 형태의 별칭을 정해서 as 속성..
