[Node] 랜덤 공유 링크는 어떻게 생성할까? (nanoid)

[Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture)

[Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture)

이전 글 읽으러 가기!

🚩 소개

안녕하세요! 대학생 개발자 주이어입니다!
오늘은 nanoid를 사용해서 랜덤 공유 링크를 생성하는 방법에 대해서 정리해보려고 합니다.

 

현재 진행 중인 프로젝트에서 일정 공유 기능이 필요했고, 이 기능을 구현하기 위해 nanoid를 선택하게 되었습니다.

 

랜덤 공유 링크는 Google Docs, Dropbox, Notion, YouTube 등 유명 웹사이트에도 자주 쓰이는 기술이며,

다양한 곳에서 많이 사용되고 있습니다.

---

📌 nanoid란?

nanoid는 빠르고, 작고, 안전하게 고유 ID를 생성할 수 있는 JavaScript 라이브러리 입니다.

uuid보다 가볍고 URL-SAFE한 특성 덕분에 프론트엔드와 백엔드에서 모두 널리 사용됩니다.

 

제가 사용해보며 느낀  nanoid의 주요 특징으로는 아래 4가지 정도가 있는 것 같습니다.

1. URL-SAFE
   • 생성한 ID를 링크로 사용하더라도 문제되지 않음.
   • ?,&과 같이 링크로 사용할 경우 문제가 생길 수 있는 기호는 포함되지 않음.
2. 빠른 속도
   • nanoid는 내부 최적화로 매우 빠른 속도로 ID를 생성함.
3. 작은 크기
   • browser 130B, Node.js 108B로 매우 작은 크기로 사용할 수 있음.
4. 충돌 가능성 낮음
   • base-64 인코딩 방식을 사용하며 21자 생성으로, 수천억 개 ID를 생성해도 충돌할 일이 거의 없음.
   • 또한 보안성을 위해 crypto.randomBytes를 사용하여 높은 엔트로피(entropy)의 난수를 생성함.

위와 같은 특징으로 nanoid는 uuid를 대체하여 많이 사용되는 라이브러리 중 하나입니다.

---

📦 nanoid 사용해보기

npm install nanoid

먼저 node.js 프로젝트 터미널에 위와 같이 입력하여 nanoid 라이브러리를 다운받아 줍니다.

import { nanoid } from 'nanoid';

const id = nanoid();

그리고 위와 같이 입력하여 id를 출력해보면 바로 고유 ID가 생성되는 것을 알 수 있습니다.

기본적으로 21자리의 ID가 생성되지만, 괄호 안에 원하는 길이의 정수를 입력하면 해당 길이에 맞게 ID가 생성됩니다.

(nanoid(10) - 10자리 ID 생성)

import { customAlphabet } from 'nanoid';
const generate = customAlphabet('1234567890abcdef', 10);
console.log(generate());

nanoid 라이브러리에서 지원하는 customAlphabet 함수를 사용하면 원하는 문자 집합으로도 ID를 생성할 수 있습니다.

---

🔗 Express + Next로 랜덤 링크 만들기

⚙️ 백엔드 작업하기

nanoid 사용법은 너무 쉬웠으니 이제 실제 프로젝트에 적용시켜 보도록 하겠습니다.

먼저 백엔드 부분부터 간단하게 정리해보도록 하겠습니다.

import { nanoid } from "nanoid";
import { PrismaClient } from "@prisma/client";
import { findIdToLinkDB } from "./findIdToLinkDB.service.js";
const prisma = new PrismaClient();

export async function addLinkDB(id) {
  const linkId = nanoid(10);

  const isLink = await findIdToLinkDB(id);

  if (!isLink) {
    try {
      const link = await prisma.ShareLink.create({
        data: {
          linkId: linkId,
          scheduleId: Number(id),
        },
      });
      return linkId;
    } catch (err) {
      return err;
    }
  } else {
    try {
      const link = await prisma.ShareLink.update({
        where: { scheduleId: Number(id) },
        data: {
          linkId: linkId,
          scheduleId: Number(id),
        },
      });
      return linkId;
    } catch (err) {
      return err;
    }
  }
}

