시작하기

요구사항

패키지 선택 가이드

사용 목적에 따라 필요한 패키지만 설치합니다.

React 테이블 컴포넌트를 사용하는 경우 (가장 일반적)

# npm
npm install @mycrm-ui/react-table

# yarn
yarn add @mycrm-ui/react-table

# pnpm
pnpm add @mycrm-ui/react-table

@mycrm-ui/react-table은 내부적으로 @mycrm-ui/table에 의존하므로 별도 설치가 필요 없습니다.

npm install @mycrm-ui/core

npm install @mycrm-ui/table

npm install @mycrm-ui/core @mycrm-ui/table @mycrm-ui/react @mycrm-ui/react-table

Peer Dependencies

@mycrm-ui/react-table과 @mycrm-ui/react는 React를 peer dependency로 요구합니다. 프로젝트에 React가 없다면 함께 설치해야 합니다.

npm install react react-dom
npm install @mycrm-ui/react-table

패키지 간 의존성

@mycrm-ui/react-table
  └── @mycrm-ui/table       (자동 설치)
  └── react, react-dom      (peer, 직접 설치 필요)

@mycrm-ui/react
  └── react, react-dom      (peer, 직접 설치 필요)

@mycrm-ui/table             (의존성 없음)
@mycrm-ui/core              (의존성 없음)

TypeScript 설정

별도의 타입 패키지 없이 각 패키지에 타입 선언이 포함되어 있습니다.tsconfig.json의 모듈 해석 방식을 확인하세요.

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "ESNext",
    "strict": true
  }
}

moduleResolution: "node"도 동작하지만 "bundler" 또는 "node16" 이상을 권장합니다.

ESM / CJS 지원

모든 패키지는 ESM과 CJS 형식을 모두 제공합니다. 번들러가 자동으로 적절한 형식을 선택합니다.

dist/index.js    — ESM (import)
dist/index.cjs   — CJS (require)
dist/index.d.ts  — TypeScript 타입 선언

설치 확인

설치 후 아래 코드로 정상 동작을 확인합니다.

import { formatDate } from '@mycrm-ui/core'
import { Table } from '@mycrm-ui/react-table'

console.log(formatDate(new Date(), 'YYYY-MM-DD'))