< BACK TO BLOG

λ‚˜μ˜ NPM νŒ¨ν‚€μ§€ λ§Œλ“€κΈ°

πŸ—“οΈ2020-04-25

자주 μ‚¬μš©λ˜λŠ” κΈ°λŠ₯을 Typescript 둜 μž‘μ„±ν•΄μ„œ NPM 에 κ²Œμ‹œν•œ ν›„ λ‹€λ₯Έ ν”„λ‘œμ νŠΈμ—μ„œ μ‚¬μš©ν•˜κ³  μ‹Άμ–΄ NPM 에 νŒ¨ν‚€μ§€λ₯Ό μ–΄λ–»κ²Œ κ³΅κ°œν•˜λŠ”μ§€λ₯Ό ν™•μΈν–ˆμŠ΅λ‹ˆλ‹€.

μ €λŠ” @bbon μŠ€μ½”ν”„λ₯Ό μ‚¬μš©ν•΄μ„œ @bbon/formatter νŒ¨ν‚€μ§€λ₯Ό κ²Œμ‹œν•  κ²ƒμž…λ‹ˆλ‹€.

μŠ€μ½”ν”„ npm-scope νŽ˜μ΄μ§€μ—μ„œ 정보λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

npm νŒ¨ν‚€μ§€λŠ” 이름이 κ³ μœ ν•΄μ•Ό ν•˜λŠ”λ°, μ•½ 1,268,126 개의 곡개된 νŒ¨ν‚€μ§€ (2020-04-25 ν˜„μž¬) κ°€ μ‘΄μž¬ν•˜λŠ” μƒνƒœμ—μ„œ νŒ¨ν‚€μ§€ 이름을 κ²°μ •ν•˜λŠ” 것은 맀우 μ–΄λ ΅μŠ΅λ‹ˆλ‹€λ§Œ, μŠ€μ½”ν”„λ₯Ό μ‚¬μš©ν•˜λ©΄ μ›ν•˜λŠ” νŒ¨ν‚€μ§€ 이름을 μ‚¬μš©ν•  수 μžˆλ‹€κ³  μƒκ°λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

λ”°λΌν•˜λ©΄μ„œ νŒ¨ν‚€μ§€λ₯Ό κ²Œμ‹œν•˜μ‹œλ €λ©΄ μ•„λž˜ λ‚΄μš©μ„ ν™•μΈν•˜κΈ° 전에 npm 계정을 λ§Œλ“€κ³  μ‹œμž‘ν•˜λŠ” 것을 μ œμ•ˆν•©λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈ ꡬ성

GitHub 에 μ €μž₯μ†Œλ₯Ό λ§Œλ“€κ³ , 둜컬 μ €μž₯μ†Œλ‘œ λ³΅μ œν•œ ν›„ μ‹œμž‘ν•©λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈ μ΄ˆκΈ°ν™”

ν”„λ‘œμ νŠΈλ₯Ό μ΄ˆκΈ°ν™”ν•©λ‹ˆλ‹€.

$ npm init

package.json νŒŒμΌμ„ νŽΈμ§‘κΈ°λ‘œ μ—΄κ³  ν•„μš”ν•œ 정보λ₯Ό νŽΈμ§‘ν•©λ‹ˆλ‹€.

package.json νŒŒμΌμ„ ν™•μΈν•˜μ‹­μ‹œμ˜€.

{
  "name": "@bbon/formatter",
  "version": "1.0.0",
  "description": "Format the entered values.",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/bbonkr/bbon-formatter.git"
  },
  "homepage": "https://github.com/bbonkr/bbon-formatter",
  "bugs": {
    "url": "https://github.com/bbonkr/bbon-formatter/issues"
  },
  "keywords": ["formatting", "string", "utility"],
  "author": "Pon Cheol Ku <dev@bbon.kr> (http://bbon.kr)",
  "license": "MIT"
}

package.json 파일의 λͺ…μ„ΈλŠ” npm-package.json νŽ˜μ΄μ§€μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈ μ„€μ •

