개발

온라인 UUID 생성기 제작 및 비화

가끔 업무를 하다가 대량의 uuid를 만들어야 하는 경우가 발생한다.
나같은 경우는 게시글 데이터 이전을 할때 새로운 게시글 구조에서는 기존에 사용하지 않는 uuid 방식으로 고유값을 이용하는데, 보통 이전 db구조에서 그런걸 쓰지않다보니 개수에 맞게 uuid를 만들어야 하는 경우가 종종 있다.

그럴때 일반적으로 쿼리문을 통해서 uuid를 만드는경우도있는데, 직접 데이터베이스를 열어 uuid 배열을 넣는경우도 발생한다.

이때 보통 온라인에서 uuid를 생성해주는 사이트를 찾아 이용하는데, 나도 이런 페이지가 내 사이트에 있으면 좋을거 같아서 관련 지식을 찾아 GPT와 함께 아래처럼 만들어보았다.

본문 이미지

UUID 생성기
UUID 생성기

https://erulabo.com/uuid-generator

uuid는 아래와 같이 버전별 특징이 존재한다.

버전특징
v1Timestamp + MAC Address
v3MD5 + 네임스페이스
v4Random
v5SHA1 + 네임스페이스
v6~8최신 RFC

주로사용하는건 1버전과 4버전이다.
uuid는 RFC4122 구조 규칙을 준수하고 버전별 생성규칙을 따라 생성된다.

나는 이걸 온라인상에서 구현해야하므로 완전랜덤구현이 가능한 버전4와 MAC 주소를 랜덤값으로 대체한 버전1을 자바스크립트로 구현해보았다.

function uuidv4() {
    // RFC4122-compliant UUID v4
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0;
        const v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

function uuidv1() {
    const timeLow = Date.now().toString(16).padStart(8, '0').slice(-8);
    const timeMid = Math.floor(Math.random() * 0xffff).toString(16).padStart(4, '0');
    const timeHighAndVersion = (0x1000 | (Math.floor(Math.random() * 0x0fff))).toString(16); // version 1
    const clockSeq = (0x80 | Math.floor(Math.random() * 0x3f)).toString(16).padStart(2, '0') +
        Math.floor(Math.random() * 0xff).toString(16).padStart(2, '0');
    const node = Array.from({ length: 6 }, () =>
        Math.floor(Math.random() * 256).toString(16).padStart(2, '0')
    ).join('');

    return `${timeLow}-${timeMid}-${timeHighAndVersion}-${clockSeq}-${node}`;
}Copy

UUID의 특징은 세번째 세그먼트(블록)의 첫번째 글자가 버전을 나타낸다는 것이다.
그이외의 값은 각자의 규칙에 맞게 위에처럼 채워진다.

그리고 이를 주어진 설정값과 출력 설정을 기반으로 아래처럼 구현하면 자바스크립트로 쉽게 uuid 대량데이터를 생성할 수 있다.

function generateUUIDs() {
    const type = document.querySelector('input[name="type"]:checked')?.value;
    const isUppercase = document.querySelector('input[name="case"]:checked')?.value === '2';
    const countInput = document.querySelector('.ps_input input[type="text"]');
    const count = Math.max(1, Math.min(parseInt(countInput.value || '10'), 1000));

    const resultDiv = document.getElementById('result');
    const uuids = [];

    for (let i = 0; i < count; i++) {
        let uuid = (type === '1') ? uuidv1() : uuidv4();

        if (isUppercase) {
            uuid = uuid.toUpperCase();
        }

        uuids.push(uuid);
    }

    const resultText = uuids.join('\n');
    const highlightedCode = hljs.highlightAuto(resultText, ['apache']).value;
    resultDiv.innerHTML = `<pre><code class="hljs">${highlightedCode}</code><span class="hljs-ctc" onclick="ctcCode(this)">Copy</span></pre>`;

    toast?.('UUID값이 생성되었습니다.', TOAST_INFORMATION, true);
}Copy

실제로 출력되는 결과는 아래처럼 보이며 내 사이트에 적용한 하이라이터를 통해서 내용을 쉽게 보고 복사할 수 있게 구현했다.

본문 이미지실행결과

최소 1개의 값에서 최대 10,000개의 값을 출력할 수 있게 만들어놓았으며 버튼을 통해 쉽게 1, 10, 100단위로 출력 개수를 설정할 수 있는 기능도 추가했다.

끝!

#JavaScript
0 개의 댓글
×