배경

올해 초에 npm 모듈을 만드는 방법을 알게되었다 계속 시도해 보려고 하다가 제대로 코드를 완성하고 시도하는 것보다 test module 을 만들어서 올리기로 결심했다

test 진행내용

1. 프로젝트 폴더 생성 => g_test_module 이라는 폴더를 만들었다

2. package.json 을 생성

   • npm init실행

내가 따라한 블로그의 글... 에는

bin 이라는 폴더에 cli.js 를 파일을 넣었고 log-run 이라는 명령어를 입력해 cli.js 를 실행시 console에 메세지가 찍히는 프로그램이었다.

package.json 은 어떻게 구성?

{
  "name": "g_test_module",
  "version": "0.0.0",
  "author": "gwiyeomgo",
  "bin": {
    "log-run": "bin/cli.js"
  },
  "license": "ISC",
  "keywords": [
    "sample"
  ],
  "files": [
    "cli"
  ],
  "description": "npm deploy sample project",
  "dependencies": {
    "commander": "^9.4.0"
  }
}

사실 이것만 보고 어떻게 구성해야 하는지 잘 모르겠어서 더 찾아봤따

이 글을을 보면 꼭 위 형태처럼 안해도 될 거 같다 package.json 을 생성했을 때 "main": "index.js",와 같이 자동으로 생성된다 index.js 파일에 컴포넌트나 외부에서 사용하고싶은 내용을 써도 되는 거 같다

module/
		├── README.md
        ├── index.js
        ├── .gitignore
        └── package.json

license

license 도 추가할 수 있다

• LICENSE.md

=> license 는 뭘쓰지? 관련 글 링크 https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository#including-an-open-source-license-in-your-repository

작업 내용

우선 테스트이니 cli 명령어를 실행하는 내용을 따라했다 내 모듈 link: https://www.npmjs.com/package/g_test_module

..아 node_module 에 코드에 사용했던 module을 열어보니 lib 에 js 파일들이 있고 index.js 에서 특정 js 파일을 exports 해서 밖에서 쓸 수 있도록 할 수 있다

publish

• You must sign up for private packages 402 에러발생시 npm publish --access=public 로 publish

수정 재배포?

unpublish ?

npm 모듈 삭제 npm unpublish {패키지이름} -f

• 동일한 이름의 패키지를 다시 게시하려는 경우 24 시간을 기다려야 함

코드를 수정하고 배포는 어떻게?

1.코드 수정 2.package.json 의 version 을 다르게 해줌 version 은 세 자리의 숫자와 마침표로 이루어짐(Major, Minor, Patch )

• Major: 엄청나게 큰 변화
• Minor: 기능적인 면에서 추가된 사항
• Patch: 사소한 변경,오류

3. package.json 의 script 실행,publish 전 build => dist 폴더 생성
   • npm run publish:npm
4. 배포
   • npm publish

20221125

3개월 동안 아무 업데이트를 안했더니 ㅎㅎ 사용자가 200명에서 0명이 되었다 먼제 typescript 로 업데이트를 하고 조금씩 기능을 변경해 보려고 합니다 꾸준히 조금씩 변경하는 것이 중요하다고 깨달았습니다.

1. typescript 설치 (프로젝트에 한정적으로 설치) npm i typescript -D or npm install typescript

2. 설치확인 tsc -v

3. tsconfig.json 파일 추가/설정 tsc --init 명령어로 tsconfig.json 를 추가

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  }
}

* tip ) not found TypeScript error

1. 특정 프로적트만 적용하고 싶다면 npx --package typescript tsc --init 실행해 config 파일을 만들고 npx --package typescript tsc --version 버전 확인 or
2. 현재 컴퓨터에 typescript 설치 npm install typescript@latest -g tsc --init config 파일 생성 tsc --version

https://react.vlpt.us/using-typescript/ https://velog.io/@hopsprings2/TypeScript-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%99%98%EA%B2%BD%EC%84%A4%EC%A0%95 https://fettblog.eu/typescript-react/components/ https://bobbyhadz.com/blog/typescript-check-if-object-has-key https://dmitripavlutin.com/javascript-array-contains-value/ https://dmitripavlutin.com/check-if-object-has-property-javascript/ https://stackoverflow.com/questions/23130292/test-for-array-of-string-type-in-typescript https://bobbyhadz.com/blog/typescript-argument-type-not-assignable-parameter-type-never https://github.com/Microsoft/TypeScript/issues/9976

출처

package.json 설명 글 not found typescript 적용 예시1 적용 예시2 적용 예시3 react 컴포넌트를 npm 에 올리는 방법 타입스크립트 적용 예시 https://hoho325.tistory.com/311 https://kyounghwan01.github.io/blog/TS/React/convert-js-to-ts/#typescript-%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1 https://github.com/jeonghwan-kim/study-react-ts/blob/master/dev-setting/src/components/Counter.tsx https://velog.io/@junghyeonsu/NPM-%EB%B0%B0%ED%8F%AC-%EC%96%B4%EB%A0%B5%EC%A7%80-%EC%95%8A%EC%95%84%EC%9A%94-with-%ED%85%8C%EC%98%A4-%EA%B5%AC%EA%B8%80-%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-4%EA%B8%B0