κΈ°λŠ₯을 κ΅¬ν˜„ν•˜κΈ° μœ„ν•΄μ„œ νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

μ½”λ“œ μž‘μ„± κ·œμΉ™ 지정을 μœ„ν•΄ eslint, prettier λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

λ‹¨μœ„ν…ŒμŠ€νŠΈλŠ” jestλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

의쑴 νŒ¨ν‚€μ§€λ₯Ό μ„€μΉ˜ν•©λ‹ˆλ‹€.

$ npm install --save-dev typescript eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-prettier jest @types/jest @types/node ts-jest

.prettierrc νŒŒμΌμ„ λ§Œλ“€κ³ , ꡬ성 λ‚΄μš©μ„ μž…λ ₯ν•©λ‹ˆλ‹€.

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 4
}

.eslintrc νŒŒμΌμ„ λ§Œλ“€κ³ , ꡬ성 λ‚΄μš©μ„ μž…λ ₯ν•©λ‹ˆλ‹€.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
    "sourceType": "module" // Allows for the use of imports
  },
  "rules": {
    "no-console": "warn"
  }
}

.eslintignore νŒŒμΌμ„ λ§Œλ“€κ³  λ‚΄μš©μ„ νŽΈμ§‘ν•©λ‹ˆλ‹€.

dist/

.gitignore νŒŒμΌμ„ λ§Œλ“€κ³  λ‚΄μš©μ„ νŽΈμ§‘ν•©λ‹ˆλ‹€.

node_modules/
dist/
.jest/

νƒ€μž…μŠ€ν¬λ¦½νŠΈ ν”„λ‘œμ νŠΈ μΆ”κ°€

tsc --init λͺ…λ ΉμœΌλ‘œ νƒ€μž…μŠ€ν¬λ¦½νŠΈ ν”„λ‘œμ νŠΈ 파일 tsconfig.json을 μΆ”κ°€ν•©λ‹ˆλ‹€.

$ npx tsc --init

tsconfig.json 파일의 λͺ…μ„ΈλŠ” tsconfig.json - typescript νŽ˜μ΄μ§€μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

λ§Œλ“€μ–΄μ§„ tsocnfig.json 파일의 λ‚΄μš©μ„ νŽΈμ§‘ν•©λ‹ˆλ‹€.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["__test__", "./**/*.spec.ts", "dist"]
}

μ½”λ“œ μž‘μ„±

src 디렉터리λ₯Ό λ§Œλ“€κ³  μ½”λ“œλ₯Ό μž‘μ„±ν•©λ‹ˆλ‹€.

src/StringFormatter.ts 파일의 λ‚΄μš©μž…λ‹ˆλ‹€.

/**
 * ν¬λ§·νŒ… κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€.
 *
 * @export
 * @class StringFormatter
 */
export class StringFormatter {
  /**
   * μˆ«μžμ— 1000 λ‹¨μœ„ κ΅¬λΆ„μžλ₯Ό μΆ”κ°€ν•΄μ„œ λ¬Έμžμ—΄λ‘œ 좜λ ₯ν•©λ‹ˆλ‹€.
   *
   * @param {(number | string)} value
   * @param {string} delimiter κ΅¬λΆ„μž; κΈ°λ³Έκ°’: **,** 콀마 문자
   * @returns {string}
   * @memberof StringFormatter
   */
  public NumberWithDelimiter(value: number | string, delimiter = ","): string {
    let stringValue = "";
    let fraction = "";
    if (typeof value === "number") {
      stringValue = value.toString();
    }

    if (typeof value === "string") {
      stringValue = value;
    }

    if (stringValue.indexOf(".") >= 0) {
      const splittedValue = stringValue.split(".");

      if (splittedValue.length > 1) {
        stringValue = splittedValue[0];
        fraction = splittedValue[1];
      }
    }

    stringValue = stringValue.replace(/\B(?=(\d{3})+(?!\d))/g, delimiter);

    return `${stringValue}${fraction ? `.${fraction}` : ""}`;
  }
}

src/index.ts 파일의 λ‚΄μš©μž…λ‹ˆλ‹€.

export { StringFormatter } from "./StringFormatter";

