faker 라이브러리의 seed 사용하여 데이터 고정시키기

들어가며😃

---

현재 진행하고 있는 프로젝트에서 실제 서비스 api를 사용할 수 없어 대안으로 가짜 데이터를 생성하여 사용하고 있다. 이 가짜 데이터를 하나하나 생성하기엔 비효율적이라 faker 라이브러리를 사용하였다. 써보니 데이터를 생성하는데 시간을 엄청나게 아껴주고, 지원하는 데이터 형식도 다양하여 만족도가 높은 라이브러리였다. 그런데 데이터가 랜덤으로 생성되다 보니 테이블 같은 데이터에 페이커를 사용하면 원하는 페이지에 항상 똑같은 데이터가 들어오지 않는 현상이 있었고 이를 또 seed 라는 api로 제어할 수 있어 해당 방식을 정리해보려 쓰는 오늘의 포스팅이다.

faker.js 간단한 사용법

---

사용법은 faker.범주.함수() 형태로 간단하다.
아래의 로직을 로그로 찍어보면 랜덤한 사람의 이름이 찍히는 걸 확인할 수 있다. 이렇게 손쉽게 데이터를 생성할 수 있다니,,!🫢

console.log(Array.from({ length: 5 }, () => faker.person.firstName()));

faker 에서 사용할 수 있는 api 들이 공식 홈페이지 에 잘 정리되어 있으니 필요한 형식을 잘 가져다 쓰면 될 것 같다.

이슈 재현

---

위에서 한번 언급했듯이, faker 로 데이터를 생성하면 항상 랜덤한 데이터를 생성해준다. 이는 크게 문제가 되지 않지만, 내가 사용하려는 데이터는 table에 넣을 데이터였기 때문에 문제가 되는 케이스였다.

위의 이미지를 참고하면 1페이지에서 첫번째 데이터는 Pam Bayer 이라는 이름을 가진 데이터였다. 그리고 2페이지에서는 Billy Rodriguez 라는 이름, 그리고 다시 1페이지로 돌아갔을때 보이는 첫번째 데이터는 Mitchell Schuppe 라는 이름으로 바뀌어져있다. 다시 다른 페이지로 갔다가 1페이지로 돌아와도 계속 데이터가 바뀐다. OMG~

랜덤한 데이터는 갖고 싶지만 고정된 데이터도 갖고 싶어🤷🏻‍♀️

내가 원하는 것은 랜덤 데이터가 맞긴 하지만, 페이지를 옮겨간대도 돌아왔을때에는 같은 데이터를 보여줘야 했다. 그리고 검색을 해보다 seed 라는 기능을 알게 되었다.

seed 사용법

---

시드는 초기값을 설정하는 역할을 하는데, 시드를 설정하면 동일한 시드를 사용하여 여러 번 데이터를 생성해도 항상 동일한 결과를 얻을 수 있다. 이를 통해 데이터를 고정하거나 재현 가능하게 만들 수 있는 것 이다.

나는 아래와 같이 로직을 설정해주었다.

const getTableData = (page: number, index: number): DataType => {
  faker.seed(index + 1 + (page - 1) * 5); // 페이지에 따른 테이블 인덱스 번호
  return {
    key: faker.string.uuid(),
    name: faker.person.fullName(),
    age: index + 1 + (page - 1) * 5,
    job: faker.person.jobTitle(),
  };
};

const tableData = Array.from({ length: 5 }, (_, index) =>
  getTableData(page, index)
);

faker.seed(index + 1 + (page - 1) * 5) 로직을 통해 시드를 생성하고 있는데, 각 페이지네이션의 페이지와 데이터의 순서(index)를 계산하여 데이터에 1부터 고유한 숫자를 부여하였다. 그리고~~

짜잔~! 이제 페이지가 바뀌어도 데이터가 고정적으로 설정이 된다. 간단한 seed 사용법 참 쉽쥬~?😇

---

회사에서 api가 아닌 가짜 데이터를 생성해 사용하고 있는것도 신기한 경험이지만 덕분에 유익한 라이브러리 하나를 알게된 것 같다. 프론트 개발자 혼자 미니 프로젝트를 진행할 때도 유용하게 쓰일것 같은 느낌? 여튼 오늘도 스킬업 완료!👍🐥🚀