CLI program

주절주절 프롤로그) 팀에서 담당하는 서버 중 이미지 서버가 현재는 요청받은 원본 이미지에 대해 JPEG + WEBP 이미지를 생성해서 업로드하고 있는데 WEBP 가 뒤늦게 추가된 스펙이다보니 옛날 이미지들에 대해선 WEBP 가 생성되어있지 않은 이슈가 있었고,

몇 건 되지 않는 이미지이다보니 JPEG 이미지 주소를 입력받으면 WEBP 로 만들어서 업로드해주는 CLI 가 있으면 쓸 수 있을 것 같다는

요청이 있어 NodeJS 로 작업해본 CLI 프로그램을 간단히 올려봅니다.

 

개발자에겐 cli 는 아주 익숙하리라 생각되구요. NodeJS 진영에서도 이미 리액트나, NestJS 등을 사용해본 개발자라면
create-react-app 또는 nest-cli 등을 통해 CLI 를 사용해본 경험이 있을겁니다. 이번에 만들건 이런식으로 동작하는 프로그램입니다.

 

> mkdir webp && cd webp
> npm init

 

우선 webp 디렉토리를 만들고 npm 프로젝트로 만들어줬습니다.

 

{
  "name": "webp",
  "version": "1.0.0",
  "description": "A CLI tool for creating webp from exist JPEG image",
  "type": "module",
  "main": "webp.mjs",
  "engines": {
    "node": ">=16.18"
  },
  "scripts": {},
  "bin": {
    "webp": "webp.mjs"
  },
  "author": "",
  "license": "ISC"
}

 

사실 뭐 거의 이게 전부인 수준인데.. 가장 핵심은 package.json 의 bin 속성입니다.

bin 속성을 통해 실행 가능한 자바스크립트 파일을 노출할 수 있습니다. 현 설정은 webp 명령어가 입력되면 webp.mjs 파일을 실행하라는

의미입니다. 그 외에는 노드버전, ecmascript 등을 사용하기 위한 설정들이 전부입니다.

 

{
  "bin": {
    "create-react-app": "./index.js"
  }
}

 

위에서 얘기했던 react 의 경우 이런식으로 bin 속성이 되어 있으니 이를 참고하시면 이해가 더 빠를거라 생각됩니다.

 

#!/usr/bin/env node

(async () => {
  const [, , thumbnailUrl] = process.argv;
  const regex = /https:\/\/xxx.io\/thumbnail\/[\w\-\.]+\/[\w\-\.]+\/[\w\-\.]+\/[\w\-\.]+.(jpg|jpeg)/g;

  if (!thumbnailUrl || !regex.test(thumbnailUrl)) {
    console.info('wrong thumbnail-url');
    return;
  }

  /*
    jpeg -> webp 로 생성후 업로드 하는 코드
  */

  console.info('upload done');
})();

 

작성한 webp.mjs 파일입니다. 이번 포스팅에서 얘기하려던건 cli 작성 부분이다보니 대부분의 코드는 주석처리했습니다.

메인이 되는 부분은 즉시실행함수로 작성했고, 코드 내용은 콘솔창에서 webp https://xxx.io/thumbnail... 와 같이 실행했을 때 인자로
받은 url 을 유효성 체크한 후 webp 로 변환, 업로드 하면 완료입니다.

 

가장 상위에 #!/usr/bin/env node 는 리눅스 등의 운영체제에서 CLI 프로그램의 node 위치를 지정하기 위한 문구입니다.

윈도우 운영체제라면 필요없는 걸로 알고 있습니다.

 

npm install -g

 

우리가 보통 npm 에 cli 로 사용할 수 있도록 등록된 라이브러리를 설치할 때 글로벌로 설치하죠.

지금 작성한 cli 프로그램도 그걸 의도한 것이므로 글로벌로 설치합니다.

설치 후 사용중인 node 버전의 위치로 가서 bin 디렉토리로 들어가보면 webp 가 있는것을 확인할 수 있습니다.

저 같은 경우엔 nvm 을 통해 node@16.18 을 사용했으므로 $HOME/.nvm/versions/node/v16.18.0/bin 에 위치해있네요.

 

> webp xxx
> wrong thumbnail

> webp https://xxx.io/thumbnail...
> upload done

 

이제 작성한대로 CLI 를 실행해보면, 잘 동작하는 것을 확인할 수 있습니다.

적고나서보니 실제 코드는 대부분 주석처리한게 좀 무성의한 것 같긴 하네요. 그냥 간단한 예시로 적을걸 그랬나 싶기도..

 

#!/usr/bin/env node

(() => {
  const [, , a, b] = process.argv;
  console.info('args', a, b);

  console.info('result:', Number(a) + Number(b));
})();

 

그래서 그냥 하나 더 만들었습니다. 간단하게 인자로 받은 두 수를 더하는 CLI 프로그램입니다.

일단 sum.mjs 라는 파일로 위와 같이 작성했구요.

 

{
  "bin": {
    "sample-sum": "sum.mjs"
  }
}

 

package.json 의 bin 프로퍼티에 sample-sum 을 추가했습니다. 그냥 sum 이라고 해도 되는데 명령어가 무언가랑 겹쳐서 앞에

sample- 을 붙인것 외에 별 의미는 없습니다. 동일하게 npm install -g 로 전역 설치합니다.

 

 

작성한 sample-sum 을 실행해보면 잘 동작하는 것을 확인할 수 있습니다.

 

저는 사내에서 사용할 CLI 프로그램이다보니 작성했던 패키지를 github private packages 에 올리고

필요한 개인이 전역으로 설치해 사용할 수 있도록 구성을 했었습니다. 하나의 예시일뿐이나 이처럼 CLI 를 작성하는건 아주 간단하니

필요에 따라 잘 활용하면 좋을 것 같습니다.