λ‹¨μœ„ν…ŒμŠ€νŠΈ μΆ”κ°€

src/StringFormatter.spec.ts 파일의 λ‚΄μš©μž…λ‹ˆλ‹€.

import { StringFormatter } from "./StringFormatter";

describe("StringFormatter", () => {
  const formatter = new StringFormatter();
  it("μ„Έμžλ¦¬λ§ˆλ‹€ κ΅¬λΆ„μžκ°€ μΆ”κ°€λœ 숫자 ν˜•μ‹μ˜ λ¬Έμžμ—΄", () => {
    expect(formatter.NumberWithDelimiter(1000)).toBe("1,000");
  });

  it("큰 μˆ«μžλ„ μ„Έμžλ¦¬λ§ˆλ‹€ κ΅¬λΆ„μžκ°€ μΆ”κ°€λœ 숫자 ν˜•μ‹μ˜ λ¬Έμžμ—΄", () => {
    expect(formatter.NumberWithDelimiter(12345678901234)).toBe(
      "12,345,678,901,234"
    );
  });

  it("μ†Œμˆ˜μ  μ•„λž˜ 값은 κ΅¬λΆ„μžκ°€ μΆ”κ°€λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.", () => {
    expect(formatter.NumberWithDelimiter(1000.1234)).toBe("1,000.1234");
  });

  it("μˆ«μžν˜•μ‹μ˜ λ¬Έμžμ—΄μ„ μž…λ ₯ν•˜λ©΄ μ„Έμžλ¦¬λ§ˆλ‹€ κ΅¬λΆ„μžκ°€ μΆ”κ°€λœ 숫자 ν˜•μ‹μ˜ λ¬Έμžμ—΄", () => {
    expect(formatter.NumberWithDelimiter("1000")).toBe("1,000");
  });

  it("μˆ«μžν˜•μ‹μ˜ λ¬Έμžμ—΄μ„ μž…λ ₯ν•˜λ©΄ μ†Œμˆ˜μ  μ•„λž˜ 값은 κ΅¬λΆ„μžκ°€ μΆ”κ°€λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.", () => {
    expect(formatter.NumberWithDelimiter("1000.1234")).toBe("1,000.1234");
  });

  it("빈 λΆ„μžμ—΄μ€ 빈 λ¬Έμžμ—΄μ„ λ°˜ν™˜ν•©λ‹ˆλ‹€.", () => {
    expect(formatter.NumberWithDelimiter("")).toBe("");
  });
});

jest κ΅¬μ„±λ‚΄μš©μ„ package.json νŒŒμΌμ— μΆ”κ°€ν•©λ‹ˆλ‹€.

{
  // ... 이전 λ‚΄μš©
  "jest": {
    "transform": {
      "^.+\\.(ts|tsx)$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.json"
      }
    },
    "testRegex": "\\.(test|spec)\\.((js|ts))$",
    "setupFilesAfterEnv": ["./__test__/setup.ts"],
    "cacheDirectory": "./.jest/cache"
  }
}

NPM 슀크립트

λΉŒλ“œ, 린트, ν…ŒμŠ€νŠΈ 슀크립트λ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.

{
  // ... μ΄μ „λ‚΄μš©
  "scripts": {
    "test": "jest",
    "build": "tsc",
    "lint": "eslint ./src/**/*.ts",
    "lint:fix": "eslint ./src/**/*.ts --fix"
  }
}

λΉŒλ“œ 슀크립트 μ‹€ν–‰ λͺ…령은 μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

$ npm run build

λΉŒλ“œ 슀크립트λ₯Ό μ‹€ν–‰ν•˜λ©΄ dist 디렉터리가 λ§Œλ“€μ–΄μ§€κ³ , dist 디렉터리에 νƒ€μž…μŠ€ν¬λ¦½νŠΈλ‘œ μž‘μ„±ν•œ μ½”λ“œμ—μ„œ 트랜슀파일된 StringFormatter.js, index.js, StringFormatter.d.ts, index.d.ts 파일이 λ§Œλ“€μ–΄ μ§‘λ‹ˆλ‹€.

