분류 전체보기

CSS를 다루다 보면 뷰포트 크기에 따라 유동적으로 변화하는 레이아웃이나 폰트 크기를 구현해야 하는 경우가 많다. 이때 반응형 디자인을 유연하게 만들어주는 함수들이 바로 min(), max(), clamp()이다. 이 함수들은 각각 최소값, 최대값, 그리고 범위를 지정한 선호값을 설정할 수 있도록 도와주며, CSS 속성에서 숫자 단위를 계산할 수 있는 기능을 제공한다.기존에는 미디어 쿼리로 복잡하게 처리하던 작업들도 이 함수들을 사용하면 훨씬 간결하고 직관적으로 구현할 수 있다. 특히 clamp() 함수는 하나의 속성 값에 최소값, 선호값, 최대값을 한 번에 설정할 수 있어 반응형 타이포그래피나 요소 크기 조절에 매우 유용하다. min() 함수는 여러 개의 값 중 가장 작은 값을 선택한다. 주로 widt..

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

이 문서는 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이 사용된다. 전체 백업은 ..