@modern-kit

@modern-kit는 클라이언트 개발에 유용한 리액트 컴포넌트, 커스텀 훅 및 유틸리티 함수, 타입을 제공하는 라이브러리입니다.

클라이언트 개발에 필요한 모듈들을 제공하는 것 뿐만아니라, 다양한 레퍼런스를 제공하기 위한 목적을 갖고 있습니다.

@modern-kit는 Next.js의 SSR(Server Side Rendering)환경에서도 호환되는 등 CJS(CommonJs)환경에서도 호환되기 위해 CJS(CommonJs)와 ESM(ECMAScript Module) 두 포맷을 모두 지원합니다.

@modern-kit은 한국인들의 접근성을 높이고 진입 장벽을 낮추기 위해, 한국어만을 지원합니다. (wip. 영어로 작성된 부분들을 단계적으로 한국어로 교체 할 예정입니다.)

Official Documentation

@modern-kit의 공식 문서는 아래 웹사이트에서 확인하실 수 있습니다

• https://modern-agile-team.github.io/modern-kit

Library

@modern-kit/react

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

Download

npm i @modern-kit/react

yarn add @modern-kit/react

pnpm i @modern-kit/react

Usage

import { useInterval } from '@modern-kit/react';

const App = () => {
  useInterval(() => {
    console.log('interval');
  }, 300);

  return <div>Modern Kit</div>;
}

// SubPath 사용 예시
// tsconfig moduleResolution 옵션이 `node`일 경우
import { useInterval } from '@modern-kit/react/dist/hooks/useInterval';
// tsconfig moduleResolution 옵션이 `bundler`일 경우
import { useInterval } from '@modern-kit/react/hooks/useInterval';

const App = () => {
  useInterval(() => {
    console.log('interval');
  }, 300);

  return <div>Modern Kit</div>;
}

@modern-kit/utils

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

Download

npm i @modern-kit/utils

yarn add @modern-kit/utils

pnpm i @modern-kit/utils

Usage

import { flatten } from '@modern-kit/utils';

const arr = [1, [2, [3, 4], 5]];
const result = flatten(arr); // [1, 2, 3, 4, 5]

// SubPath 사용 예시
// tsconfig moduleResolution 옵션이 `bundler`일 경우
import { flatten } from '@modern-kit/utils/array/flatten';
// tsconfig moduleResolution 옵션이 `node`일 경우
import { flatten } from '@modern-kit/utils/dist/array/flatten';

const arr = [1, [2, [3, 4], 5]];
const result = flatten(arr); // [1, 2, 3, 4, 5]

@modern-kit/types

• 클라이언트 개발에 유용한 유틸 타입들을 제공하는 라이브러리 입니다.

Download

npm i @modern-kit/types

yarn add @modern-kit/types

pnpm i @modern-kit/types

Usage

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를 사용하여 개별 모듈을 불러올 수 있습니다.
• 전체 모듈을 불러오는 것이 아닌 필요한 모듈만 직접 가져오기 때문에 불 필요한 코드를 불러오는 것을 방지할 수 있으며, 번들러가 모듈을 읽고, 식별하는 과정을 최적화 할 수 있습니다.
• 번들러가 개별 모듈을 더 잘 식별할 수 있기 때문에, Tree-shaking이 더욱 효과적으로 동작하도록 개선 할 수 있습니다. 이는 결과적으로 최종 번들 크기를 줄이는데 도움이 됩니다.

// tsconfig moduleResolution 옵션이 `node`일 경우
import { useInterval } from '@modern-kit/react/dist/hooks/useInterval';
// tsconfig moduleResolution 옵션이 `bundler`일 경우
import { useInterval } from '@modern-kit/react/hooks/useInterval';

const App = () => {
  useInterval(() => {
    console.log('interval');
  }, 300);

  return <div>Modern Kit</div>;
}

Next.js 개발 환경 SubPath 사용 차이

SubPath 사용하지 않은 경우

import { flatten } from "@modern-kit/utils";

export default function Home() {
  console.log(flatten([1, [2], [3], [4], [5]]));

  return (
    <div>{}</div>
  );
}

첫 번째 이미지는 SubPath를 사용하지 않은 경우입니다. 전체 모듈에서 flatten을 가져온 경우입니다. 위 이미지와 같이 @modern-kit/utils의 모든 모듈을 불러오는 것을 확인 할 수 있습니다.

SubPath 사용한 경우

// 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을 가져온 경우입니다. 첫 번째 케이스와 다르게 사용하는 @modern-kit/utils의 flatten만 불러오는 것을 확인 할 수 있습니다.

이러한 차이는 개발 서버 성능에 영향을 미칠 수 있습니다.

Lint & Test & build

• root 폴더에서 진행해주세요.
• 패키지 매니저는 yarn berry, Node 버전은 v20을 사용하셔야 합니다.

yarn eslint packages

• 위 명령어를 통해 모든 패키지의 lint 검사를 진행할 수 있습니다.

yarn test

• test 명령어를 통해 vitest와 react-testing-library로 테스트를 진행할 수 있습니다.

yarn typecheck

• typecheck 명령어를 통해 typecheck를 진행할 수 있습니다.

yarn build

• build 명령어를 통해 관리하는 모든 패키지들의 build, 상단의 lint, test, typecheck를 모두 진행합니다.

Benchmark

• @modern-kit/utils의 경우 benchmark 테스트를 진행 할 수 있습니다.
• packages/utils 폴더에서 아래 명령어를 실행하면 전체 benchmark 테스트 코드를 실행 할 수 있습니다.

yarn test:bench

• 개별 benchmark 테스트 코드를 실행하려면 아래와 같이 실행 할 수 있습니다.

yarn test:bench flatten.bench.ts

Documentation

• @modern-kit은 docusaurus를 기반으로 문서화 작업을 진행합니다.

yarn start:docs

• start:docs 명령어를 통해 개발 서버를 실행해 문서 작업을 미리 확인 할 수 있습니다.

yarn build:docs

• build:docs 명령어를 통해 document build를 진행합니다.
• 신규 문서 작업 후 해당 build 작업이 정상적으로 진행되어야 합니다.

Contributing

@modern-kit에 기여해주셔서 감사드립니다! 누구든지 @modern-kit에 기여할 수 있습니다. Contributing Guide

Contributors

License

MIT © Modern Agile. See LICENSE for details.