ν…ŒμŠ€νŠΈ 슀크립트 μ‹€ν–‰ λͺ…령은 μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

$ npm run test

> @bbon/formatter@1.0.1 test D:\repos\formatter
> jest

 PASS  src/StringFormatter.spec.ts
  StringFormatter
    √ μ„Έμžλ¦¬λ§ˆλ‹€ κ΅¬λΆ„μžκ°€ μΆ”κ°€λœ 숫자 ν˜•μ‹μ˜ λ¬Έμžμ—΄ (1ms)
    √ 큰 μˆ«μžλ„ μ„Έμžλ¦¬λ§ˆλ‹€ κ΅¬λΆ„μžκ°€ μΆ”κ°€λœ 숫자 ν˜•μ‹μ˜ λ¬Έμžμ—΄
    √ μ†Œμˆ˜μ  μ•„λž˜ 값은 κ΅¬λΆ„μžκ°€ μΆ”κ°€λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. (1ms)
    √ μˆ«μžν˜•μ‹μ˜ λ¬Έμžμ—΄μ„ μž…λ ₯ν•˜λ©΄ μ„Έμžλ¦¬λ§ˆλ‹€ κ΅¬λΆ„μžκ°€ μΆ”κ°€λœ 숫자 ν˜•μ‹μ˜ λ¬Έμžμ—΄
    √ μˆ«μžν˜•μ‹μ˜ λ¬Έμžμ—΄μ„ μž…λ ₯ν•˜λ©΄ μ†Œμˆ˜μ  μ•„λž˜ 값은 κ΅¬λΆ„μžκ°€ μΆ”κ°€λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
    √ 빈 λΆ„μžμ—΄μ€ 빈 λ¬Έμžμ—΄μ„ λ°˜ν™˜ν•©λ‹ˆλ‹€.

Test Suites: 1 passed, 1 total
Tests:       6 passed, 6 total
Snapshots:   0 total
Time:        1.646s, estimated 3s
Ran all test suites.

NPM νŒ¨ν‚€μ§€ κ²Œμ‹œ μ€€λΉ„

NPM νŒ¨ν‚€μ§€λ₯Ό κ²Œμ‹œν•˜κΈ° 전에 νŒ¨ν‚€μ§€μ— 포함될 νŒŒμΌμ„ μ§€μ •ν•©λ‹ˆλ‹€.

νŒ¨ν‚€μ§€λ₯Ό μ‚¬μš©ν•˜λŠ” λΆ„μ˜ μž…μž₯μ—μ„œ ν•„μš”μ—†λŠ” νŒŒμΌμ€ μ œμ™Έν•˜κ³ , κΌ­ ν•„μš”ν•œ 파일만 μ „λ‹¬ν•˜λŠ” 것이 μ’‹κ² μŠ΅λ‹ˆλ‹€.

ν˜„μž¬ κ΅¬μ„±λœ ν”„λ‘œμ νŠΈλ₯Ό λΉŒλ“œν•˜λ©΄ dist 디렉터리가 λ§Œλ“€μ–΄μ§€κ³ , νƒ€μž…μŠ€ν¬λ¦½νŠΈλ‘œ μž‘μ„±λœ μ½”λ“œμ˜ 트랜슀파일 κ²°κ³Όκ°€ μ €μž₯λ©λ‹ˆλ‹€.

λ”°λΌμ„œ, dist λ””λ ‰ν„°λ¦¬μ˜ λ‚΄μš©μ€ NPM νŒ¨ν‚€μ§€μ— κΌ­ ν¬ν•¨λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

λ‹€λ₯Έ 유λͺ…ν•œ νŒ¨ν‚€μ§€μ˜ λ‚΄μš©μ„ ν™•μΈν•΄λ³΄λ‹ˆ, νŒ¨ν‚€μ§€ 정보와 λΌμ΄μ„ μŠ€ 정보도 ν¬ν•¨ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

