[node.js, 라이브러리]UUID와 'uuid' 라이브러리 알아보기

목차

 

 

 UUID란 무엇인가?

UUID(Universally Unique Identifier)는 전 세계적으로 고유한 식별자를 생성하기 위해 사용되는 표준이다. 이는 시스템 간에 고유한 ID를 보장해야 하는 다양한 상황에서 유용하다. UUID는 주로 데이터베이스의 기본 키, 트랜잭션 ID, 디바이스 식별자 등 다양한 용도로 사용 된다.

UUID는 128비트 길이의 숫자로, 32개의 16진수 문자로 표현된다. 예를 들어, `123e4567-e89b-12d3-a456-426614174000`과 같은 형태를 가진다.

 

UUID의 버전

UUID에는 여러 버전이 있으며, 각 버전은 특정한 생성 방식을 따른다. 주요 버전은 다음과 같다.

• UUIDv1 : 시간과 노드(일반적으로 MAC 주소)를 기반으로 생성된다.
• UUIDv3 : 이름과 네임스페이스를 해싱(MD5)하여 생성된다.
• UUIDv4 : 랜덤 또는 의사 난수 값으로 생성된다.
• UUIDv5 : 이름과 네임스페이스를 해싱(SHA-1)하여 생성된다.

 'uuid' 라이브러리

'uuid'는 JavaScript에서 UUID를 생성하기 위해 널리 사용되는 라이브러리이다. 이 라이브러리를 사용하면 UUID를 쉽게 생성할 수 있으며, 다양한 버전을 지원한다.

 

'uuid' 라이브러리 설치

npm 도는 yarn을 사용하여 'uuid' 라이브러리를 설치할 수 있다.

# npm을 사용하는 경우
npm install uuid

# yarn을 사용하는 경우
yarn add uuid

 

'uuid' 라이브러리 사용 예제

import { v4 as uuidv4 } from 'uuid';

// UUIDv4 생성
const uniqueId = uuidv4();
console.log(uniqueId); // 예: '9b1deb4d-9f5b-41d7-91d7-7f5a8dbcf9c8'

 

UUID 생성 방법

 UUIDv4 (랜덤 값 기반)

• 가장 많이 사용되는 UUID버전. 랜덤 값 또는 의사 난수 값으로 생성되므로 매우 높은 확률로 고유하다.
• 'uuidv4()' 함수를 사용하여 생성할 수 있다.

import { v4 as uuidv4 } from 'uuid';

// UUIDv4 생성
const id = uuidv4();
console.log(id);

 

 UUIDv1 (시간 기반)

• 현재 시간과 노드 정보를 기반으로 생성된다.
• 'uuidv1()' 함수를 사용하여 생성할 수 있다.

import { v1 as uuidv1 } from 'uuid';

// UUIDv1 생성
const id = uuidv1();
console.log(id);

 

 UUIDv3 (이름 기반, MD5 해시)

• 이름과 네임스페이스를 해싱하여 생성된다.
• 'uuidv3()' 함수를 사용하여 생성할 수 있다.

import { v3 as uuidv3 } from 'uuid';

// 네임스페이스 UUID (고정)
const MY_NAMESPACE = '6ba7b810-9dad-11d1-80b4-00c04fd430c8';

// UUIDv3 생성
const id = uuidv3('example.com', MY_NAMESPACE);
console.log(id);

 

 UUIDv5 (이름 기반, SHA-1 해시)

• 이름과 네임스페이스를 해싱하여 생성된다. UUIDv3와 유사하지만 SHA-1 해시를 사용한다.
• 'uuidv5()' 함수를 사용하여 생성할 수 있다.

import { v5 as uuidv5 } from 'uuid';

// 네임스페이스 UUID (고정)
const MY_NAMESPACE = '6ba7b810-9dad-11d1-80b4-00c04fd430c8';

// UUIDv5 생성
const id = uuidv5('example.com', MY_NAMESPACE);
console.log(id);

 

 프론트 개발에서의 활용 방식

