bkdragon's log

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 함수를 사용할..

화면 하단에서 올라오는 BottomSheet 를 React로 구현해보려고 한다. 데스크탑 해상도에서 Modal 창을 사용하는 화면을 대체할 수 있을 것 같다. 주 기능은 아래와 같다.특정 동작(버튼 클릭 등) 이후 화면 아래에서 올라온다.드래그를 통해 화면 아래로 내릴 수 있다.style은 tailwindcss를 사용했다.주 기능을 토대로 Props의 interface 부터 만들어보자.interface IProps { isOpen: boolean; onClose: () => void; children: React.ReactNode;}보여져야 하는 상황인지 알 수 있는 상태와 다시 안보이게 할 수 있는 함수를 받는다. UI와 기본 기능만 재활용할 것이기 때문에 내부 요소들은 children..