분류 전체보기

이 문서는 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)가 결정되는 원칙을 의미한다. 이는 정적으로 결정되며, 코드가 작성되는 위치에 따라 스코프가 결정된다. 즉, 함수가 어떤 코드 블록 내에서 선언..

스테레오타입UML에서 스테레오타입(stereotype)은 클래스, 관계, 속성, 메서드 등에 추가적인 의미를 부여하기 위해 사용된다. 스테레오타입은 >로 감싸서 표기합니다. 다양한 스테레오타입이 있지만, 대표적인 몇 가지는 다음과 같다.classOne: className { shape: class}classTwo: >\nclassName { shape: class}classThree: >\nclassName { shape: class}classFour: >\nclassName { shape: class} 접근 제어자UML에서는 접근 제어자를 나타내기 위해 + - #을 사용한다. 이는 각각 public private protected를 나타낸다. static 접근 제어자의 경우 밑줄을 치고, rea..

D2 Diagram Language는 간결하고 직관적인 다이어그램을 생성할 수 있는 도메인 특화 언어다. D2는 특히 텍스트 기반으로 다이어그램을 그릴 수 있는 기능을 제공하여, 복잡한 그래픽 툴 없이 코드처럼 간단하게 다이어그램을 정의하고, 이를 자동으로 시각화할 수 있다.주로 시스템 아키텍처, 플로우 차트, 클래스 다이어그램 등 다양한 다이어그램을 생성하는 데 사용되며, 코드와 같은 방식으로 다이어그램을 관리할 수 있어 버전 관리가 용이하다. 또한, D2는 매우 간결한 문법을 제공하여, 복잡한 시각적 요소를 쉽게 표현할 수 있도록 돕고, 개발자와 협업하는 데 유리한 도구이다.아래의 명령줄을 입력하여 설치할 수 있으며, VS Code에서는 [ D2 ] 익스텐션을 사용하여 즉각적인 시각적 피드백을 받을..

언젠가 동생이 내게 이런 질문을 한 적이 있다. "형은 어떨 때 type을 쓰고 어떨 때 interface를 써?" 그리고 나는 대부분의 경우 type을 쓴다고 대답했다. 이유는 간단한데, 선언 병합 외에 interface가 더 나은 점을 찾을 수 없었기 때문이었다. 확실히 '기능'만 놓고 본다면 굳이 interface를 쓸 이유가 없어보이기는 한다. 하지만 동생이 다시 한 번 질문을 해온다면 지금의 나는 이렇게 대답할 것 같다. 인터페이스라는 표현을 가장 자주 접하는 건 아마도 API지 않을까 싶다. 특히 나는 웹 개발자라 그런가 REST API가 제일 먼저 떠오르는데, 여기서는 "독립되고 관계가 없는 시스템이 접촉하거나 통신이 일어나는 부분"을 인터페이스라고 부른다. 웹서버와 백엔드 서버는 독립되고 ..

중재자 패턴(Mediator Pattern)은 여러 객체들이 서로 직접 통신하지 않고, 중재자를 통해 상호작용하게 하여 시스템의 결합도를 낮추고 유연성을 제공한다. 예를 들어, 카페에서 손님은 바리스타에게 직접 주문하지 않고, 캐셔라는 중재자를 통해 주문을 전달하여 바리스타가 음료를 준비하게 된다. 음료 전달은 이 반대로 캐셔를 통해 손님에게 전달된다. 이를 통해 객체 간의 결합도를 낮추고 시스템을 더 유연하게 유지할 수 있다. 객체의 관계를 다대다에서 일대다로 변환한다는 점에서는 옵저버 패턴과 비슷하게 느껴질 수 있다. 하지만 옵저버 패턴이 주체 객체의 상태 변화를 여러 옵저버 객체들에게 자동으로 전달하는 데 반해, 중재자 패턴은 여러 객체들이 중재자를 통해 상호작용함으로써 객체들 간의 직접적인 의존성..

메멘토 패턴(Memento Pattern)은 객체의 내부 상태를 캡슐화하여 저장하고, 필요할 때 그 상태를 복원할 수 있게 한다. 상태 변화가 일어날 때마다 그 상태를 메멘토 객체로 저장하여 보관하고, 필요할 경우 복원할 수 있다. 주로 데이터의 손실 방지, 취소, 복구에 사용되기 때문에 적용 시나리오의 범위가 명확하고 제한적이다. 백업 전략을 선택하는 것은 시스템의 요구 사항에 따라 달라지며, 메멘토 패턴에서는 필요에 따라 상태를 저장하는 방식을 조정할 수 있다.다만, 객체 상태를 계속해서 저장하고 관리해야 하므로 메모리나 저장 공간의 사용에 신경을 써야 할 필요가 있다. 이 문제를 해결하기 위해 주로 전체 백업full backup과 증분 백업incremental backup이 사용된다. 전체 백업은 ..

상태 패턴(State Pattern)은 객체의 상태를 클래스로 분리하고, 상태가 변할 때 객체의 동작을 변경할 수 있도록 해 조건문을 사용하지 않고도 상태 전환을 관리할 수 있다. 이를 통해 코드의 복잡도를 낮추고 유지보수성을 높일 수 있으며, 새로운 상태를 추가할 때 기존 코드에 영향을 최소화할 수 있다. 또한, 각 상태를 독립적인 클래스로 분리함으로써 상태별 동작을 명확하게 정의할 수 있어 객체의 책임이 분리되고 코드의 가독성이 향상된다.테이블 조회 방법은 상태 전이 규칙을 데이터로 관리하기 때문에 새로운 상태를 추가할 때 기존 로직을 수정하지 않아도 된다는 장점이 있지만, 상태별 동작이 복잡해질 경우 테이블만으로 이를 표현하기 어려울 수 있다. 반면, 상태 패턴은 각 상태를 개별 클래스로 구현하므로..

책임 연쇄 패턴(Chain of Responsibility Pattern)은 여러 개의 처리 객체들이 연쇄적으로 연결되어 있다. 이 체인은 각 객체가 자신에게 주어진 요청을 처리하거나, 처리할 수 없으면 그 요청을 다음 객체로 넘기면서 요청이 처리될 때까지 순차적으로 전달된다. 이를 통해 시스템에서 요청이 처리될 수 있는 경로를 동적으로 정의할 수 있다. 이 패턴을 활용하면 사용자 입력에 대한 처리 과정에서 여러 단계의 검증을 거쳐야 할 때, 또는 로그 기록, 보안 검사와 같은 처리 과정을 단계적으로 수행해야 할 때 효과적이다.이 포스트에서는 책임 연쇄 패턴을 활용하여 내가 만들고 관리하는 라이브러리 sicilian에서 input value를 검증할 때 쓰는 함수 execValidate를 리팩토링 해보려..