프론트 개발에서 UUID는 여러 상황에서 고유한 식별자를 생성하기 위해 사용한다. UUID는 충돌 가능성이 매우 낮은 고유한 값을 생성할 수 있기 때문에, 다음과 같은 다양한 용도에서 유용하게 사용한다고 한다.

 

컴포넌트 키

React와 같은 라이브러리에서 렌더링할 때 고유한 키를 필요로 한다. UUID를 사용하여 리스트 아이템에 고유한 키를 부여할 수 있다.

import React from 'react';
import { v4 as uuidv4 } from 'uuid';

const items = ['Item 1', 'Item 2', 'Item 3'];

const ItemList = () => {
  return (
    <ul>
      {items.map(item => (
        <li key={uuidv4()}>{item}</li>
      ))}
    </ul>
  );
};

export default ItemList;

 

임시 데이터 식별자

사용자가 폼을 통해 데이터를 입력할 때, 서버에 저장되기 전에 임시적으로 고유한 식별자를 부여할 수 있다. 이는 로컬 상태에서 데이터를 관리하는 데 유용하다.

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

const FormComponent = () => {
  const [formData, setFormData] = useState({
    id: uuidv4(),
    name: '',
    email: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 서버에 저장하기 전, 임시 데이터를 처리
    console.log('Form Submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormComponent;

 

드래그 앤 드롭 인터페이스

드래그 앤 드롭 기능을 구현할 때, 각 드래그 아이템에 고유한 식별자가 필요하다. UUID를 사용하여 각 아이템에 고유한 식별자를 부여할 수 있다.

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const ItemTypes = {
  CARD: 'card'
};

const DraggableItem = ({ id, text }) => {
  const [, ref] = useDrag({
    type: ItemTypes.CARD,
    item: { id }
  });

  return <div ref={ref}>{text}</div>;
};

const DropZone = ({ onDrop }) => {
  const [, ref] = useDrop({
    accept: ItemTypes.CARD,
    drop: (item) => onDrop(item.id)
  });

  return <div ref={ref} style={{ height: '400px', border: '1px solid black' }}>Drop here</div>;
};

const DragDropExample = () => {
  const [items, setItems] = useState([
    { id: uuidv4(), text: 'Item 1' },
    { id: uuidv4(), text: 'Item 2' },
    { id: uuidv4(), text: 'Item 3' }
  ]);

  const handleDrop = (id) => {
    console.log(`Dropped item with id: ${id}`);
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <div>
        {items.map(item => (
          <DraggableItem key={item.id} id={item.id} text={item.text} />
        ))}
      </div>
      <DropZone onDrop={handleDrop} />
    </DndProvider>
  );
};

export default DragDropExample;

 

로컬 스토리지 관리

로컬 스토리지에 데이터를 저장할 때, 고유한 키를 생성하여 충돌을 방지할 수 있다.

import { v4 as uuidv4 } from 'uuid';

const saveToLocalStorage = (data) => {
  const id = uuidv4();
  localStorage.setItem(id, JSON.stringify(data));
  console.log(`Data saved with ID: ${id}`);
};

const loadFromLocalStorage = (id) => {
  const data = localStorage.getItem(id);
  if (data) {
    return JSON.parse(data);
  }
  return null;
};

// Usage example
saveToLocalStorage({ name: 'John Doe', email: 'john.doe@example.com' });
const data = loadFromLocalStorage('some-uuid'); // replace 'some-uuid' with an actual UUID
console.log(data);

 

 결론

UUID는 다양한 애플리케이션에서 고유한 식별자를 생성하기 위해 사용되는 표준이다.

'uuid' 라이브러리는 JavaScript에서 간편하게 UUID를 생성할 수 있도록 도와주는 도구이다.

이 라이브러리를 사용하여 UUIDv1, UUIDv3, UUIDv4, UUIDv5와 같은 다양한 UUID 버전을 생성할 수 있다.