나만의 npm 라이브러리 만들고 세상과 공유하기

// project-a/utils/date.ts
export function formatDate(date: Date): string {
  return date.toLocaleDateString('ko-KR');
}

// project-b/helpers/date.ts (복사됨)
export function formatDate(date: Date): string {
  return date.toLocaleDateString('ko-KR');
}

// project-c/lib/date.ts (또 복사됨)
export function formatDate(date: Date): string {
  return date.toLocaleDateString('ko-KR');
}

// @myname/date-utils 패키지로 만들면
// 모든 프로젝트에서:
import { formatDate } from '@myname/date-utils';

// 버그 수정은 한 번만, 배포 후 업데이트는 npm update

// tsup.config.ts (선택사항)
import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  splitting: false,
  sourcemap: true,
  clean: true,
});

// src/date.ts
/**
 * Date를 YYYY-MM-DD 형식으로 포맷팅합니다.
 */
export function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

/**
 * 두 날짜 사이의 일수를 계산합니다.
 */
export function daysBetween(date1: Date, date2: Date): number {
  const oneDay = 24 * 60 * 60 * 1000;
  const diffTime = Math.abs(date2.getTime() - date1.getTime());
  return Math.round(diffTime / oneDay);
}

/**
 * 상대적인 시간을 표시합니다 (예: "3분 전")
 */
export function timeAgo(date: Date): string {
  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);

  const intervals = {
    년: 31536000,
    개월: 2592000,
    주: 604800,
    일: 86400,
    시간: 3600,
    분: 60,
  };

  for (const [unit, secondsInUnit] of Object.entries(intervals)) {
    const interval = Math.floor(seconds / secondsInUnit);
    if (interval >= 1) {
      return `${interval}${unit} 전`;
    }
  }

  return '방금 전';
}

// src/string.ts
/**
 * 문자열을 kebab-case로 변환합니다.
 */
export function toKebabCase(str: string): string {
  return str
    .replace(/([a-z])([A-Z])/g, '$1-$2')
    .replace(/[\s_]+/g, '-')
    .toLowerCase();
}

/**
 * 문자열을 camelCase로 변환합니다.
 */
export function toCamelCase(str: string): string {
  return str
    .replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : '')
    .replace(/^[A-Z]/, char => char.toLowerCase());
}

/**
 * 문자열을 자르고 말줄임표를 추가합니다.
 */
export function truncate(str: string, maxLength: number): string {
  if (str.length <= maxLength) return str;
  return str.slice(0, maxLength - 3) + '...';
}

// src/index.ts
export * from './date';
export * from './string';

// 네임스페이스로도 export
import * as DateUtils from './date';
import * as StringUtils from './string';

export { DateUtils, StringUtils };

// 다른 프로젝트에서
import { formatDate, timeAgo, toKebabCase } from '@myname/utils';

const today = new Date();
console.log(formatDate(today)); // "2025-10-13"
console.log(timeAgo(new Date(Date.now() - 3600000))); // "1시간 전"
console.log(toKebabCase("Hello World")); // "hello-world"

// 또는 네임스페이스로
import { DateUtils } from '@myname/utils';
console.log(DateUtils.formatDate(today));

// src/useLocalStorage.ts
import { useState, useEffect } from 'react';

/**
 * localStorage와 동기화되는 상태를 제공합니다.
 *
 * @example
 * const [name, setName] = useLocalStorage('username', 'Guest');
 */
export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T | ((prev: T) => T)) => void] {
  // 초기값 가져오기
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error loading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  // 값 저장
  const setValue = (value: T | ((prev: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(`Error setting localStorage key "${key}":`, error);
    }
  };

  return [storedValue, setValue];
}

// src/useDebounce.ts
import { useState, useEffect } from 'react';

/**
 * 값을 디바운스합니다.
 *
 * @example
 * const [searchTerm, setSearchTerm] = useState('');
 * const debouncedSearch = useDebounce(searchTerm, 500);
 * // debouncedSearch는 500ms 후에 업데이트됨
 */
export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

// src/useClickOutside.ts
import { useEffect, RefObject } from 'react';

/**
 * 요소 외부 클릭을 감지합니다.
 *
 * @example
 * const ref = useRef<HTMLDivElement>(null);
 * useClickOutside(ref, () => setIsOpen(false));
 */
export function useClickOutside(
  ref: RefObject<HTMLElement>,
  handler: (event: MouseEvent | TouchEvent) => void
): void {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      // ref 내부를 클릭하면 무시
      if (!ref.current || ref.current.contains(event.target as Node)) {
        return;
      }
      handler(event);
    };

    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [ref, handler]);
}

