분류 전체보기

제어 반전(Inversion of Control, IoC)은 SOLID 원칙 중 하나인 의존성 역전 원칙(Dependency Inversion Principle, DIP)을 구현하는 핵심 개념이다. 제어 반전에서는 객체 생성과 실행 흐름을 제어하는 주체가 개발자가 아니라 프레임워크나 외부 컨테이너로 넘어가게 된다. 즉, 원래는 개발자가 직접 객체를 만들고 메서드를 호출했지만, 제어 반전을 적용하면 이 제어권이 역전되어 개발자가 아닌 다른 주체(라이브러리, 이벤트 루프, 프레임워크 등)가 객체를 관리하고 필요한 시점에 실행하게 된다. 이를 통해 코드의 결합도를 낮추고 확장성과 테스트 용이성을 높일 수 있다.제어 반전을 달성하기 위해 네 가지 방법이 주로 사용된다. 첫 번째는 의존성 주입(Dependency..

객체 지향 프로그래밍은 코드의 재사용성과 유지보수성을 높이기 위해 다양한 설계 원칙을 제공한다. 그중 클래스 상속(Class Inheritance)과 클래스 합성(Class Composition)은 객체들 간의 관계를 정의하고, 코드의 유연성과 확장성을 높이는 중요한 개념이다. 두 접근법은 유사한 목적을 가지고 있지만, 문제를 해결하는 방식에 차이가 있다.클래스 상속은 부모 클래스의 속성과 메서드를 자식 클래스가 물려받는 방식으로, 코드의 중복을 줄이고 계층적인 관계를 표현하는 데 유용하다. 반면, 합성은 객체들이 다른 객체를 포함하여 새로운 기능을 구현하는 방식으로, 더 나은 유연성을 제공한다.최근에는 상속 대신 합성을 더 자주 사용하자는 이야기가 종종 나오고 있으며, 심한 경우 상속은 코드의 품질을 ..

자바스크립트는 객체 지향 프로그래밍을 지원하기 위해 다양한 키워드와 수단을 지속적으로 추가해나가고 있다. 이러한 변화는 개발자들이 복잡한 객체 구조를 다룰 때 가독성과 유지보수성을 높이고, 캡슐화를 보다 쉽게 구현할 수 있도록 돕는다. 특히, #를 사용한 프라이빗 멤버 변수는 기존의 약속된 네이밍 관례(예: _로 시작하는 변수명)를 대체하며, 접근 제어를 언어 차원에서 명확히 보장한다는 점에서 큰 의의를 가진다. 이러한 기능들은 자바스크립트를 단순한 스크립팅 언어에서 벗어나 대규모 애플리케이션 개발에도 적합한 언어로 발전시키는 데 중요한 역할을 하고 있다.그러나 한편으로는 이러한 설계가 개발자들에게 오해를 불러일으킬 여지가 있다. #를 사용하기만 하면 캡슐화가 완벽하게 보장된다고 착각하는 경우가 그것이다..

요즘 나는 아래와 같이 다섯 단계에 걸쳐 컴포넌트에 데이터를 넣어주고 있다. 각각의 단계는 한 줄로 정의되는 최소한의 책임을 구현하며, 이번 포스트를 통해 추상 클래스 Fetcher 내에서 어떻게 options를 정의하고 있는지와 그것을 각 클래스 Repository에서 어떻게 사용하는지에 이야기해보고자 한다.axios.instance of graphql.client // 백엔드 호출 방법=> abstract class Fetcher // 백엔드 호출 로직 및 options 함수 정의=> class Repository extends Fetcher // 도메인 별 queryFactory 및 repository 패턴 구현=> useAdaptor // 백엔드 인터페이스와 프론트 인터페이스를 매개=> react..

객체지향 프로그래밍(OOP)에서 추상 클래스와 인터페이스는 코드의 구조를 명확히 하고 재사용성을 높이기 위해 사용된다. 두 개념 모두 클래스 간의 일관성을 유지하고, 개발자들이 특정 규칙을 따르도록 강제하는 데 사용되지만 그 역할과 사용 목적에는 분명한 차이가 있다. abstract class객체지향에서 추상 클래스는 인스턴스화할 수 없으며 상속만 가능하다. 즉, new 예약어를 통해 추상 클래스의 객체를 정의할 수 없는 것이다. 추상 클래스는 공통적인 속성과 동작을 정의하면서도, 일부 메서드는 구현하지 않아 자식 클래스에서 구현하도록 강제한다. 이를 통해 공통 기능을 공유하면서도 유연하게 세부 동작을 다르게 가져갈 수 있다. 또한 속성(상태)를 포함할 수 있기에 클래스 간 기본 데이터를 제공할 수 있다..

선호하는 스타일링 라이브러리에 대한 질문을 받으면, 나는 언제나 '디자인 시스템이 잘 갖춰진 프로젝트라면 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 같은 빌트인 객체의 프로토타입에 새로운 메서드를 추가하면, 해당 타입의 모든 인스턴스에서 이를 사용할 수 있는 것이다.프로토타입 오버라이드는 프로젝트 전반에 걸쳐 상당히 강력한 영향력을 행사한다. 올바르게 사용하면 중복 코드를 줄이고 개발 생산성을 높일 수 있지만, 잘못 사용하면 예기치 못한 동작..

이 문서는 caro-kann@3.0.3을 기반으로 작성되었습니다. caro-kann은 내부적으로 useSyncExternalStore 훅을 사용해 작성된 전역 상태 관리 도구입니다. 타입스크립트를 지원하며 Next.js와 React.js에서 사용할 수 있습니다. useState와 유사한 문법을 채택하고 있기에 React.js에 익숙한 개발자라면 누구나 쉽게 사용할 수 있습니다. what's new in caro-kann@3.0.0새로운 버전의 caro-kann은 내부 코드 구조를 개선하고, 트리 셰이킹 등의 방법을 적극적으로 도입하였습니다. 그 결과 2.2.0 버전과 비교하여 번들 크기가 최대 6배 가까이 줄어들었습니다. 이 과정에서 StoreContext가 제거되었으며 useDerivedStore는 u..

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