# JSR 패키지 설치 예시
npx jsr add @std/path
deno add @std/path

# npm
npx jsr add @my/a
 
# yarn
yarn dlx jsr add @my/a
 
# pnpm
pnpm dlx jsr add @my/a
 
# Deno
deno add @my/a

{
  "name": "my-project",
  "type": "module",
  "dependencies": {
    "@my/a": "npm:@jsr/my__a@^0.4.0"
  }
}

@jsr:registry=https://npm.jsr.io

// deno.json에서 import map 설정
{
  "imports": {
    "@std/path": "jsr:@std/path@^0.224.0"
  }
}
 
// 코드에서 사용
import { join } from "@std/path";

{
  "name": "@my/awesome-lib",
  "version": "1.0.0",
  "exports": "./mod.ts"
}

# Deno CLI 사용
deno publish
 
# npx 사용
npx jsr publish

// tsup.config.ts - CSS 번들링 활성화
import { defineConfig } from "tsup";
 
export default defineConfig({
  entry: ["src/index.ts"],
  format: ["cjs", "esm"],
  dts: true,
  // CSS 번들링 (실험적 기능)
  injectStyle: true, // CSS를 JS에 주입
});

npm install tsup -D

import { defineConfig } from "tsup";
 
export default defineConfig({
  entry: ["src/index.ts"],
  format: ["cjs", "esm"], // CommonJS와 ESModule 동시 출력
  dts: true, // .d.ts 파일 생성
  clean: true, // 빌드 전 출력 디렉토리 정리
  minify: true, // 코드 압축
  sourcemap: true, // 소스맵 생성
});

npx tsup

dist/
├── index.js
├── index.mjs
├── chunk-ABCD1234.js    # 자동 생성된 청크
├── chunk-EFGH5678.js    # 자동 생성된 청크
└── index.d.ts

// tsup.config.ts
export default defineConfig({
  // ...
  splitting: false, // 코드 스플리팅 비활성화
});

import { cosmiconfig } from "cosmiconfig";
 
// 'myapp'이라는 이름으로 구성 파일 탐색
const explorer = cosmiconfig("myapp");
 
// 탐색 순서:
// 1. package.json의 "myapp" 필드
// 2. .myapprc
// 3. .myapprc.json
// 4. .myapprc.yaml
// 5. .myapprc.yml
// 6. .myapprc.js
// 7. .myapprc.ts
// 8. myapp.config.js
// 9. myapp.config.ts
 
const result = await explorer.search();
// result = { config: { ... }, filepath: '/path/to/.myapprc' }

// 직접 구현한 isEmpty
function isEmpty(value: unknown): boolean {
  if (value == null) return true;
  if (Array.isArray(value) || typeof value === "string") {
    return value.length === 0;
  }
  if (typeof value === "object") {
    return Object.keys(value).length === 0;
  }
  return false;
}
 
// lodash의 isEmpty
import _isEmpty from "lodash/isEmpty";

import { Bench } from "tinybench";
import _isEmpty from "lodash/isEmpty";
 
// 직접 구현한 isEmpty
function isEmpty(value: unknown): boolean {
  if (value == null) return true;
  if (Array.isArray(value) || typeof value === "string") {
    return value.length === 0;
  }
  if (typeof value === "object") {
    return Object.keys(value).length === 0;
  }
  return false;
}
 
// 테스트 데이터
const testData = {
  emptyArray: [],
  emptyObject: {},
  emptyString: "",
  filledArray: [1, 2, 3, 4, 5],
  filledObject: { a: 1, b: 2, c: 3 },
};
 
const bench = new Bench({ time: 1000 }); // 1초 동안 반복 실행
 
bench
  .add("isEmpty (직접 구현)", () => {
    isEmpty(testData.emptyArray);
    isEmpty(testData.emptyObject);
    isEmpty(testData.emptyString);
    isEmpty(testData.filledArray);
    isEmpty(testData.filledObject);
  })
  .add("_isEmpty (lodash)", () => {
    _isEmpty(testData.emptyArray);
    _isEmpty(testData.emptyObject);
    _isEmpty(testData.emptyString);
    _isEmpty(testData.filledArray);
    _isEmpty(testData.filledObject);
  });
 
await bench.warmup(); // 워밍업
await bench.run(); // 벤치마크 실행
 
console.table(bench.table());