// src/index.ts
export { useLocalStorage } from './useLocalStorage';
export { useDebounce } from './useDebounce';
export { useClickOutside } from './useClickOutside';

// src/cli.ts
#!/usr/bin/env node
import { Command } from 'commander';
import chalk from 'chalk';
import ora from 'ora';

const program = new Command();

program
  .name('mytools')
  .description('편리한 CLI 도구 모음')
  .version('1.0.0');

// count 명령어
program
  .command('count <file>')
  .description('파일의 줄 수를 세어줍니다')
  .action(async (file: string) => {
    const spinner = ora('파일을 읽는 중...').start();

    try {
      const fs = await import('fs/promises');
      const content = await fs.readFile(file, 'utf-8');
      const lines = content.split('\n').length;

      spinner.succeed(chalk.green(`✓ ${file}: ${lines} 줄`));
    } catch (error) {
      spinner.fail(chalk.red(`✗ 오류: ${error.message}`));
    }
  });

// init 명령어
program
  .command('init <name>')
  .description('새 프로젝트를 초기화합니다')
  .option('-t, --template <type>', '템플릿 타입', 'basic')
  .action(async (name: string, options: { template: string }) => {
    console.log(chalk.blue(`📦 ${name} 프로젝트를 생성합니다...`));
    console.log(chalk.gray(`템플릿: ${options.template}`));

    const spinner = ora('파일을 생성하는 중...').start();

    // 실제 파일 생성 로직
    await new Promise(resolve => setTimeout(resolve, 1000));

    spinner.succeed(chalk.green('✓ 프로젝트 생성 완료!'));
    console.log(chalk.yellow('\n다음 단계:'));
    console.log(chalk.gray(`  cd ${name}`));
    console.log(chalk.gray(`  npm install`));
    console.log(chalk.gray(`  npm start`));
  });

program.parse();

// src/types.ts
/**
 * 객체의 특정 필드를 필수로 만듭니다.
 */
export type RequiredFields<T, K extends keyof T> = T & Required<Pick<T, K>>;

/**
 * 객체의 특정 필드를 선택적으로 만듭니다.
 */
export type OptionalFields<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

/**
 * 깊은 Partial (중첩된 객체도 모두 선택적으로)
 */
export type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

/**
 * 깊은 Required (중첩된 객체도 모두 필수로)
 */
