npm nanoid 에 대해 알아보자

nanoid에 대해 알아보기 전에 내가 쓰게된 계기는 npm에 shortid를 검색해 보면

shortid is deprecated, because the architecture is unsafe. we instead recommend Nano ID, which has the advantage of also being significantly faster than shortid 라는 문구가 나온다.

shortid의 아키텍처가 안전하지 않으니까 NanoID를 쓰는걸 추천한다는 내용이다.
저번 프로젝트에서 shortid를 사용해보고 이번 프로젝트에서도 쓰려고 했는데, 따로 npm을 확인하지 않고 그저 구글링검색을 통해서 적용한게 화근이었나보다. 위의 문구처럼 안전하지 않다면 쓸 이유가 없지!

추천대로 NanoID를 사용해 봐야겠다.

nanoid란 무엇인가?

고유하고 짧고 URL 친화적인 식별자를 생성하기 위한 JavaScript 라이브러리 라고 한다.

nanoid 공식 깃허브를 가보면 아래와 같은 특징을 가진다고 한다.

1. Small. 130 bytes (minified and gzipped). No dependencies. Size Limit controls the size.
2. Fast. It is 2 times faster than UUID.
3. Safe. It uses hardware random generator. Can be used in clusters.
4. Short IDs. It uses a larger alphabet than UUID (A-Za-z0-9_-). So ID size was reduced from 36 to 21 symbols.
5. Portable. Nano ID was ported to 20 programming languages.

이게 참.. 번역기를 돌렸을 때 뭔가 번역이 이상하게 적용되는데, 간단히 생각하면
작은용량을 가지고있고, 안전하며, UUID보다 2배 빠르고, 큰? 알파벳을 사용하고, 20개의 프로그래밍 언어를 지원한다고 볼 수 있는데

큰 알파벳을 사용한다는게 무슨 뜻 일까? 큰 알파벳을 사용하기 때문에 ID의 사이즈가 36개에서 21개의 기호로 줄어들었다? 내가 영어를 못하는건 맞지만 번역기도 참 한국말을 못한다.
아마도 대문자 알파벳을 사용한다는 의미인 것 같다. UUID는 4개의 하이픈으로 구분된 32개의 16진수 문자로 구성되며 문자는 대소문자를 구분하지 않는 반면에, nanoID는 대문자와 소문자, 숫자를 포함하는 더 넓은 폭의 알파벳을 사용하며 하이픈과 같은 구분 기호를 사용하지 않아서 사용하는 기호의 수를 줄였다고 하는 것 같은데,
a-z면 이미 21개고 대소문자를 구분하면 42개 , 0-9를 쓰면 10개 _- 으로 특수문자 2개 총 54개의 기호를 쓰는게 아닌가? 위의 21 symbols는 nanoid를 생성할 때 만들어지는 default size인 21개의 문자를 이야기하는 것 같다.

매주 2600만에 육박하는 다운로드 수를 자랑하고, 나온 기간에 비해서 다운로드 수도 충분히 많고 이슈도 적고, github star 수는 압도적인 것 같다. 물론 오랜시간 많은 곳에서 이미 사용중인 uuid를 다운로드 수로 이길 수는 없겠지만, 본인들이 특징으로 UUID와 비교해서 ~~한게 좋다. 라고 표현하니 믿고 쓴다.

nanoid의 사용법

위 사진의 인스톨 방법처럼 VSCode의 터미널창에 인스톨해서 라이브러리를 다운받는다

npm i nanoid

사용방법은 굉장히 간단하다.
임포트해서 가지고 와서 쓰면된다.

const { nanoid } = require('nanoid')

model.id = nanoid() //"V1StGXR8_Z5jdHi6B-myT"

하지만 임포트 해오려고 할 때, Error [ERR_REQUIRE_ESM] require() of ES moule 오류가 발생할 수도 있다.
필자도 이 에러 때문에 고생깨나 했는데 nanoid의 버전을 3버전대로 낮춰서 다운받아주니 해결되었다.

npm i nanoid@3

필자는 multer를 사용한 이미지업로더에서 이미지파일의 originalname으로 저장하기엔 이름에 특수문자나 한글이 들어갈경우 문제가 생기는 경우가 종종 있다고 하여 이름을 정해줄 때 shortid.generate()를 사용했었는데, 이번에 nanoid로 바꾸게 되어

const { nanoid } = require('nanoid');

const multerPostImage = multer({
  storage: multerS3({
    s3,
    bucket: process.env.KTH_S3_BUCKET_NAME,
    acl: 'public-read',
    key(req, file, callback) {
      const imageType = file.mimetype.split('/')[1];
      callback(null, `example-project/${nanoid()}.${imageType}`);
    },
  }),

위와 같이 사용하였다. 현재 nanoid()가 있는곳이 원래는 shortid.generate()로 작성돼 있었다.

그냥 nanoid()로 사용하게 되면 A-Za-z0-9_-를 사용하여 자동으로 21자리로 된 ID를 반환해준다
nanoid 함수의 인자는 number값을 받고 ID의 길이를 설정할 수 있다.

//그냥 사용 했을 때
model.id = nanoid() //"V1StGXR8_Z5jdHi6B-myT"
//사이즈를 지정해 줬을 때
model.id = nanoid(10) //"IRFa-VaY2b"

임포트 해온 { nonoid } 를 ctrl 좌클릭으로 따라 들어가보면 좀 더 직관적으로 사용법을 알아보기 쉽다

export function nanoid(size?: number): string

export function customAlphabet(
  alphabet: string,
  defaultSize?: number
): (size?: number) => string

export function customRandom(
  alphabet: string,
  size: number,
  random: (bytes: number) => Uint8Array
): () => string

export function random(bytes: number): Uint8Array

위와 같은 함수가 내제 되어 있는 것을 확인할 수 있다. 내장 되어있는 여러 함수중에 가장 위에있는 nanoid(size?: number): string 를 가져다 쓴 것이고, nanoid()라는 함수는 size?:number 즉 숫자타입의 파라미터를 받을 수 도있고, 안받을 수도 있으며, :sting 결과값은 문자열로 반환하는 함수라는 의미를 볼 수있다.

nanoid github page를 참고해서 본인에게 맞는 방법에 맞춰 사용해보자.