addLinkDB.service.js의 코드입니다.

현재 프로젝트는 레이어드 아키텍쳐 구조를 따르고 있기 때문에, 전체적인 구조를 모두 보여주기는 어렵지만,

핵심 로직은 다음과 같습니다

• nanoid(10)을 통해 10자리 ID 생성
• prisma를 사용하여 백엔드에 저장
• 이미 데이터가 존재한다면 새로운 ID로 업데이트
• 저장된 ID 반환

백엔드에 저장하는 이유는 해당 ID가 어떤 일정과 연결되어 있는지 프로젝트에 필요했기 때문에 저장하였습니다.

💻 프론트 작업하기

useEffect(() => {
    try {
      fetch(`http://localhost:5000/plan/linkId`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          id: id,
        }),
      })
        .then((res) => res.json())
        .then((data) => {
          setLinkId(data);
        });
    } catch (err) {
      console.log(err);
    }
  }, []);

이 코드는 사용자가 "공유하기" 버튼을 클릭했을 때 실행되는 ShareModal 컴포넌트 내부의 useEffect 부분 입니다.

 

해당 코드는 서버에 요청을 보내 고유 ID를 받아오고,
받아온 고유 ID를 setLinkId를 통해 useState 변수에 저장하는 기능을 수행하고 있습니다.

<div onClick={(e) => e.stopPropagation()} className={style.content}>
    <h2>일정 공유</h2>
    <hr />
    <p className={style.text}>링크 - link</p>
    <p id={style.dd}>http://localhost:3000/share/{linkId}</p>
    <div className={style.buttonWrap}>
      <button className={style.button} onClick={onClickConfirm}>
        확인
      </button>
    </div>
</div>

위 코드는 사용자 화면에 보여지는 html 부분으로,

5번째 줄을 보면 생성된 고유 ID로 링크를 생성하는 것을 알 수 있습니다.

 

사용자는 해당 링크를 복사하여 다른 사람에게 전달할 수 있습니다.

---

✅ 프로젝트 결과

nanoid로 생성된 링크

사진을 보면 nanoid로 생성된 고유 ID가 포함된 링크가 성공적으로 표시되는 것을 알 수 있습니다.

재생성된 링크

다시 공유 버튼을 누르면 기존 링크는 삭제되고 새로운 고유 ID로 링크가 생성되는 것을 알 수 있습니다.

해당 링크로 들어가면 공유된 정보가 나오는 것 까지 확인할 수 있었습니다.(Next 동적 라우팅 사용하여 처리)

---

😊  마무리

지금까지 nanoid를 사용하여 랜덤 공유 링크를 생성하고, 백엔드에 저장하고, 이를 프론트에서 활용하는 전체 플로우를 구현하고 정리해보았습니다.

소개 부분에 얘기했듯이 고유 ID를 생성하여 링크로 사용하는 기술은 많은 웹사이트에서 사용 중인 기술이고,
다양한 서비스에 유용하게 적용시킬 수 있는 기술이니 많은 분들이 활용해보셨으면 좋겠습니다.

 

지금까지 읽어주셔서 감사드리고, 다음에는 더 좋은 글로 찾아오도록 하겠습니다!

 

💬 함께 공부하고 싶은 내용이 있다면 댓글이나 피드백으로 알려주세요!

 

[TRAIVEL] 개인 맞춤형 여행 일정 생성 플랫폼 TRAIVEL

[TRAIVEL] 개인 맞춤형 여행 일정 생성 플랫폼 TRAIVEL

추천 글 읽으러 가기!

 

https://discord.gg/8Hh8WgM4zp

KYT CODING COMMUNITY Discord 서버에 가입하세요!

KYT CODING COMMUNITY 가입하기!