┌─────────┬──────────────────────┬───────────────┬────────────────────┬──────────┬─────────┐
│ (index) │ Task Name            │ ops/sec       │ Average Time (ms)  │ Margin   │ Samples │
├─────────┼──────────────────────┼───────────────┼────────────────────┼──────────┼─────────┤
│ 0       │ isEmpty (직접 구현)  │ '37,037,037'  │ 0.02699            │ '±0.82%' │ 37037   │
│ 1       │ _isEmpty (lodash)    │ '26,455,026'  │ 0.03781            │ '±0.91%' │ 26455   │
└─────────┴──────────────────────┴───────────────┴────────────────────┴──────────┴─────────┘

import { defineConfig } from "vitest/config";
 
export default defineConfig({
  test: {
    benchmark: {
      include: ["**/*.bench.ts"],
      reporters: ["default"],
    },
  },
});

import { bench, describe } from "vitest";
import _isEmpty from "lodash/isEmpty";
 
// 직접 구현한 isEmpty
function isEmpty(value: unknown): boolean {
  if (value == null) return true;
  if (Array.isArray(value) || typeof value === "string") {
    return value.length === 0;
  }
  if (typeof value === "object") {
    return Object.keys(value).length === 0;
  }
  return false;
}
 
// 테스트 데이터
const testData = {
  emptyArray: [],
  emptyObject: {},
  emptyString: "",
  filledArray: [1, 2, 3, 4, 5],
  filledObject: { a: 1, b: 2, c: 3 },
};
 
describe("isEmpty 성능 비교", () => {
  bench("isEmpty (직접 구현)", () => {
    isEmpty(testData.emptyArray);
    isEmpty(testData.emptyObject);
    isEmpty(testData.emptyString);
    isEmpty(testData.filledArray);
    isEmpty(testData.filledObject);
  });
 
  bench("_isEmpty (lodash)", () => {
    _isEmpty(testData.emptyArray);
    _isEmpty(testData.emptyObject);
    _isEmpty(testData.emptyString);
    _isEmpty(testData.filledArray);
    _isEmpty(testData.filledObject);
  });
});

npx vitest bench

 ✓ isEmpty.bench.ts > isEmpty 성능 비교
   name                      hz        min        max       mean        p75        p99       p995      p999      rme  samples
 · isEmpty (직접 구현)  37,123,456   0.0234    0.1523    0.0269    0.0256    0.0412    0.0523    0.0891   ±0.82%    18562   fastest
 · _isEmpty (lodash)    26,543,210   0.0312    0.2134    0.0377    0.0356    0.0567    0.0723    0.1234   ±0.91%    13272
 
 BENCH  Summary
 
   isEmpty (직접 구현) - isEmpty.bench.ts > isEmpty 성능 비교
     1.40x faster than _isEmpty (lodash)

bench(
  "테스트명",
  () => {
    // 벤치마크 대상 코드
  },
  {
    time: 1000, // 벤치마크 실행 시간 (ms)
    iterations: 100, // 최소 반복 횟수
    warmupTime: 100, // 워밍업 시간 (ms)
    warmupIterations: 5, // 워밍업 반복 횟수
  },
);

npm install -g jscodeshift

import React from "react";
 
function Button({ children }) {
  return <button>{children}</button>;
}

// React를 명시적으로 import하지 않아도 됨 (React 17+)
function Button({ children }) {
  return <button>{children}</button>;
}

// jscodeshift transform 파일
module.exports = function transformer(file, api) {
  const j = api.jscodeshift;
  const root = j(file.source);
 
  // 'react'에서 React를 import하는 구문 찾기
  const reactImports = root.find(j.ImportDeclaration, {
    source: { value: "react" },
  });
 
  // JSX를 사용하는지 확인
  const hasJSX = root.find(j.JSXElement).length > 0;
 
  // React를 직접 참조하는 곳이 있는지 확인 (React.useState 등)
  const hasReactReference =
    root.find(j.MemberExpression, {
      object: { name: "React" },
    }).length > 0;
 
  // JSX만 사용하고 React를 직접 참조하지 않는 경우 import 제거
  if (hasJSX && !hasReactReference) {
    reactImports
      .filter(path => {
        const specifiers = path.node.specifiers;
        // default import만 있는 경우 (import React from 'react')
        return specifiers.length === 1 && specifiers[0].type === "ImportDefaultSpecifier";
      })
      .remove();
  }
 
  return root.toSource();
};

# 단일 파일에 적용
jscodeshift -t remove-react-import.js src/components/Button.jsx
 
# 디렉토리 전체에 적용
jscodeshift -t remove-react-import.js src/
 
# dry-run (실제 변경 없이 미리보기)
jscodeshift -t remove-react-import.js src/ --dry
 
