React Router의 메타 정보 저장소, Handle리액트 라우터를 사용하면서, 한 번 쯤은 권한 인증이나 역할 체크, 아니면 공통 레이아웃에 대한 고민을 해 본 적 있을 것이다.나 역시도 회사에서 리액트 라우터를 사용하면서, 이런 부분에 대한 고민을 마주친 적이 많았다. 예를 들어 로그인 여부가 필요한 라우팅은 어떻게 처리할지, 모바일 UI에서 헤더의 타이틀을 어떻게 바꿔줄지, 아니면 중첩된 라우팅 사이에서 헤더-푸터 레이아웃의 존재 여부를 쉽게 관리할 수 없을지 말이다. 그런데 이런 문제를 개선할 수 있는 방법을 최근에 발견하게 되었는데 바로 vue-router의 meta 필드였다. 우연히 본 블로그에서 vue-router의 경우, meta 속성을 통해 로그인 권한을 관리하는 것을 보고 `이렇게 ..
요근래 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 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를 사용해서 ...를 사용해서 배열 내부를 그대로 가져와서 연결하면 된다.
