Next.js의 uuid 생성및 사용

서론

프론트엔드 프로젝트를 진행하다보면 클라이언트 사이드에서

직접적으로 UUID를 생성해야 하는 경우가 존재합니다.

이 때 주의할 점과 어떻게 생성해야 할지 말해보겠습니다.

UUID v4

가장 많이 사용되는 라이브러리이며 가볍기에 코드에 부담도 되지 않으며, 사용 방법또한 쉽습니다.

따로 yarn, npm 같은 패키지모듈을 통하여 설치를 해줘야합니다.

yarn add uuid
npm install uuid

import { v4 as uuidv4 } from "uuid";

....
const uuid = uuidv4();

crypto.randomUUID()

crypto는 가볍게 사용이 가능하고, 설치또한 필요없는 JS의 내장 모듈이지만 React.js 같은 프론트엔드 기반의 라이브러리 에서는 사용시 주의점이 존재합니다.

crypto는 기본적으로 node.js(JS runtime)의 모듈이기 때문입니다.

이는 client 환경에서는 사용이 불가능하며 오로지 서버의 영역에서만 다루어지게 됩니다.

Q. server component에서는 사용이 가능한가?

A. 불가능합니다. node.js의 모듈임을 인식해야하고, server component더라도 js환경이며

 js rumtime이 아님을 인지 해야합니다.

Q. client는 무조건 사용할 수 없나?

A. 일부 최신 브라우저에서는 사용 할 수 있습니다. 단 아래처럼 브라우저임을 명시해야 합니다.

// 명시 하지 않을경우 dev환경에선 window객체로 접근할 수 있지만.
// 실제 배포 환경에서는 node.js의 js runtime모듈로 인식 될 수 있습니다.
window.crypto.randomUUID();  

하지만 window객체에 내장된 crypto는 일부 기능이 제한되며 (구)버전의 브라우저들은 지원이 안되는 경우가 존재하기에 사용을 지양하는것이 좋습니다.

물론 명시한다해도 window객체 자체가 undefined상태이면 안되니 검증이 필요합니다.

// 추천방법(하지만 라이프사이클이 추가됨으로 무거운 화면엔 좋지 않습니다. )
useEffect(() => {
  if (typeof window !== "undefined" && crypto?.randomUUID) {
    setUuid(crypto.randomUUID());
  }
}, []);

// 비추천 방법 
const uuid = typeof window !== "undefined" ?  window.crypto.randomUUID(): Math.random()