분류 전체보기

프론트엔드 개발자들 모인 자리에 가서 '어떤 스타일링 라이브러리 좋아하세요?'하고 물어보면 못해도 30분은 할 이야기가 생긴다. 내 경우에는 여러번 밝힌 바와 같이 TailwindCSS와 ModuleCSS를 선호한다. 하지만 내 선호를 밝히면 늘 돌아오는 질문이 있다. '그것들은 동적 스타일링하기 불편하지 않아요?'하고.요즘 사용자를 늘려가고 있는 Vanila-extract나 이제는 죽어버린 StyledComponent와 비교하면 앞서 언급한 두 라이브러리는 확실히 동적 스타일링에 취약하다. 특히 TailwindCSS는 빌드 과정에서 사용된 클래스 이름만 추출해서 최종 CSS를 생성하는 'content scanning' 과정이 필요한데, 이 때문에 아래와 같이 동적으로 클래스 이름을 조합하거나 조건부로 ..

이전에 [ 분배 법칙에서의 타입 추론 컨텍스트 ] 포스트를 통해 나는 타입스크립트에서 분배 법칙이 일어날 때 그 컨텍스트가 유지된다는 것을 확인했고, 이를 기반으로 복잡한 조건부 타입에서도 원하는 타입 추론을 이끌어낼 수 있다는 점을 알게 되었다. 그런데 Caro-Kann 다음 버전의 persist migration을 처리하기 위한 MigrationPipe 타입을 설계하는 중에 한 가지 이상한 현상을 발견하게 되었다. 내가 만든 상태 관리 라이브러리 Caro-Kann은 persist 버전 migration을 아래와 같이 처리하고 있다. persist 버전이 몇 개 없다면 괜찮겠지만, 버전이 조금만 늘어나도 정확한 migration을 담보할 수 없는 상황이다. 게다가 이전 버전들이 어떤 구조로 되어있는지 ..

프론트엔드 개발을 하다 보면 컴포넌트의 props로 number 타입을 받을 때가 많다. 하지만 단순히 number 타입만 지정하면 값의 범위를 제한할 수 없다는 점이 아쉽다. 예를 들어, 페이지네이션의 currentPage는 1 이상의 값만 허용해야 하고, 슬라이더의 value는 최소/최대 값을 벗어나지 않아야 한다. 이를 보완하기 위해 TypeScript의 타입 시스템을 활용해 특정 범위 내의 숫자만 허용하는 유틸리티 타입 IsInRange를 만들어야겠다고 생각했다. 처음에는 아래와 같이 재귀적으로 타입을 호출하며 범위 내에 특정 숫자 리터럴 타입이 존재하는지를 검사했다. 이러한 방법은 논리적으로 문제가 없지만, 실제로는 몇 가지 하자가 존재한다. 우선 범위가 1000이 넘어가버리면 콜스택이 폭발해버..

유니온 타입의 분배 법칙TypeScript에서 제네릭 타입의 자리에 유니온 타입이 오게 되면, 타입 연산 ─ 주로 조건부 타입, 맵드 타입, 템플릿 리터럴 타입, 스프레드 연산 등 ─ 과 결합될 때 분배 법칙(distributive law)이 적용된다. 이는 제네릭 타입이 유니온 타입을 받을 경우, 개별 요소에 대해 조건부 타입이 각각 평가된다는 의미이다. 예를 들어, 다음과 같은 조건부 타입을 고려해 보자. 위 코드에서 T에 "hello" | 42가 들어가면, 단순히 string과 비교하는 것이 아니라 각 요소가 개별적으로 평가된다. 이를 naked 타입이라고도 부른다.type Example = T extends string ? number : boolean;type Result = Example;//..

