[Javascript] NanoId, @faker-js/faker (더미데이터 만들기)

 

 

[Javascript] NanoId, @faker-js/faker (더미데이터 만들기)

보통 프론트 개발을 하다보면 더미데이터가 필요할 때가 있다.

백엔드에서 api를 공유해주기 전 데이터가 많을 때, 생성할때 삭제할 때 등등 여러가지 경우에 꼭 필요한데

전까지는 직접 간단히 만들어서 사용했었다.

아시파시피 이런 일은 정말 귀찮고 번거로운 일이다.

아이디, 이름 생각해 내는것도 쓸데없이 피곤해서 이름1, 2, 3 이런식을 붙여주기도 한다.

그러면 멋도 안나고 테스트로서의 기능도 좋지 않다.

그러다 이번에 강의를 들으면서 만나게 된 자바스크립트 라이브러리인

NanoId, @faker-js/faker를 소개하려 한다.

 

 

 

 

 

NanoId

NanoID는 짧은, URL 친화적인 유니크 ID를 생성하는 라이브러리입니다.

이 라이브러리는 매우 가볍고, UUID에 비해 더 짧은 ID를 제공합니다.

NanoID는 충돌 확률이 매우 낮으며, 다양한 환경에서 사용하기 적합합니다.

아이디 만드는 고민을 없애주는 라이브러리 입니다.

기존에는  shortId를 사용했다고하는데 deprecated되어 nanoId를 많이 사용한다고 합니다.

NanoID는 충돌 확률이 낮고 암호학적으로 안전한 난수 생성기를 사용하여 ID를 생성합니다.

 

사용법

설치

npm i -D nanoid

 

 

사용

import { nanoid } from 'nanoid';

기본 ID 생성
console.log(nanoid());  // 예: 'm3B_s-3PAjQ'


커스텀 길이의 ID 생성 : 
ID의 길이를 조정할 수 있습니다,
더 길거나 짧은 ID를 원하는 경우 설정할 수 있습니다.
console.log(nanoid(10));  // 10자 길이의 ID 생성

 

 

 

 

 

@faker-js/faker

테스트와 개발을 위해 가짜 데이터(더미 데이터)를 생성할 수 있는 자바스크립트 라이브러리입니다.

데이터베이스, 프론트엔드 프로토타이핑, 서버 사이드 애플리케이션 테스팅 등에서 유용하게 사용됩니다.

다양한 언어 지원해서 한글로도 사용할 수 있는데 한글은 아직 좀 부족한거 같아 기본 영어 추천합니다.

 

사용법

설치

npm i -D @faker-js/faker

 

 

사용

import { faker } from '@faker-js/faker';

기본 사용자 정보 생성 //
const name = faker.name.findName(); // 가짜 이름 생성
const email = faker.internet.email(); // 가짜 이메일 생성
console.log(name, email);  // 예: 'John Doe', 'john.doe@example.com'

날짜 생성 //
const date = faker.date.past(10); // 과거 10년 이내의 날짜 생성
console.log(date);  // 예: 2015-02-20T02:38:52.702Z

이미지 URL 생성 //
const imageUrl = faker.image.imageUrl();
console.log(imageUrl);  // 예: 'http://placeimg.com/640/480/any'

사용자 정의 데이터 //
const customUser = {
  name: faker.name.findName(),
  email: faker.internet.email(),
  dob: faker.date.past(30),
};
console.log(customUser);

 

 

예시

faker.seed(123);
const createDummyPost = () => {
    return {
        id: nanoId(),
        User: {
            id: nanoId(),
            nickname: faker.person.fullName(), // 더미데이터 이름
        },
        content: faker.lorem.paragraph(), // 더미데이터 로엠 이미지 만들기
        Images: [{ src: faker.image.urlLoremFlickr() }],
        Comments: [
            {
                User: {
                    id: nanoId(),
                    nickname: faker.person.fullName(), // 더미데이터 이름
                },
                content: faker.lorem.sentence(), // 더미데이터 컨텐츠 내용
            },
        ],
    };
};
// 여러 게시글 생성
export const generateDummyPosts = (number) =>
    faker.helpers.multiple(createDummyPost, {
    	count: number,
	});

 

 

함수 설명

• faker.helpers.multiple( 더미데이터 객체 리턴하는 함수 선언, 원하는 갯수가 들어간 객체 )
  • 더미 데이터를 한번에 원하는 만큼 만들 수 있다.

faker.helpers.multiple(createDummyPost, {
     count: number,
})

 

 

• faker.seed( 숫자 )
  • @faker-js/faker 라이브러리에서 데이터 생성의 일관성과 반복 가능성을 보장하기 위해 사용됩니다.
  • 이 함수를 사용하여 시드 값을 설정하면, 그 후 생성되는 모든 가짜 데이터는 초기 시드 값에 따라 결정되므로 같은 시드 값을 사용할 때마다 동일한 데이터를 반복적으로 생성할 수 있습니다.
  • next (ssr) 에서 faker로 더미데이터를 만들면 서버와 클라이언트 간의 데이터가 맞지 않다는 에러가 나올때가 있다. 이때 faker.seed( 숫자 ) 를 넣고 실행하면 에러 사라집니다.

faker.seed( 123 )

 

 

 

 

결과

위 두 데이터로 만든 더미데이터 덕분에

회원가입, 데이터 호출 할때도 아무걱정 없이 테스트할 수 있게 되었다.

이런 데이터를 매번 직접 만든다고 생가하면 어후...

프론트에서 작업할 때 사용하면 좋을 것 같습니다.