@modern-kit
@modern-kit는 클라이언트 개발에 유용한 리액트 컴포넌트, 커스텀 훅, 유틸리티 함수, 타입을 제공하는 라이브러리입니다.
단순히 모듈을 제공하는 것을 넘어, 다양한 구현 방식에 대한 레퍼런스 역할도 함께 합니다.
@modern-kit는 Next.js SSR 환경을 비롯한 CJS 환경과의 호환성을 위해 CJS(CommonJS) 와 ESM(ECMAScript Module) 두 포맷을 모두 지원합니다.
공식 문서
@modern-kit의 공식 문서는 아래에서 확인하실 수 있습니다.
패키지
@modern-kit/react
React와 관련된 유용한 컴포넌트와 커스텀 훅을 제공하는 라이브러리입니다.
설치
npm i @modern-kit/react
yarn add @modern-kit/react
pnpm i @modern-kit/react
사용 예시
import { useInterval } from '@modern-kit/react';
const App = () => {
useInterval(() => {
console.log('interval');
}, 300);
return <div>Modern Kit</div>;
};
@modern-kit/utils
클라이언트 개발에 유용한 유틸리티 함수를 제공하는 라이브러리입니다.
설치
npm i @modern-kit/utils
yarn add @modern-kit/utils
pnpm i @modern-kit/utils
사용 예시
import { flatten } from '@modern-kit/utils';
const arr = [1, [2, [3, 4], 5]];
const result = flatten(arr); // [1, 2, 3, 4, 5]
@modern-kit/types
클라이언트 개발에 유용한 유틸 타입을 제공하는 라이브러리입니다.
설치
npm i @modern-kit/types
yarn add @modern-kit/types
pnpm i @modern-kit/types
사용 예시
import { Merge } from '@modern-kit/types';
type A = { a: string; b: number };
type B = { b: string; c: boolean };
type Result = Merge<A, B>;
// { a: string; b: string; c: boolean }
SubPath
@modern-kit/react와 @modern-kit/utils는 SubPath를 통해 개별 모듈을 직접 불러올 수 있습니다.
SubPath를 사용하면 다음과 같은 이점이 있습니다.
- 필요한 모듈만 가져오기 때문에 불필요한 코드 로딩을 방지합니다.
- 번들러가 모듈을 더 정확히 식별할 수 있어 Tree-shaking이 더욱 효과적으로 동작합니다. 결과적으로 최종 번들 크기를 줄이는 데 도움이 됩니다.
- 버전 호환성 문제를 해결할 수 있습니다. 예를 들어
useSyncExternalStore는 React v18 이상에서만 사용 가능한데, React v17 환경에서 전체 모듈을 가져오면 해당 API를 사용하지 않더라도 로딩 시 충돌이 발생할 수 있습니다. SubPath를 사용하면 필요한 모듈만 직접 가져와 이 문제를 해결할 수 있습니다.
// tsconfig moduleResolution 옵션이 `node`일 경우
import { useInterval } from '@modern-kit/react/dist/hooks/useInterval';
// tsconfig moduleResolution 옵션이 `bundler`일 경우
import { useInterval } from '@modern-kit/react/hooks/useInterval';
import { flatten } from '@modern-kit/utils';
export default function Home() {
console.log(flatten([1, [2], [3], [4], [5]]));
return <div>Modern Kit</div>;
}
SubPath를 사용하지 않으면 @modern-kit/utils의 모든 모듈이 함께 로드됩니다.
// tsconfig moduleResolution 옵션이 `node`
import { flatten } from '@modern-kit/utils/dist/array/flatten';
export default function Home() {
console.log(flatten([1, [2], [3], [4], [5]]));
return <div>{}</div>;
}
SubPath를 사용하면 flatten 하나만 로드됩니다. 이러한 차이는 개발 서버 성능에도 영향을 줄 수 있습니다.
개발 환경 설정
- 모든 명령어는 root(src) 폴더에서 실행합니다.
- 패키지 매니저: Yarn Berry (v4+)
- Node 버전: v24+
명령어
yarn eslint packages
모든 패키지의 lint 검사를 실행합니다.
yarn test
vitest와 react-testing-library를 사용한 테스트를 실행합니다.
yarn typecheck
전체 패키지의 타입 검사를 실행합니다.
yarn build
모든 패키지의 빌드와 함께 lint, test, typecheck를 순차적으로 실행합니다.
Benchmark
@modern-kit/utils는 벤치마크 테스트를 지원합니다. packages/utils 디렉토리에서 실행하세요.
# 전체 벤치마크 실행
yarn test:bench
# 개별 벤치마크 실행
yarn test:bench flatten.bench.ts
문서 작업
@modern-kit은 Docusaurus를 기반으로 문서를 관리합니다.
# 한국어 문서 개발 서버 실행
yarn start
yarn start:ko
# 영어 문서 개발 서버 실행
yarn start:en
# 문서 빌드 (신규 문서 작업 후 반드시 확인)
yarn build:docs
Contributing
@modern-kit에 기여해주셔서 감사합니다! 누구나 기여할 수 있습니다.
Contributing Guide
Contributors
License
MIT © Modern Agile. See LICENSE for details.
