요근래 electron을 간단한 토이플젝 삼아서 공부하고 있는데이상하게도 electron-builder로 빌드만 쓰면 EBUSY: resource busy or locked, open 어쩌고 오류가 나서 뭐가 문제지 계속 테스트를 해보다가 드디어 해결방법을 발견해서 적어본다. 관련 프로그램 전부 종료, 폴더 닫기, 관리자 권한 실행 등등 할 수 있는걸 다 해봤는데도 안 되길래 뭐지 하다가 발견한 방법인데나의 경우 방법은 진짜 어이가 없게도..... Windows사의 Power Toys를 실행 중이었는데 이를 종료하니까 해결되었다.이 무슨.....너무 어이가 없어서 기록용으로 작성한다.
✅ 본 글은 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 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를 통해 이를 해결할 수 있다는 것을 알게 되어 적용해보게 되..