TypeScript에서 두 개의 타입이 겉보기에는 동일하지만, 실제로 비교하면 다르게 평가되는 경우가 있다. 예를 들어, 다음 두 타입을 비교해보자.type A = { x: string, y: string };type B = { x: string } & { y: string }; 두 타입 A와 B는 직관적으로 같아 보인다. 하지만 TypeScript는 { x: string, y: string }과 { x: string } & { y: string }을 동일한 타입으로 간주하지 않는다. 이를 확인하기 위해 두 타입이 완전히 동일한지 판별하는 유틸리티 타입 IsEqual을 만들어보자.type IsEqual = (() => T extends X ? 1 : 2) extends (() => T extends Y..

리액트를 배우다 보면 자연스럽게 훅(Hook)에 대해 접하게 된다. useState, useEffect 같은 기본적인 훅을 사용하며 컴포넌트의 상태를 관리하고, 생명주기를 다루는 방법을 익히게 된다. 동시에 리액트에서는 훅을 사용할 때 반드시 지켜야 할 몇 가지 규칙이 있으며, 이를 어기면 예기치 않은 오류가 발생할 수 있다는 이야기를 듣게 된다. 리액트 공식 문서에서도 이를 강조하고 있다. 훅은 최상위에서만 호출해야 하며 조건문이나 반복문 안에서는 사용할 수 없다. 반드시 리액트 함수 내에서만 호출해야 하며 클래스 컴포넌트에서는 호출할 수 없다.도전적인 개발자라면 주어진 규칙에 무조건적으로 순응하지 않는다. 대신, 그 규칙이 반드시 지켜야 할 절대적인 원칙인지, 아니면 단순한 관례인지 직접 검증해본다...

이 문서는 sicilian@3.0.8를 기반으로 작성되었습니다 sicilian은 전역 상태를 기반으로 동작하는 form 상태 관리 도구입니다. 타입스크립트를 지원하며 React.js 18 버전 이상에서 사용할 수 있습니다. 프론트엔드 분야에서 form 상태 관리 도구로 널리 쓰이는 react-hook-form은 ref를 기반으로 동작합니다. 이 때문에 컴포넌트를 forwardRef로 감싸거나, 라이브러리에서 제공하는 useFormContext를 사용해야 합니다. React.js를 사용하는 개발자로서 이러한 제약 사항이 여러모로 불편하게 느껴졌습니다.sicilian은 이러한 불편함을 해결하기 위해 전역 상태를 기반으로 개발되었습니다. 이는 sicilian이 각각의 input을 state로 관리하며, 제어 ..

이 문서는 sicilian@3.0.8을 기반으로 작성되었습니다.sicilian@3.0.0의 기본적인 문법은 [ 여기 ]에서 확인하실 수 있습니다. 전역 상태 기반 form 관리 라이브러리 sicilian은 프론트엔드에서 작성하게 되는 form의 형태를 크게 세 가지로 분류합니다. static form, dynamic form, 그리고 dynamic input이 그것입니다. 각각의 form이 어떤 형태를 갖는지 설명하기 전에, 우선은 프론트엔드에서 가장 일반적인 형태의 form인 static form을 sicilian으로 구현해보겠습니다. static form정적 서식은 form이 어떤 특정 조건에 의해 생성되거나 하지 않으며, 내부의 input 종류도 고정적인 경우를 말합니다. 정적 서식의 대표적인 예시..

Slot 패턴은 React에서 부모 컴포넌트가 자식 요소를 직접 감싸지 않고, 자식 요소 자체가 부모의 역할을 하도록 만드는 기법이다. 이를 통해 불필요한 래퍼 태그를 제거하면서도 부모의 스타일이나 이벤트 핸들러를 그대로 자식에게 전달할 수 있다. 핵심 원리는 React.cloneElement()를 사용하여 자식 요소를 복사하고, 필요한 props를 추가하는 것이다.import { cloneElement, isValidElement, ReactNode } from "react";const Slot = ({ children, ...props }: { children?: ReactNode }) => { if (!isValidElement(children)) { throw new Error("Slot ..

Next.js page router에서 서버 상태는 보통 리액트 쿼리를 사용하여 관리하는데, 이걸 어떻게 사용하는지는 개발자마다 조금씩 다른 듯하다. 내 경우는 아래와 같이 다섯 단계에 걸쳐 컴포넌트에 데이터를 넣어주고 있다. 각각의 단계는 한 줄로 정의되는 최소한의 책임을 구현하며, 이를 통해 백엔드 인터페이스가 변경되거나 엔드포인트가 확장되어도 유연하게 대응할 수 있다.  FetcherFetcher 클래스에서는 데이터 가져오는 가장 기본적인 로직을 정의한다. 아래에서는 AXIOS를 사용하였지만, GraphQL을 사용해서 구현할 수도 있다. 기본적으로 Fetcher 클래스는 Query 클래스와 Mutation 클래스에 상속하기 위한 것이지만, 필요하다면 Fetcher 그 자체를 가져다 써야 할 수도 있..

이전에 [ 합성 컴포넌트 패턴과 동적 프로퍼티 패턴 ] 포스트에서 나는 컴포넌트를 보다 유연하게 구성하고 재사용할 수 있도록 여러 하위 컴포넌트를 조합하여 만든 컴포넌트라고 소개했다. 이는 리액트 구 문서의 [ 합성 vs 상속 ]에서 제시된, 컴포넌트 내부에서 컴포넌트를 호출하는 대신 children을 포함한 다양한 props를 통해 다른 컴포넌트를 합성하는 방법에 근거한 것이었다.그런데 모 회사의 면접 도중에 '그럼 모든 리액트 개발자들은 합성 컴포넌트 패턴을 쓰는 거 아닌가요?' 하는 질문을 받았다. 나는 하위 컴포넌트를 얼마나 잘게 분해하여 재사용하는지를 이야기하였으나 '잘은 모르지만 제가 알고 있는 합성 컴포넌트 패턴은 상태를 공유하는 패턴으로 알고 있다'는 말이 돌아왔다. 내게 있어서 합성 컴포..

렉시컬 스코프라는 단어를 처음 접했을 때, 나는 별 생각 없이 이것이 '렉시컬 환경에 따른 스코프 체인에 대한 것'이라고 생각했다. 때문에 모 회사의 면접에서 렉시컬 스코프를 설명하라는 질문에 부끄럽게도 스코프 체인에 대한 내용만 읊어버리고 말았다. 면접이 끝나고 이 두 개념이 다른 것이라는 말을 들었지만, 왜 다른 건지 뭐가 다른 건지 어떻게 다른 건지는 알 수 없었다. 이후 코어 자바스크립트와 YDKJSY를 읽으며 이 두 개념이 비슷하지만 확실히 다르다는 사실을 알게 되었다. 렉시컬 스코프는 변수와 함수가 어디에서 선언되었는지에 따라 그 유효 범위(scope)가 결정되는 원칙을 의미한다. 이는 정적으로 결정되며, 코드가 작성되는 위치에 따라 스코프가 결정된다. 즉, 함수가 어떤 코드 블록 내에서 선언..