• https://youtu.be/kK4Meix58R4

1
2
3
4
5
6
7
8
9
10

npm version -h

# 호환가능 버그수정
npm version patch

# 호환가능 기능 추가
npm version minor

# 호환불가 변경 사항
npm version major

참고

• keyword; semver
• https://docs.npmjs.com/about-semantic-versioning

1
2
3
4
5

# pwd: npm package
npm link

# pwd: other project
npm link -S {packagename}

상황

• 패키지를 업데이트하고 퍼블리쉬한다
• 해당 패키지를 사용하는 프로젝트에서 install 한다
• 테스트한다
• 퍼블리쉬를 해야지 확인할 수 있는 불편함이 있다. 테스트용 퍼블리쉬를 할 때마다 버전이 계속 증가한다

해결

• npm link 명령을 통해 퍼블리쉬 없이 테스트해볼 수 있다
• 글로벌 모듈이 설치되는 위치에 심볼릭 링크가 추가된다
• npm link -S {packagename}명령으로 로컬의 패키지를 설치한다

• npm r -g {packagename} 테스트를 다 끝내서 필요 없어졌다면 심볼릭 링크를 삭제

참고

• https://www.jamesqquick.com/blog/how-to-test-npm-packages-locally
• https://docs.npmjs.com/cli/v8/commands/npm-link

이전에 react eslint 관련해서 여러 글을 작성했다 (다 엄청난 삽질이었다…)

1

npx eslint --init

• 위 명령으로 한 번에 해결
• 방향키로 선택 선택 넘어가면, 알아서 환경을 세팅해준다

CRA와 eslint –init해서 프로젝트 세팅하는 과정

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# CRA로 리액트 프로젝트 시작
yarn create react-app . --template typescript

# eslint --init 으로 eslint 세팅
yarn eslint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JSON
√ Would you like to install them now with npm? · No

• 입맛대로 답변한다
• 특히 마지막 Would you like to install them now with npm? 물음에는 No로 답변한다
• No로 답변하고 필요한 종속성을 yarn으로 설치해준다
• (Yes로 답변하면, npm으로 설치되며 package-lock.json이 생성된다)

1
2
3
4
5
6
7
8
9
10
11

# 콘솔에 적힌 종속성들을 복사해서 적절히 편집하고 실행한다
# 여러 버전들을 나열해서 알려주는데, 그중에서 최신 버전을 다운받았다
yarn add -D \
    eslint-plugin-react@^7.21.5 \
    @typescript-eslint/eslint-plugin@latest \
    eslint-config-airbnb@latest \
    eslint@^7.2.0 \
    eslint-plugin-import@^2.22.1 \
    eslint-plugin-jsx-a11y@^6.4.1 \
    eslint-plugin-react-hooks@^4 \
    @typescript-eslint/parser@latest

1
2
3
4
5

# eslint와 prettier를 함께 쓰려면 아래도 함께 설치한다
yarn add -D \
    prettier  \
    eslint-plugin-prettier  \
    eslint-config-prettier

참고

• https://eslint.org/docs/user-guide/getting-started
• https://github.com/chinsun9/react-ts-template/tree/v20210827

1

npx sort-package-json

• package.json를 수정하다가 문득 생각났다
• 어떤 걸 위에 작성하고, 아래 작성해야 하는지..
• 다른 npm 패키지 모듈을 참고해서 이런 순서로 적는 게 맞나 하다가
• package.json order 키워드로 검색했더니 바로 내가 찾는 게 나왔다

사용 방법

• 너무 간단하다
• 그냥 package.json이 있는 디렉터리에서 npx sort-package-json를 실행하면 정렬이 완료된다!

참고

• https://github.com/keithamus/sort-package-json

1
2
3

npm i --production
# or
yarn --production

• package.json에서 devDependencies를 제외하고 모듈을 설치한다

참고

• https://docs.npmjs.com/cli/v7/commands/npm-install

1
2
3
4
5
6
7
8
9

{
  // ...
  "scripts": {
    "prebuild": "echo 1",
    "build": "echo 2",
    "postbuild": "echo 3"
    // ...
  }
}

• yarn build or npm run build 했을 때 1,2,3 순서로 실행된다
• pre는 전처리, post는 후처리라고 생각하면 된다

참고

• https://docs.npmjs.com/cli/v7/using-npm/scripts

일반 터미널에서 실행이 안 되는 명령어가 있다
글로벌로 설치되지 않았는데, 왜 package.json의 script에 들어 있는 cli 도구들이 동작하는 걸까?

package.json script vs 일반 터미널의 명령

1
2
3
4
5
6
7

{
  // ...
  "scripts": {
    "build": "tsc --init"
  }
  // ...
}

• package.json에 tsc --init을 실행하는 build 스크립트가 있다고 하자

1
2
3
4
5
6
7

### without script
tsc --init

### with script
npm run build
# or
yarn build

• 그냥 tsc --init 명령을 실행했을 때

  • 타입스크립트가 전역 설치되어 있지 않으면 실행되지 않는다
  • 전역 설치되어있다면 전역으로 설치된 타입스크립트 컴파일러(tsc)가 실행된다

