@modern-kit

Packages

클라이언트 개발을 위한 3가지 핵심 패키지를 제공합니다

@modern-kit/react

React와 관련된 유용한 컴포넌트와 커스텀 훅을 제공하는 라이브러리입니다.

✓ 60+ Custom Hooks

✓ Reusable Components

✓ SSR Compatible

@modern-kit/utils

클라이언트 개발과 관련된 유용한 유틸리티 함수를 제공하는 라이브러리입니다.

✓ Tree-shakable

✓ 100% Type Safe

✓ Zero Dependencies

@modern-kit/types

유용한 유틸리티 타입들을 제공하는 라이브러리입니다.

✓ Advanced Types

✓ Type Utilities

✓ Better DX

Quick Start

3단계로 바로 시작하세요

Install

원하는 패키지를 설치하세요

yarn

yarn add @modern-kit/react
yarn add @modern-kit/utils
yarn add -D @modern-kit/types

npm

npm install @modern-kit/react
npm install @modern-kit/utils
npm install -D @modern-kit/types

pnpm

pnpm add @modern-kit/react
pnpm add @modern-kit/utils
pnpm add -D @modern-kit/types

Import

필요한 함수나 훅을 불러오세요

import { useToggle } from '@modern-kit/react';
import { debounce } from '@modern-kit/utils';

📂 SubPath Import도 지원합니다

import { useToggle } from '@modern-kit/react/useToggle';
import { debounce } from '@modern-kit/utils/common/debounce';

Use

간단한 API로 바로 사용하세요

function App() {
  const [isOpen, toggle] = useToggle();
  
  const handleSearch = debounce((value) => {
    console.log('Search:', value);
  }, 300);
  
  return <div>...</div>;
}

SubPath Imports

사용하지 않는 코드를 줄이고, 꼭 필요한 기능만 불러와 패키지 용량을 줄이세요

Full Import📦 Larger Bundle

// 전체 패키지에서 import
import { useToggle, useDebounce } from '@modern-kit/react';
import { debounce, throttle } from '@modern-kit/utils';

SubPath Import📦 Smaller Bundle

// 필요한 모듈만 개별 import
import { useToggle } from '@modern-kit/react/hooks/useToggle';
import { debounce } from '@modern-kit/utils/common/debounce';

⚡

개발 서버 성능 향상

필요한 모듈만 불러오기 때문에 불필요한 코드를 방지하고, 번들러가 모듈을 읽고 식별하는 과정을 최적화할 수 있습니다

🌳

효과적인 Tree-shaking

번들러가 개별 모듈을 더 잘 식별할 수 있어 Tree-shaking이 더욱 효과적으로 동작하며, 최종 번들 크기를 줄이는데 도움이 됩니다

🔧

버전 호환성 해결

React v17 환경에서 v18 전용 훅을 사용하지 않고도 다른 기능을 사용할 수 있는 등, 버전 제약 없이 필요한 모듈만 선택 가능합니다