분류 전체보기

선호하는 스타일링 라이브러리에 대한 질문을 받으면, 나는 언제나 '디자인 시스템이 잘 갖춰진 프로젝트라면 tailwindCSS(이하 테일윈드)를, 그렇지 않은 경우라면 moduleCSS를 선택한다'고 답해왔다. 그러나 오늘부터는 이 대답의 결이 조금 달라질 것 같다. 새로운 버전의 테일윈드가 출시되었고, 이 라이브러리의 메인테이너가 내린 많은 결정들이 내 마음에 쏙 들었기 때문이다. Theme variables이전까지만 해도 테일윈드의 클래스를 입맛대로 수정하려면 tailwind.config.ts를 사용해야 했다. 아래는 내가 실제로 작성했던 설정 파일 일부이다. spacing의 값을 rem으로 덮어쓰기 위해 여러 과정을 거치고 있고, [ 이런 ] 어처구니 없는 문제를 맞닥트리기도 했다.import ty..

요즘 프론트 과제를 진행하면서 caro-kann 3 버전을 적극적으로 사용하고 있다. 여러 기능을 미들웨어로 분리하여 번들 크기도 700b대로 줄였고, zustand∙useReducer∙useState 문법을 취사 선택할 수 있다는 점이 나에게는 다른 라이브러리 못지 않은 장점으로 여겨지기 때문이다.며칠 전에도 caro-kann에 reducer와 persist 미들웨어를 결합하여 세션 종료에도 버티는 장바구니 기능을 만들고 있었다. 보통 장바구니에는 product를 보관하고, 장바구니 페이지에서는 보관하고 있는 product를 모두 랜더링한다. 그런 만큼 전역 장바구니 상태는 배열의 형태를 띄는 게 일반적이다.export const useCartStore = create( reducer((state, ..

아래는 전역 상태 관리 라이브러리 Caro-kann의 persist 미들웨어가 사용하는 유틸리티 함수의 타입이다. 각각의 함수는 모두 동일한 파라미터인 storageKey와 storageType을 필요로 하고 있다. GetStorage와 SetStorage는 그 이름 덕분에 무슨 동작을 하는지 쉽게 알 수 있다. 하지만 ExecMigration 타입은 정확히 뭘 하는지, GetStorage와 SetStorage 타입과는 무슨 관련이 있는지 알기 어렵다. 모르는 개발자가 처음 이 타입들을 본다면 ExecMigration와 나머지 두 타입이 관계가 없다고 생각할 지도 모르겠다.type GetStorage: (props: { storageKey: string; storageType: keyof Storag..

라이브러리를 개발하다보면 특정 객체 타입의 프로퍼티는 유지하되, 일부 프로퍼티 값의 타입을 바꿔줘야 하는 경우가 생긴다. 특히 오버라이드 패턴을 사용해 메서드의 일부 동작이 변경되는 경우가 여기 포함된다. 타입스크립트에서는 주로 Omit Pick Partial 등의 유틸리티 타입을 사용해 이런 오버라이드를 구현한다.type ReducerStore = Omit, "setStore"> & { setStore: Dispatcher }하지만 Omit과 & 연산자 등을 사용해 타입을 선언하다보니 이 타입이 뭘 하고 있는 건지 한 눈에 알기가 어렵다. 나는 이러한 문제를 해결하기 위해 ReplacePropertyValue라는 유틸리티 타입을 라이브러리에 도입했다.type ReplacePropertyValue = O..

프로토타입 오버라이드는 JavaScript에서 객체 지향 프로그래밍을 할 때 객체의 동작을 커스터마이징하거나 확장하기 위해 사용하는 기법 중 하나다. JavaScript의 모든 객체는 프로토타입 체인을 통해 부모 객체의 속성과 메서드를 상속받는데, 이때 기본 제공되는 객체의 프로토타입에 새로운 메서드를 추가하거나 기존 메서드를 수정하는 것을 프로토타입 오버라이드라고 부른다. 예를 들어, Array나 String 같은 빌트인 객체의 프로토타입에 새로운 메서드를 추가하면, 해당 타입의 모든 인스턴스에서 이를 사용할 수 있는 것이다.프로토타입 오버라이드는 프로젝트 전반에 걸쳐 상당히 강력한 영향력을 행사한다. 올바르게 사용하면 중복 코드를 줄이고 개발 생산성을 높일 수 있지만, 잘못 사용하면 예기치 못한 동작..

[ Github / NPM ] Utilinent는 SolidJS의 간결하고 직관적인 Control Flow API를 React에 도입하고 발전시켜, 개발자들이 더욱 생산적이고 효율적으로 작업할 수 있도록 돕는 것을 목표로 합니다. React에서 자주 사용되는 패턴과 조건부 렌더링 로직을 컴포넌트로 감싸는 방식으로 재사용성을 높이며, 이를 통해 대규모 프로젝트에서도 코드 스타일을 일관되게 유지할 수 있습니다. 또한, 가독성이 뛰어난 코드를 작성하고 복잡한 로직을 단순화하여 유지보수를 더욱 편리하게 만듭니다. install 및 importnpm i utilinentimport { Show, For, Switch, Match, Mount } from "utilinent" ShowReact에서 조건부 랜더링을 ..

이전에 [ 유틸리티 컴포넌트 : Show & Map ]에서 잠깐 언급했었던 것처럼, 나는 꽤 오래 전부터 여러 조건을 일괄적으로 처리하는 Switch와 Match 컴포넌트를 만들고 싶어했다. 대강 어떻게 만들지에 대한 아이디어는 여럿 있었지만, 실제로 구현하려니 문제가 산더미였다.처음에는 타입스크립트를 사용하려 했다. 그러나 수많은 시행 착오 끝에 나는 [ 타입스크립트에서의 컴포넌트 추론 ]의 결론에 도달할 수 있었고, 타입스크립트를 사용하여 Switch 컴포넌트를 정의하려는 나의 아이디어는 물거품이 되어버렸다. 머리를 열심히 굴려보았지만 방법이 없었다. 나는 런타임에서 에러를 던지는 것으로 스스로와 타협했다. 그렇게 만들어진 Switch 컴포넌트는 아래와 같다. 런타임에서 ReactElement는 객체..

Class파이썬의 클래스는 그 용어가 JS의 클래스와는 조금 다르다. 인스턴스는 동일하지만, 스태틱 메서드를 클래스 메서드라고 부르며, 클래스와 관련은 있지만 내부 변수와는 소통하지 않는 메서드를 스태틱 메서드라고 부른다. JS랑 파이썬이랑 왔다갔다 하면 조금 햇갈리기는 하지만, 신경 쓰면 또 그렇게까지 햇갈릴만한 건 아니다 싶다.class User: count = 0 # 클래스 변수 (JS에서는 스태틱 프로퍼티) @classmethod # 데코레이터는 JS나 Python이나 비슷한듯 def print_number_of_users(cls): # 클래스 메서드 (JS에서는 스태틱 메서드) return cls.count @staticmethod # self나 cls를 쓰지 않는 메서드..

SOLID 원칙은 로버트 C. 마틴이 제창한 객체 지향 프로그래밍의 설계 원칙이다. 이 원칙은 상속, 캡슐화, 다형성, 추상화라는 네 가지 기둥을 실제 코드에 어떻게 적용할지에 대해 설명한다. SOLID라는 용어는 각 원칙의 첫 글자를 따서 만든 약어로, 다섯 가지 원칙은 각각 단일 책임 원칙(SRP), 개방-폐쇄 원칙(OCP), 리스코프 치환 원칙(LSP), 인터페이스 분리 원칙(ISP), 의존성 역전 원칙(DIP)을 의미한다. 이는 객체 지향을 설계를 할 때 코드의 확장성, 유지보수성, 재사용성, 유연성 등을 향상시키기 위해 고려해야 할 중요한 가이드라인을 제공한다. 각각의 원칙은 독립된 개별적인 개념이 아니라, 하나의 목적을 위해 서로 유기적으로 연관되어있다. 단일 책임 원칙(SRP)단일 책임 원칙..

Caro-Kann 2.2 버전을 작성하고 있는데 한 가지 문제에 봉착했다. 전역 상태를 스토리지에 저장할 때는 반드시 한 곳을 지정해야 한다. 가령 로컬 스토리지에 저장한다면 세션 스토리지는 지정할 수 없어야 하고, 그 반대도 성립해야 하는 것이다.type StorageConfig = { local: "???"; session: "???" };이를 런타임에서 잡아내는 것은 쉽지만, 나는 타입스크립트를 사용해서 미리 타입 에러를 던지고 싶었다. 이 문제를 해결하려면 StorageConfig 타입을 정의할 때 두 필드 중 하나가 정해지면, 다른 하나는 허용하지 않도록 강제해야 한다. 유니온 타입과 never를 사용하면 이 요구사항을 만족할 수 있다.예를 들어, local이 정의되면 session은 never..

이 포스트의 내용 대부분은 카토 다이시의 [리액트 훅을 활용한 마이크로 상태 관리]에서도 찾아볼 수 있습니다. 전역 상태 관리 원리를 더욱 깊게 이해하고 싶으시다면 해당 서적을 여러번 읽어보시는 것을 권해드립니다. [ Caro-Kann으로 알아보는 전역 상태 기본 원리 ]에서 이어지는 내용입니다.  useSyncExternalStore우리는 이전 포스트에서 useState를 사용하여 발행-구독 패턴을 처리하였다. 하지만 널리 사용되는 전역 상태 관리 라이브러리들은 useState 대신 useSyncExternalStore 훅을 사용하여 발행-구독 패턴을 처리한다. 이 훅은 리액트 18부터 제공되며, 외부 스토어의 업데이트가 컴포넌트의 리랜더링과 정확하게 동기화되도록 보장해준다. useSyncExterna..

정확히 기억하고 있다. 나는 9월 23일 부산으로 내려가는 기차에서 이 책을 읽기 시작하여 10월 17일에 다 읽었다. 그 사이에 공저자 두 분이 노벨 경제학상을 수상하시게 되어, 나는 졸지에 노벨 경제학상 수상자의 저작을 읽게된 꼴이 되었다. 누가 상 받았다고 책 찾아 읽는 사람이 아닌지라 그냥 재미있는 해프닝이다 싶었다. 이 책에 대해 느끼는 감정이라고는 고작 그 정도에 불과했다. 적어도 12월 3일까지는 말이다. 의 저자 제래드 다이아몬드는 인종의 차이가 아니라 환경적 요인과 지리적 조건이 인류 문명의 발전을 결정짓는 주요한 요소라고 주장했다. 그는 농업, 가축화, 기술, 정치 조직의 발달이 특정 지역에서 더 유리하게 이루어진 이유를 설명하며, 이를 통해 유럽이 세계를 지배하게 된 과정을 분석한다...