[React] fakerjs, shortid를 이용해서 그럴싸한 DummyData 만들기.

[React] fakerjs, shortid 를 이용해서 현실적인 DummyData 만들기.

---

안녕하세요. 이번 포스팅에서는 fakerjs와 shortid를 이용해 , 그럴싸한 DummyData를 만드는 방법을 알아보겠습니다.

 

프론트엔드 개발을 하면서, 백엔드가 완성되지 않았을 경우 원활한 작업 진행을 위해 DummyData가 필요한 일이 분명 있을 거에요 ! 

 

fakerjs 와 shortid를 활용하면 쉽게 DummyData를 만들어서 이용 할 수 있습니다.

예시 코드와 함께 어떤식으로 DummyData를 만들 수 있는지 확인해 봅시다.

 

> generateDummyPost : 더미데이터를 생성해주는 함수.

import shortId from 'shortid';
import faker from 'faker';

export const generateDummyPost = (number: number) =>
  Array(number)
    .fill('')
    .map(() => ({
      id: shortId.generate(),
      User: {
        id: shortId.generate(),
        nickname: faker.name.findName(),
        profile_image: faker.image.cats(),
      },
      content: faker.lorem.paragraph(),
      Images: [
        {
          src: faker.image.image(),
        },
      ],
      Comments: [
        {
          User: {
            id: shortId.generate(),
            nickname: faker.name.findName(),
            profile_image: faker.image.cats(),
          },
          content: faker.lorem.sentence(),
          created_at: '2022-03-11',
          replies: [
            {
              content: faker.lorem.sentence(),
              created_at: '2022-03-11',
              User: {
                id: shortId.generate(),
                nickname: faker.name.findName(),
                profile_image: faker.image.cats(),
              },
            },
          ],
        },
      ],
    }));

> DummyData 생성하기

// 더미데이터 20개 생성하기
console.log(generateDummyPost(20));