export type DeepRequired<T> = {
  [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : T[P];
};

/**
 * 함수의 첫 번째 매개변수 타입을 추출
 */
export type FirstParameter<T extends (...args: any[]) => any> =
  T extends (first: infer P, ...args: any[]) => any ? P : never;

/**
 * Promise가 resolve하는 타입을 추출
 */
export type Awaited<T> = T extends Promise<infer U> ? U : T;

/**
 * 배열 또는 단일 값
 */
export type ArrayOrSingle<T> = T | T[];

import type { RequiredFields, DeepPartial } from '@myname/type-utils';

interface User {
  id?: string;
  name: string;
  email?: string;
  profile?: {
    age?: number;
    bio?: string;
  };
}

// id와 email을 필수로 만들기
type RegisteredUser = RequiredFields<User, 'id' | 'email'>;

// 모든 필드를 선택적으로 (중첩 포함)
type UserUpdate = DeepPartial<User>;

// 사용자가 이름을 직접 지어야 하고, 자동완성이 어려움
export default function formatDate(date: Date) { ... }
export default { formatDate, parseDate }; // 여러 함수를 객체로

// 사용할 때
import myDate from '@myname/utils'; // 무슨 함수가 있는지 모름
myDate.formatDate(...); // IDE 자동완성 지원 제한적

// 명확한 이름으로 export
export function formatDate(date: Date) { ... }
export function parseDate(str: string) { ... }
export function daysBetween(d1: Date, d2: Date) { ... }

// 사용할 때
import { formatDate, parseDate } from '@myname/utils'; // 자동완성 지원
// 또는 필요한 것만 import
import { formatDate } from '@myname/utils';

export function deepClone(obj: any): any {
  return JSON.parse(JSON.stringify(obj));
}

export function deepClone<T>(obj: T): T {
  return JSON.parse(JSON.stringify(obj));
}

// 사용 시
const user = { name: 'John', age: 30 };
const cloned = deepClone(user); // cloned는 { name: string, age: number } 타입

export function parseJSON(str: string) {
  try {
    return JSON.parse(str);
  } catch {
    return null; // 사용자가 에러를 알 수 없음
  }
}

export function parseJSON<T = unknown>(str: string): T {
  try {
    return JSON.parse(str);
  } catch (error) {
    throw new Error(`Failed to parse JSON: ${error.message}`);
  }
}

// 또는 Result 타입 사용
export function parseJSONSafe<T = unknown>(
  str: string
): { success: true; data: T } | { success: false; error: string } {
  try {
    return { success: true, data: JSON.parse(str) };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// src/config.ts
console.log('Config loaded!'); // import만 해도 실행됨
document.title = 'My App'; // 브라우저 환경 가정

export const config = { ... };

// src/config.ts
export const config = { ... }; // import해도 부작용 없음

export function setTitle(title: string) {
  // 명시적으로 호출할 때만 실행
  if (typeof document !== 'undefined') {
    document.title = title;
  }
}

// src/index.ts
import lodash from 'lodash'; // 전체 lodash (70KB+)
export { default as _ } from 'lodash';

export function chunk(arr: any[], size: number) {
  return lodash.chunk(arr, size);
}

// src/index.ts
import chunk from 'lodash/chunk'; // 필요한 함수만 (~2KB)

export function chunkArray<T>(arr: T[], size: number): T[][] {
  return chunk(arr, size);
}

// src/index.ts
// ✅ 좋은 예: 개별 export
export { formatDate } from './date';
export { capitalize } from './string';
export { debounce } from './function';

// ❌ 나쁜 예: 재export로 묶기
export * from './date';  // 모든 함수가 번들에 포함될 수 있음

// 전체 import
import { formatDate, capitalize } from '@myname/utils';

// 서브 경로 import (더 작은 번들)
import { formatDate } from '@myname/utils/date';
import { capitalize } from '@myname/utils/string';

// v1.0.0 - 초기 릴리스
export function add(a: number, b: number): number {
  return a + b;
}

// v1.0.1 - PATCH (버그 수정)
export function add(a: number, b: number): number {
  // 버그: NaN 처리 안 됨 → 수정
  if (isNaN(a) || isNaN(b)) {
    throw new Error('Invalid number');
  }
  return a + b;
}

// v1.1.0 - MINOR (기능 추가)
export function add(a: number, b: number): number { ... }
export function subtract(a: number, b: number): number { // 새 함수 추가
  return a - b;
}

// v2.0.0 - MAJOR (breaking change)
export function add(numbers: number[]): number { // API 변경
  return numbers.reduce((sum, n) => sum + n, 0);
}

// src/index.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

import { formatDate, daysBetween } from '@myname/awesome-lib';

const today = new Date();
console.log(formatDate(today)); // "2025-10-13"

const d1 = new Date('2025-01-01');
const d2 = new Date('2025-12-31');
console.log(daysBetween(d1, d2)); // 364

export function getWindowSize(): { width: number; height: number } | null {
  if (typeof window === 'undefined') {
    return null;  // Node.js 환경
  }
  return {
    width: window.innerWidth,
    height: window.innerHeight
  };
}

// 또는 더 명확하게
export function getWindowSize(): { width: number; height: number } {
  if (typeof window === 'undefined') {
    throw new Error('getWindowSize can only be called in browser environment');
  }
  return {
    width: window.innerWidth,
    height: window.innerHeight
  };
}

// @company/design-system
export { Button } from './components/Button';
export { Input } from './components/Input';
export { Modal } from './components/Modal';
export { theme } from './theme';

// private npm registry에 배포
npm publish --registry https://npm.company.com

// @company/api-client
export class ApiClient {
  constructor(private baseURL: string) {}

  async get<T>(path: string): Promise<T> {
    // 공통 인증, 에러 처리, 로깅 등
  }

  async post<T>(path: string, data: unknown): Promise<T> {
    // ...
  }
}

// @company/logger
export class Logger {
  // 공통 로깅 로직
}

// @myapp/plugin-interface
export interface Plugin {
  name: string;
  version: string;
  init(app: App): void;
  onEvent(event: Event): void;
}

// 사용자가 만드는 플러그인
// @username/myapp-plugin-awesome
import type { Plugin } from '@myapp/plugin-interface';

export const plugin: Plugin = {
  name: 'awesome-plugin',
  version: '1.0.0',
  init(app) {
    // 초기화
  },
  onEvent(event) {
    // 이벤트 처리
  }
};

// @myname/lodash-extras
import _ from 'lodash';

// lodash에 없는 기능 추가
export function shuffle<T>(array: T[]): T[] {
  return _.shuffle(array);  // lodash 사용
}

export function randomPick<T>(array: T[], count: number): T[] {
  return _.sampleSize(array, count);
}

// TypeScript 타입 확장
declare module 'lodash' {
  interface LoDashStatic {
    randomPick<T>(array: T[], count: number): T[];
  }
}

_.mixin({
  randomPick
});

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  splitting: false,
  sourcemap: true,
  clean: true,
  minify: true,
});