bkdragon's log

빌더 패턴은 복잡한 객체를 생성하는 클래스와 표현하는 클래스를 분리하여, 동일한 절차에서도 서로 다른 표현을 생성하는 방법을 제공한다.쉽게 말해 객체를 여러 단계에 걸처 만들 수 있다.구성 요소Director(디렉터): Builder를 사용하여 객체를 생성하는 클래스. 추상 팩토리 패턴의 Client와 비슷한 역할을 한다.Builder(빌더): 객체의 각 부분을 만드는 방법을 정의하는 인터페이스ConcreteBuilder(구체적인 빌더): Builder 인터페이스를 구현하여 실제 객체를 만드는 클래스Product(제품): Builder를 통해 만들어지는 최종 객체예시 코드피자를 예로 들건데, 현실에서도 피자를 주문할 떄 크기를 선택하거나 토핑을 추가하거나 도우를 선택하는 등의 절차가 있을 수 있다.// ..

팩토리 메서드 패턴인스턴스를 생성자 대신 팩토리 클래스의 추상 메서드로 생성하게 하는 패턴. 서브 클래스에서 오버라이드해서 생성 내용을 유연하게 변경할 수 있다.구성 요소Product(제품): 팩토리 메서드에 의해 생성되는 객체의 추상 클래스.ConcreteProduct(구체적인 제품): Product의 구현체.Creator(창조자): 팩토리 메서드를 선언하는 추상 클래스. 실제 인스턴스를 생성하는 추상 메서드를 가진다.ConcreteCreator(구체적인 창조자): Creator의 구현체, 팩토리 메서드를 구현하여 구체적인 인스턴스를 생성한다.예시 코드abstract class Animal { abstract speak(): string;}abstract class AnimalFood { a..

Specification명세, 조건이라는 뜻으로 복잡한 데이터 검색 조건을 간단하고 유연하게 구현할 수 있는 Spring Data JPA의 기능이다.public interface Specification { Predicate toPredicate(Root root, CriteriaQuery query, CriteriaBuilder cb);}Specification은 Predicate를 반환하는 toPredicate라는 함수를 가지는 인터페이스이다. Predicate는 아래에서 설명할 JPA의 Criteria API에서 사용하는 쿼리의 조건을 정의하는 객체이다. 즉 Specification은 Predicate을 추상화하여 사용하는 것이다.Criteria API 란?JPA(Java Persistence..

공식문서에서는 Decorator 는 Story 을 감싸는 것이라고 설명한다.Decorator 를 사용하면 레이아웃을 잡거나 Story 에서 특정 컨텍스트를 공유하게 하는 것이 가능하다.zustand 전역 상태가 불필요하게 모든 Story가 아닌 특정 story 내에서만 유지되게 해보자.export const Default: Story = { name: "Default", parameters: { withZustand : true },};parameters 에 withZustand 라는 임의의 키를 추가하고 true 값을 설정해줬다.import { useEffect } from "react";import { useStore } from "@/hooks/useStore";impo..

Compound Components 패턴이란? (합성 컴포넌트)여러 컴포넌트를 논리적으로 그룹화하여 관련 컴포넌트들을 함께 사용하는 패턴HTML의 와 관계와 유사React Children API란?React Children API는 컴포넌트의 자식 요소들을 다루기 위한 유틸리티 메서드들의 집합이다.주요 메서드React.Children.map각 자식 요소에 대해 함수를 실행하고 새로운 배열을 반환한다.null이나 undefined는 무시된다.React.Children.forEachmap과 비슷하지만 새로운 배열을 반환하지 않는다.각 자식에 대해 함수 실행만 한다.React.Children.count자식 컴포넌트의 총 개수를 반환한다.null과 undefined도 포함해서 계산한다.React.Childre..

Storybook 은 페이지와 UI 컴포넌트를 독립적으로 테스트 할 수 있는 라이브러리이다. 개발중인 컴포넌트의 모습을 전체 앱을 실행하지 않아도 확인할 수 있다. 디자이너와 개발자, 개발자와 개발자의 협업에 큰 도움이 된다.최근 회사에서 공통으로 사용될 표준 컴포넌트와 유용한 훅스를 개발중인데 이것을 github packages 에 배포하고 컴포넌트는 Storybook과 Chromatic을 통해 배포해서 공유했다.주요 개념StoryStorybook 에서는 Story 라고하는 개념을 사용한다. 이는 컴포넌트의 렌더링된 상태를 캡쳐한 것이다.컴포넌트는 다양한 Props를 가질 수 있다. Props 에 따라 모양이 변하거나 사용법이 달라질 수 있다. 하나의 컴포넌트에 여러 Story가 존재할 수 있고 이것들..

웹 서버와 웹 애플리케이션 서버는 웹 기반 애플리케이션을 제공하는 데 중요한 역할을 한다. 두 서버는 서로 다른 기능을 수행하며, 종종 함께 사용된다.초기 웹은 주로 정적 HTML 페이지로 구성되어 있었으며, 이러한 페이지를 제공하기 위해 웹 서버가 개발되었다. 그러나 웹 애플리케이션의 복잡성이 증가함에 따라, 동적 콘텐츠를 생성하고 비즈니스 로직을 처리할 수 있는 웹 애플리케이션 서버의 필요성이 대두되었다. 이러한 서버는 데이터베이스와의 상호작용을 통해 사용자 맞춤형(동적) 콘텐츠를 제공할 수 있게 되었다.이제 각각을 더 자세히 알아보자.웹 서버 (Web Server)기능:주로 정적 콘텐츠(HTML, CSS, JavaScript, 이미지 등)를 클라이언트에게 제공하는 역할을 한다.클라이언트의 요청을 받..

하이버네이트(Hibernate)와 JPA(Java Persistence API)는 자바 애플리케이션에서 데이터베이스와 상호작용하기 위한 ORM(Object-Relational Mapping) 기술이다. 이 두 가지는 서로 밀접하게 관련되어 있지만, 약간의 차이가 있다.JPA (Java Persistence API)표준 인터페이스: JPA는 자바에서 ORM을 위한 표준 인터페이스를 제공한다. 즉, 특정 구현체에 종속되지 않고, 다양한 ORM 프레임워크에서 사용할 수 있는 공통 API를 정의한다.POJO 기반: JPA는 일반 자바 객체(POJO)를 데이터베이스 테이블에 매핑한다.주요 기능: 엔티티 관리, 트랜잭션 관리, 쿼리 언어(JPQL) 등을 제공한다.하이버네이트 (Hibernate)JPA 구현체: 하이..

타입스크립트와 자바스크립트의 관계 이해하기타입스크립트는 문법적으로 자바스크립트의 상위집합이다. 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이다. 이 특성은 자바스크립트 코드를 타입스크립트로 마이그레이션하는 데 엄청난 이점이 된다. 모든 자바스크립트 프로그램은 타입스크립트 프로그램이지만 그 반대는 아니다.타입스크립트의 타입 시스템의 주된 목표는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것이다. 타입스크립트를 정적 타입 시스템이라하고 하는 것이 바로 이 특징을 말하는 것이다.타입스크립트는 자바스크립트의 런타임 동작을 모델링한다.const x = 2 + "3";const y = "2" + 3;위 코드는 타입스크립트에서 오류를 발생하지 않는다.타입스크립트 설정 이해하기타입스크립..

프로퍼티가 많은 객체를 useReducer를 통해 상태로 다룰 때 Action의 type과 payload를 적절하게 추론하는 타입을 만들어보려고 한다. 목표는 이러하다 예를 들어 아래와 같은 타입이 있다.type User = { email: string; password: string; name: string; phone: string; age : number; deleted: boolean;};이때 Action 객체의 type은 "update_email", "update_password" .... 가 되고 payload가 그거에 맞게 string, string, number, boolean 이 되게 할 것이다. 추후에 상태 업데이트를 위해 dipatch 함수를 사용할..