카테고리 없음

React UUID 고유한 값을 만들어주는 라이브러리

쿠키는 서비스 2023. 12. 12. 13:00
반응형

js map함수를 돌릴 때 li 태그 등을 만들 때 key값을 설정해주어야 되는 이슈가 있다.

이럴 때 유용하게 사용할 수 있는 npm 라이브러리 uuid이다.

https://www.npmjs.com/package/uuid

 

- RFC4122 UUIDs를 생성하기 위한 완전한 지원을 제공

 

- 크로스 플랫폼

    - CommonJS, ECMAScript 모듈 및 CDN 빌드를 지원합니다.

    - NodeJS 12+ (LTS 릴리스)를 지원합니다. Chrome, Safari, Firefox, Edge 브라우저를 지원합니다.

    - Webpack 및 rollup.js 모듈 번들러를 지원합니다.

    - React Native / Expo를 지원합니다.

 

- 보안 - 암호학적으로 강력한 무작위 값으로 보호됩니다.

- 작은 크기 - 종속성이 없으며 작은 크기로, "tree shaking" 패키지 매니저와 호환됩니다.

- CLI - uuid 명령행 유틸리티를 포함합니다. 참고: uuid@3에서 업그레이드하려는 경우 코드는 아마도 괜찮을 것입니다만, 자세한 내용은 uuid@3에서의 업그레이드 정보를 확인하십시오.

 

참고: 버전 4 UUID를 생성하는 것만 관심이 있다면 crypto.randomUUID()를 사용하여 이 라이브러리를 설치할 필요가 없을 수 있습니다.

 

npm install uuid

 

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
const { v4: uuidv4 } = require('uuid');
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

 

API Summary

uuid.NIL The nil UUID string (all zeros) New in uuid@8.3
uuid.parse() Convert UUID string to array of bytes New in uuid@8.3
uuid.stringify() Convert array of bytes to UUID string New in uuid@8.3
uuid.v1() Create a version 1 (timestamp) UUID  
uuid.v3() Create a version 3 (namespace w/ MD5) UUID  
uuid.v4() Create a version 4 (random) UUID  
uuid.v5() Create a version 5 (namespace w/ SHA-1) UUID  
uuid.validate() Test a string to see if it is a valid UUID New in uuid@8.3
uuid.version() Detect RFC version of a UUID New in uuid@8.3

 

이와 같이 버전에 맞게 사용 가능하다.

v1의 경우 timestamp를 이용해서 시간과 연관된 변수를 만들어주고

v3의 경우 MD5라는 해시 함수를 사용하여 네임스페이스를 생성해주는 버전이다.

 

네임스페이스란?

변수, 함수, 클래스 등의 식별자(identifier)들이 유효한 범위(scope)를 나타내는 데 사용되는 개념

JS에서 예시는 아래와 같다.

// Defining a namespace using an object
const MyNamespace = {
    myVariable: 42,
    myFunction: function() {
        console.log("Hello from MyNamespace!");
    }
};

// Accessing variables and functions from the namespace
console.log(MyNamespace.myVariable);
MyNamespace.myFunction();

 

반응형