ν•„μš”ν•œ 파일만 μ „λ‹¬λ˜λ„λ‘ κ΅¬μ„±ν•˜κΈ° μœ„ν•΄ .npmignore νŒŒμΌμ„ λ§Œλ“€κ³  λ‚΄μš©μ„ νŽΈμ§‘ν•©λ‹ˆλ‹€.

.npmignore 파일의 λ‚΄μš©μž…λ‹ˆλ‹€.

__test__/
src/
.jest/
.eslintignore
.eslintrc
.prettierrc
tsconfig.json

npm νŒ¨ν‚€μ§€μ—μ„œ μ œμ™Έν•˜λŠ” μ΄μœ λŠ” μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

__test__ λ””λ ‰ν„°λ¦¬λŠ” jest μ „μ—­ ꡬ성을 μœ„ν•œ μ½”λ“œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

src λ””λ ‰ν„°λ¦¬λŠ” νƒ€μž…μŠ€ν¬λ¦½νŠΈλ‘œ μž‘μ„±λœ μ†ŒμŠ€μ½”λ“œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

.jest λ””λ ‰ν„°λ¦¬λŠ” jest ν…ŒμŠ€νŠΈμ˜ μΊμ‹œ 파일이 μžˆμŠ΅λ‹ˆλ‹€.

npm νŒ¨ν‚€μ§€ 정보에 메인 νŒŒμΌμ΄λ¦„κ³Ό ν˜•μ‹ νŒŒμΌμ΄λ¦„μ„ μΆ”κ°€ν•©λ‹ˆλ‹€.

package.json 파일의 λ‚΄μš©μž…λ‹ˆλ‹€.

{
  // ...이전 λ‚΄μš©
  "main": "dist/index.js",
  "types": "dist/index.d.ts"
}

NPM νŒ¨ν‚€μ§€ κ²Œμ‹œ

npm νŒ¨ν‚€μ§€λ₯Ό κ²Œμ‹œν•˜κΈ° μœ„ν•΄ 인증 정보λ₯Ό μ €μž₯ν•©λ‹ˆλ‹€.

npm login λͺ…λ ΉμœΌλ‘œ 인증정보λ₯Ό μ €μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

$ npm login

계정이름, λΉ„λ°€λ²ˆν˜Έ, μ „μžμš°νŽΈμ£Όμ†Œ, 닀쀑인증을 μ‚¬μš©μ€‘μ΄λ©΄ 닀쀑인증정보λ₯Ό μž…λ ₯ν•˜λ©΄ 인증정보가 μ €μž₯λ©λ‹ˆλ‹€.

npm config ls λͺ…λ ΉμœΌλ‘œ 정보λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

$ npm config ls

둜그인이 λ˜μ—ˆμœΌλ©΄, μ€€λΉ„ν•΄λ‘” npm 슀크립트둜 λΉŒλ“œν•©λ‹ˆλ‹€.

$ npm run build

dist 디렉터리에 파일 μž‘μ„±λœ 것을 ν™•μΈν•©λ‹ˆλ‹€.

NPM νŒ¨ν‚€μ§€ 졜초 κ²Œμ‹œ

λ¬Έμ œκ°€ μ—†μœΌλ©΄ npm publish λͺ…λ ΉμœΌλ‘œ κ²Œμ‹œν•©λ‹ˆλ‹€.

이 λ•Œ, μŠ€μ½”ν”„ νŒ¨ν‚€μ§€λŠ” 기본적으둜 λΉ„κ³΅κ°œ νŒ¨ν‚€μ§€λ‘œ κ²Œμ‹œλ©λ‹ˆλ‹€. μ €λŠ” 곡개 νŒ¨ν‚€μ§€λ‘œ κ²Œμ‹œν•  κ²ƒμ΄λ―€λ‘œ --access public μ˜΅μ…˜μ„ μ‚¬μš©ν•©λ‹ˆλ‹€.

$ npm publish --access public

μ •μƒμ μœΌλ‘œ κ²Œμ‹œλ˜λ©΄ npm μ‚¬μ΄νŠΈμ—μ„œ κ²Œμ‹œλœ νŒ¨ν‚€μ§€λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