# TypeScript 파일 지원
jscodeshift -t remove-react-import.js src/ --parser=tsx

// propTypes-to-typescript.js
module.exports = function transformer(file, api) {
  const j = api.jscodeshift;
  const root = j(file.source);
 
  // PropTypes import 찾기
  const propTypesImport = root.find(j.ImportDeclaration, {
    source: { value: "prop-types" },
  });
 
  // 컴포넌트의 propTypes 정의 찾기
  const propTypesAssignments = root.find(j.AssignmentExpression, {
    left: {
      property: { name: "propTypes" },
    },
  });
 
  // PropTypes를 TypeScript interface로 변환하는 로직
  // ... (복잡한 변환 로직)
 
  // PropTypes import 제거
  propTypesImport.remove();
 
  // propTypes 할당문 제거
  propTypesAssignments.remove();
 
  return root.toSource();
};

// src/index.ts (배럴 파일)
export * from "./Button";
export * from "./Input";
export * from "./Modal";
export * from "./utils";
// ... 수십 개의 re-export

{
  "name": "my-ui-library",
  "exports": {
    ".": "./dist/index.js",
    "./button": "./dist/components/Button.js",
    "./input": "./dist/components/Input.js",
    "./modal": "./dist/components/Modal.js",
    "./utils": "./dist/utils/index.js"
  }
}

// 사용자 코드
import { Button } from "my-ui-library/button"; // Button만 번들에 포함

{
  "sideEffects": false
}
// 또는 CSS처럼 사이드 이펙트가 있는 파일만 명시
{
  "sideEffects": ["*.css", "*.scss"]
}

{
  "main": "./dist/index.js"
}

{
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./utils": {
      "import": "./dist/utils.mjs",
      "require": "./dist/utils.cjs",
      "types": "./dist/utils.d.ts"
    },
    "./package.json": "./package.json"
  }
}

{
  "exports": {
    ".": {
      "browser": "./dist/browser.js",
      "node": "./dist/node.js",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "default": "./dist/index.js"
    }
  }
}

{
  "packageManager": "pnpm@8.15.0",
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=9.0.0"
  }
}

{
  "browserslist": ["> 1%", "last 2 versions", "not dead", "not ie 11"]
}

# 패키지 크기 확인
npx package-size lodash lodash-es ramda
 
# 의존성 트리 확인
npm ls --all
 
# 번들 크기 분석
npx bundlephobia lodash

□ 직접 구현 가능한가? (100줄 이하라면 직접 구현 고려)
□ 모듈 시스템이 호환되는가? (ESM/CJS)
□ 안전한 패키지인가? (출처, 유지보수 상태, 보안)
□ 최적화됐는가? (번들 크기, 트리 셰이킹)
□ 라이선스가 호환되는가? (MIT, Apache 등)

![npm version](https://img.shields.io/npm/v/my-package) ![npm downloads](https://img.shields.io/npm/dm/my-package) ![license](https://img.shields.io/npm/l/my-package) ![bundle size](https://img.shields.io/bundlephobia/minzip/my-package)

# Changelog
 
All notable changes to this project will be documented in this file.
 
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
## [Unreleased]
 
### Added
 
- 새로운 기능 설명
 
### Changed
 
- 변경된 기능 설명
 
## [1.2.0] - 2026-03-20
 
### Added
 
- `useAsync` 훅 추가 (#123)
- TypeScript 5.0 지원
 
### Changed
 
- `fetchData` 함수의 기본 타임아웃을 5초에서 10초로 변경
 
### Fixed
 
- Safari에서 발생하던 스크롤 버그 수정 (#456)
 
## [1.1.0] - 2026-02-15
 
### Added
 
- SSR 지원 추가
- `retry` 옵션 추가
 
### Deprecated
 
- `legacyMode` 옵션은 다음 메이저 버전에서 삭제 예정
 
### Security
 
- XSS 취약점 수정 (CVE-2026-XXXX)
 
## [1.0.0] - 2026-01-01
 
### Added
 
- 최초 릴리스
- 기본 API 제공 (`create`, `update`, `delete`)
- React 18 지원
 
[Unreleased]: https://github.com/user/repo/compare/v1.2.0...HEAD
[1.2.0]: https://github.com/user/repo/compare/v1.1.0...v1.2.0
[1.1.0]: https://github.com/user/repo/compare/v1.0.0...v1.1.0
[1.0.0]: https://github.com/user/repo/releases/tag/v1.0.0

# conventional-changelog 사용 예시
npx conventional-changelog -p angular -i CHANGELOG.md -s