• npm 또는 yarn을 통해 실행했을 때

  • 현재 워크스페이스에 설치된 tsc가 실행된다
  • 현재 워크스페이스에 타입스크립트가 설치되어 있지 않으면 전역으로 설치된 tsc가 실행된다
  • 전역 설치되어있지 않으면 실행되지 않는다

• 전역으로 설치된 명령과 package.json script를 통해 실행되는 cli 도구가 다르다

• script를 통해 실행하면 워크스페이스에 설치된 도구를 우선적으로 사용하는 것을 알 수 있다

• 그러면 이 도구들은 어디 존재하는 걸까?

위치

package.json script

• node_modules/.bin

전역 패키지

• %appdata%/npm

yarn 꿀팁?

• 위에서 확인한 것처럼 node_modules/.bin에서 사용 가능한 cli도구를 확인할 수 있다
• 이 도구들을 꼭 script에 작성해야지만 사용 가능한 것은 아니다
• package.json에 스크립트를 작성하지 않고도, 현재 워크스페이스에 설치된 cli 도구들을 사용할 수 있다

1

yarn tsc --init

• 이렇게 yarn으로 시작하는 경우 script에 작성한 것과 동일한 효과를 가져올 수 있다
• 한 번만 명령어를 쓰는 경우 스크립트에 등록하지 않고 쉽게 실행시켜 볼 수있다

더 알아보기

• yarn node index.js 와 node index.js를 비교해보자

1
2

// console.log(process.env);
console.log(process.env.path);

• yarn or npm run 으로 실행하는 것과 그냥 node로 실행하는 것이 다른데, 환경 변수가 다르다
• yarn or npm run 으로 실행하면 훨씬 더 많은 환경을 가지는 것을 확인할 수 있고,
• 특히 path를 확인해보면 yarn, npm 을 통해 실행한 경우 path에 node_modules/.bin 경로가 들어있는 것을 확인할 수 있다

1
2
3
4
5
6

// https://nodejs.org/api/crypto.html
import { randomBytes } from 'crypto';

function generateRandomKey(keyLength: number) {
  return randomBytes(keyLength / 2).toString('hex');
}

• 무작위 문자열을 생성할 때 node에서 crypto 내장 모듈을 사용해서 생성할 수 있다
• 간단하게 키로 사용할 수 있는 문자열을 생성할 수 있는데, 막상 생성할 때가 오면 까먹는다

cli 도구

• 찾아보니까 cli 도구도 있었다

• npx random-generator-cli string -l 32 명령을 기억해 놨다가 편하게 생성해 볼 수 있겠다

참고

• https://github.com/AmrSaber/random-cli

• 간단한 cli 도구를 만들어보았다

TMI

cli.ts

• 레포 ; https://github.com/chinsun9/g-to-9-cli

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#!/usr/bin/env node
import { Command } from 'commander';
import { gto9 } from 'g-to-9';
import { version } from './package.json';

const program = new Command();

program.version(version);

program
  .argument('<text>')
  .description(
    `replace all 'g' to '9'

Examples:
  $ gto9 chinsung
  $ gto9 gg is good game
  $ gto9 'gg is good game'`
  )
  .action(() => {
    const input = program.args.join(' ');
    const result = gto9(input);
    console.log(result);
  });

program.parse();

• #!/usr/bin/env node 최상단에 추가해줘야 한다

Windows Script Host
Microsoft JScript 컴파일 오류

• 추가하지 않으면 만나는 오류이다

package.json

1
2
3
4
5
6
7
8
9
10

{
  "name": "g-to-9-cli",
  "version": "1.0.0",
  "description": "g-to-9-cli",
  "main": "cli.js",
  "bin": {
    "gto9": "cli.js"
  }
  // ...
}

• package.json 에서 bin 필드에 값을 넣어주어 쉽게 cli 설정을 할 수 있다
• 오브젝트를 넣어주거나 스트링을 넣어줄 수 있는데,
• 스트링을 넣는 경우 "{cli path}" 형태로 한다. 이경우에는 프로젝트 이름으로 실행할 수 있다
• 오브젝트의 경우 {"{command}" : "{cli path}"} 형태로 넣어준다. 이경우에는 프로젝트 이름과 다른 커맨드를 지정해 줄 수 있다
• 참고 ; https://docs.npmjs.com/cli/v7/configuring-npm/package-json#bin

참고

• https://github.com/tj/commander.js
• https://github.com/tj/commander.js/tree/master/examples
• https://docs.npmjs.com/cli/v7/configuring-npm/package-json#bin
• 내 첫 cli 도구 ; https://github.com/chinsun9/g-to-9-cli

여러 비슷한 패키지들이 있는데 어떤 것을 고를지 고민될때가 있다
또 내가 알고 있는 패키지를 대체할 좋은 패키지가 있는지 찾아볼 때도 있다
이럴때 유용한 npm trends 가 있다

• npm trends를 통해 패키지들을 비교해볼 수 있다
• 패키지를 검색하면 연관된 패키지들이 추천되고 서로 비교해볼 수 있다

참고

• https://www.npmtrends.com/