@bbon/formatter νŽ˜μ΄μ§€μ™€ 같이 정보가 μ œκ³΅λ©λ‹ˆλ‹€.

NPM νŒ¨ν‚€μ§€ 판올림

이후 λ³€κ²½λœ λ‚΄μš©μœΌλ‘œ NPM νŒ¨ν‚€μ§€λ₯Ό μ—…λ°μ΄νŠΈν•˜λ €λ©΄ package.json 파일의 버전을 λ³€κ²½ν•΄μ„œ κ²Œμ‹œν•΄μ•Ό ν•©λ‹ˆλ‹€.

{
    // ... μ΄μ „λ‚΄μš©
    "version": "1.0.1"
}

λΉŒλ“œ 슀크립트λ₯Ό μ‹€ν–‰ν•΄μ„œ λ³€κ²½λœ λ‚΄μš©μ„ dist 디렉터리 νŒŒμΌμ— λ°˜μ˜ν•©λ‹ˆλ‹€.

λ¬Έμ œκ°€ μ—†μœΌλ©΄ npm publish λͺ…λ ΉμœΌλ‘œ κ²Œμ‹œν•©λ‹ˆλ‹€.

이 λ•Œ, μŠ€μ½”ν”„ νŒ¨ν‚€μ§€λŠ” 기본적으둜 λΉ„κ³΅κ°œ νŒ¨ν‚€μ§€λ‘œ κ²Œμ‹œλ©λ‹ˆλ‹€. μ €λŠ” 곡개 νŒ¨ν‚€μ§€λ‘œ κ²Œμ‹œν•  κ²ƒμ΄λ―€λ‘œ --access public μ˜΅μ…˜μ„ μ‚¬μš©ν•©λ‹ˆλ‹€.

$ npm publish --access public

Creating and publishing scoped public packages νŽ˜μ΄μ§€μ—μ„œ κ΄€λ ¨ 정보λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

μ •μƒμ μœΌλ‘œ κ²Œμ‹œλ˜λ©΄ npm μ‚¬μ΄νŠΈμ—μ„œ κ²Œμ‹œλœ νŒ¨ν‚€μ§€λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

@bbon/formatter νŽ˜μ΄μ§€μ™€ 같이 정보가 μ œκ³΅λ©λ‹ˆλ‹€.

NPM νŒ¨ν‚€μ§€ μ‚¬μš©

κ²Œμ‹œν•œ NPM νŒ¨ν‚€μ§€λŠ” λ‹€λ₯Έ νŒ¨ν‚€μ§€ μ‚¬μš©κ³Ό λ™μΌν•˜κ²Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μƒˆ ν”„λ‘œμ νŠΈλ₯Ό μ€€λΉ„ν•˜κ³ , μ•„λž˜ λͺ…λ ΉμœΌλ‘œ νŒ¨ν‚€μ§€λ₯Ό μ„€μΉ˜ν•©λ‹ˆλ‹€.

$ npm install --save @bbon/formatter

μ„€μΉ˜λœ νŒ¨ν‚€μ§€μ˜ λ‚΄μš©μ„ ν™•μΈν•©λ‹ˆλ‹€.

node_modules/@bbon/formatter λ””λ ‰ν„°λ¦¬μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

dist 디렉터리와 λΌμ΄μ„ μŠ€ 파일, νŒ¨ν‚€μ§€ 정보, README.md 파일만 ν¬ν•¨λ˜μ–΄ μžˆμŒμ„ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈ 디렉터리
β”‚  index.js
β”‚  package-lock.json
β”‚  package.json
β”‚
└─node_modules
    └─@bbon
        └─formatter
            β”‚  LICENSE
            β”‚  package.json
            β”‚  README.md
            β”‚
            └─dist
                    index.d.ts
                    index.js
                    StringFormatter.d.ts
                    StringFormatter.js

마침

전체 μ½”λ“œλŠ” GitHub: bbon-formatter μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

GitHub Repository


Profile picture

Pon Cheol Ku (ꡬ본철)

Software developer

Other sites

If does not find interesting topic, you might visit other site on below link.

Β© 2024, Built with Gatsby