uuid(한국어)

고유한 식별자를 생성하는데 사용되는 알고리즘입니다. 이 알고리즘은 네트워크에서 생성된 모든 UUID가 전 세계적으로 고유함을 보장하며, 이는 시간과 공간에 무관하게 중복되지 않음을 의미합니다.

Features

  1. 고유성: UUID는 전 세계 어디서든 고유하게 생성될 수 있습니다. 이는 데이터베이스, 파일, 클라우드 등에서 객체를 고유하게 식별하는 데 필수적인 요소입니다.

  2. 비추적성: UUID는 랜덤하게 생성되므로, 생성된 UUID만으로는 생성 주체나 시간, 위치 등을 추적할 수 없습니다. 이러한 특성으로 인해 개인정보 보호와 같은 분야에서 중요한 역할을 합니다.

  3. 확장성: UUID는 국제 표준이며, 확장 가능한 길이를 가지고 있어 미래에도 충분한 고유 식별자를 생성할 수 있습니다.


Installation

npm i uuid는 Node.js 환경에서 Universally Unique Identifier (UUID)를 생성하는 데 사용되는 uuid라는 패키지를 설치하는 명령어입니다.

Installation

npm install uuid

Usage

'uuid' 라이브러리는 고유한 식별자를 생성하므로, 웹 서버에서 요청을 추적하거나, 데이터베이스 레코드를 고유하게 식별하는 등의 작업에 이용될 수 있습니다.

  • Name
    uuid import
    Type
    사용법
    Description

    v1 또는 v4 함수를 호출하여 UUID를 생성할 수 있습니다.

주의 사항

  • Name
    중복 사용 방지
    Type
    주의 사항
    Description

    UUID는 각 호출시마다 고유한 값을 생성하므로, 같은 프로젝트 내에서 UUID를 중복 사용하지 않도록 주의해야 합니다.

  • Name
    예측 불가능
    Type
    주의 사항
    Description

    UUID는 랜덤하게 생성되므로 예측이 불가능합니다. 따라서 UUID를 암호화 키나 비밀번호 등에 직접 사용하는 것은 권장되지 않습니다.

  • Name
    렌더링 주의
    Type
    주의 사항
    Description

    React 등의 프레임워크에서 컴포넌트의 key값 등으로 UUID를 사용할 경우, 렌더링마다 새로운 값이 생성되므로 이를 주의해야 합니다. 이로 인해 예상치 못한 렌더링 문제가 발생할 수 있습니다.

  • Name
    충돌 가능성
    Type
    주의 사항
    Description

    이론적으로 UUID는 고유하지만, v4 (random) UUID의 경우 충돌 가능성이 있습니다. 실제로 이 확률은 매우 낮지만 완벽히 제외할 수는 없습니다. 따라서, 특정 사용 사례에서는 UUID만으로 고유성을 보장하는 것이 부족할 수 있으므로 추가적인 고유성 검사를 수행해야 할 수 있습니다.

Usage

const { v1: uuidv1, v4: uuidv4 } = require('uuid');

console.log(uuidv1()); // '6c84fb90-12c4-11e1-840d-7b25c5ee775a'
console.log(uuidv4()); // '16fd2706-8baf-433b-82eb-8c7fada847da'


Customization

'uuid' 라이브러리는 UUID를 생성하는 방법에 따라 몇 가지 버전을 제공하고 있습니다. 그 중에서도 가장 널리 사용되는 것이 v1과 v4입니다. 각 버전의 UUID는 고유한 방식으로 생성되며, 이는 일종의 "사용자 정의" 기능이라고 할 수 있습니다.

설명

  • Name
    v1
    Type
    사용자화
    Description

    이 버전의 UUID는 타임스탬프와 머신의 MAC 주소를 기반으로 생성됩니다. 따라서 생성 시점의 시간과 생성한 머신에 따라 결과값이 달라집니다. 이를 사용자 정의한다는 관점으로 본다면, 여러 대의 머신에서 동시에 UUID를 생성하는 분산 시스템에서 유용할 수 있습니다. 하지만 MAC 주소를 포함하므로 개인 정보 문제가 발생할 수 있습니다.

  • Name
    v4
    Type
    사용자화
    Description

    이 버전의 UUID는 랜덤한 값으로 생성됩니다. 각 자리의 값을 사용자가 임의로 설정하는 것은 불가능하지만, 생성되는 UUID의 무작위성이 사용자 정의의 한 형태라고 볼 수 있습니다. 랜덤 UUID는 어떤 기계에서 생성하든 동일한 확률로 같은 값을 생성할 수 있기 때문에, 동일한 머신에서만 UUID를 생성하는 시스템에서 유용할 수 있습니다.

Customization

import { parse as uuidParse } from 'uuid';

// Parse a UUID
const bytes = uuidParse('6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b');

// Convert to hex strings to show byte order (for documentation purposes)
[...bytes].map((v) => v.toString(16).padStart(2, '0')); // ⇨
// [
// '6e', 'c0', 'bd', '7f',
// '11', 'c0', '43', 'da',
// '97', '5e', '2a', '8a',
// 'd9', 'eb', 'ae', '0b'
// ]

Example

고유한 key를 가져야하는데, 여기서는 uuidv4()를 이용하여 각 엘리먼트에 대한 고유한 key를 생성해주고 있습니다. uuidv4는 고유성이 보장되므로 각 엘리먼트에 대한 고유한 key를 생성하는데 적합합니다.

추가 설명

  • Name
    re-render
    Type
    예시
    Description

    uuidv4()를 map 함수 내부에서 호출하고 있으므로, 컴포넌트가 re-render될 때마다 새로운 key가 생성됩니다. 이는 React가 불필요한 re-render를 수행하게 만들어 성능을 저하시키고, 상태가 유지되지 않는 문제를 유발할 수 있습니다.

  • Name
    해결책
    Type
    예시
    Description

    rewards의 각 항목이 이미 고유한 id를 가지고 있다면 그 id를 key로 사용하는 것이 좋습니다. 아니라면 rewards 데이터를 처음 생성하거나 받아올 때 각 항목에 uuid를 부여하고, 그 uuid를 key로 사용하는 것이 더 바람직합니다. 이렇게 하면 컴포넌트가 re-render될 때마다 새로운 key가 생성되는 문제를 방지할 수 있습니다.

/lostark/calendar.jsx

import React from 'react'

import { v4 as uuidv4 } from 'uuid'

export default function Reward({ rewards }) {
    return (
        <div className="p-6">
            <h2 className="mb-4 text-2xl font-bold">보상</h2>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
                {rewards.map((reward) => (
                <div className="rounded-lg border p-4" key={uuidv4()}>
                    <h3 className="text-xl font-semibold">{reward.name}</h3>
                    <span className="text-sm text-gray-500">{reward.type}</span>
                    <ul className="mt-2 list-inside list-disc">
                    {reward.items.map((item) => (
                        <li key={uuidv4()}>{item}</li>
                    ))}
                    </ul>
                </div>
                ))}
            </div>
        </div>
    )
}