그날의 공부기록
Home
  • FrontEnd Archive (222)
    • ✨ 기억보다 기록을 (51)
      • 트러블슈팅 (9)
      • 프로젝트 (42)
    • 📚 이론정리 (132)
      • React & Next.js (71)
      • JS & TS (16)
      • CSS (28)
      • HTML (6)
      • 알고리즘 (11)
    • 🐶 etc (39)
      • Github (6)
      • 디자인 (1)
      • VSCode (3)
      • 2022기록 (29)
Home
  • FrontEnd Archive (222)
    • ✨ 기억보다 기록을 (51)
      • 트러블슈팅 (9)
      • 프로젝트 (42)
    • 📚 이론정리 (132)
      • React & Next.js (71)
      • JS & TS (16)
      • CSS (28)
      • HTML (6)
      • 알고리즘 (11)
    • 🐶 etc (39)
      • Github (6)
      • 디자인 (1)
      • VSCode (3)
      • 2022기록 (29)
블로그 내 검색

그날의 공부기록

seokachu's Front-End Archive 🙂

  • 📚 이론정리/React & Next.js

    ✏️ crypto.randomUUID()와 uuid 설치

    2024. 1. 26.

    by. 서카츄

     

    UUID란 뭐임?

    UUID는 (Universally Unique IDentifier)의 약어로 범용 고유 식별자 라는 의미이다.

    crypto(크립토) → 암호라는 뜻

    특수한 메서드이고, 랜덤한 uuid를 생성해주는 자바스크립트 node.js다.

     

     

     

    UUID의 종류

    `v1`: 타임스탬프(시간) 기준
    `v3`: MD5 해시 기준
    `v4`: 랜덤값 기반
    `v5`: SHA-1 해시 기준
    랜덤값 기반으로 생성되는 `v4`가 가장 많이 사용되고, 다음으로는 시간 기준인 `v1`이 많이 사용된다.

     

     

     

     

     

    사용법

    crypto.randomUUID();

     

    랜덤 uuid를 사용하면 패키지 설치 없이 랜덤의 uuid를 생성해준다.

    랜덤한 유니크 유저 id를 생성해서 겹치지 않는다. 

     

     

     

     

     

    uuid를 넣고 콘솔에 찍어보면

     

    이렇게 길게 나와서 웬만하면 겹치지 않는 유니크한 id를 생성해준다.

     

     

     

    설치하는 방법도 있다.

    # npm
    npm install uuid
    
    # yarn
    yarn add uuid
    
    # v4 만 설치
    npm install uuid4

     

     

     

     

    사용하고자 하는 컴포넌트에 import 해준다.

    import { v4 as uuidv4 } from "uuid";

     

    사용하고자 하는 곳에 `id : uuid()` 적어주면 된다.

     

     

     

     

     

     

     {
          id: uuidv4(),
          month: 2,
          date: "2024-02-02",
          item: "식비",
          amount: 50000,
          description: "회식",
        }

     

    목업 데이터로 객체에 넣을 때는 이렇게도 사용할 수 있다.

    저작자표시 비영리 변경금지 (새창열림)

    '📚 이론정리 > React & Next.js' 카테고리의 다른 글

    ✏️ React의 Link, useNavigate  (1) 2024.01.29
    ✏️ React의 useParams, useLocation 그리고 Query String  (1) 2024.01.27
    ✏️ React Router의 중첩라우팅, Outlet 사용하기  (0) 2024.01.24
    ✏️ React의 props와 props drilling  (1) 2024.01.24
    ✏️ 브라우저 렌더링 과정(Critical Render Path)  (0) 2024.01.24

    댓글

    관련글

    • ✏️ React의 Link, useNavigate 2024.01.29
    • ✏️ React의 useParams, useLocation 그리고 Query String 2024.01.27
    • ✏️ React Router의 중첩라우팅, Outlet 사용하기 2024.01.24
    • ✏️ React의 props와 props drilling 2024.01.24
맨 위로
전체 글 보기
  • Github
Tistory 로그인
Tistory 로그아웃
로그아웃 글쓰기 관리

Today

Total

seokachu's 기록저장소

블로그 이미지
서카츄

티스토리툴바