🖼️ React UI

{
  "private": false,
  "publishConfig": {
    "access": "public"
  },
}

📖 개요

react-ui 패키지는 React 컴포넌트 라이브러리로, UI 개발을 단순화하고 재사용 가능한 컴포넌트를 제공해요.

🎯 주요 목표

React 컴포넌트 형태로 사용 가능한 UI 패키지를 새로 추가하고 싶을 때 이 패키지를 복사하여 개발의 시작점으로 삼을 수 있도록, 아래와 같은 목적들을 가지고 작성되었어요:

• Tailwind CSS 기반의 스타일링을 지원하도록 설정
• ShadCN UI 컴포넌트들을 베이스 컴포넌트로 활용할 수 있도록 설정
• Hooks, Context API, 유틸리티 타입 등 React 에서 제공되는 API 들을 활용할 수 있도록 React, ReactDOM 을 외부 의존성으로 설정
• JSX 변환을 지원하기 위한 TypeScript 설정
• 코드 스플리팅 및 트리 쉐이킹을 지원하기 위한 Vite 기반 빌드 설정
• TypeScript 선언 파일 제공을 위한 설정
• npm 공개 배포 시 필요한 각종 package.json 관련 설정

📦 제공 기능

• ShadCN UI: ShadCN UI 관련 모듈을 제공해요.
• Utils: React 애플리케이션에서 사용할 수 있는 UI 관련 유틸리티 함수 모음을 제공해요.
• Components: 다양한 React UI 컴포넌트를 제공해요.
• Constants: 반응형 디자인을 위한 Breakpoints 등과 같은 스타일 관련 상수들을 제공해요.
• Base CSS: 기본 스타일 파일을 제공해요.

🛠️ 빌드 방식 및 주요 설정

이 패키지는 Vite와 TypeScript를 기반으로 멀티 엔트리 라이브러리 형태로 빌드됩니다.
각 기능별로 별도의 엔트리(shadcn-ui, utils, components, constants, base.css)를 제공하며, 빌드 산출물은 dist 폴더에 ES 모듈(.es.js)과 CommonJS(.cjs.js) 형식으로 생성됩니다.

package.json

• exports: 각 기능별 엔트리(shadcn-ui, utils, components, constants, base.css)를 분리해 타입 선언(.d.ts), ES 모듈, CJS 모듈을 모두 제공합니다.
• publishConfig: "access": "public"으로 npm 공개 배포가 가능하도록 설정되어 있습니다.
• files: 빌드 산출물(dist)만 패키지에 포함되도록 지정합니다.
• peerDependencies: react, react-dom을 외부 의존성으로 명시하여, 프로젝트에서 직접 설치하도록 요구합니다.
• scripts: Vite와 TypeScript를 활용한 빌드, 타입 체크, 테스트 등 다양한 개발 스크립트가 정의되어 있습니다.

vite.config.ts

• 멀티 엔트리 빌드: runWithGlob 유틸을 활용해 src 폴더 내의 각 엔트리 파일을 자동으로 감지하여 빌드 엔트리로 등록합니다.
• 라이브러리 모드: Vite의 라이브러리 모드를 사용해 ES/CJS 포맷으로 각각 빌드합니다.
• 타입 선언: vite-plugin-dts로 각 엔트리별 타입 선언 파일을 자동 생성합니다.
• 경로 별칭: vite-tsconfig-paths로 TypeScript 경로 별칭을 지원합니다.
• 외부 의존성: react, react-dom, react/jsx-runtime은 번들에 포함하지 않고 외부 의존성으로 처리합니다.

tsconfig.json

• 모듈 해석: "moduleResolution": "bundler"로 번들러 친화적인 모듈 해석을 사용합니다.
• 타입 지원: 최신 ECMAScript, DOM, React 관련 타입을 지원하도록 설정되어 있습니다.
• JSX: "jsx": "react-jsx"로 React 17+ JSX 변환을 지원합니다.
• 엄격 모드: 타입 검사 및 린트 관련 옵션이 엄격하게 적용되어 있습니다.
• 경로 별칭: tsconfig.json에서 정의된 경로 별칭을 사용하여 코드 가독성을 높입니다.