Faker.js 라이브러리 (꼭 쓰세요!)

Faker.js는 더미 데이터를 생성해주는 라이브러리다. 이미지도 숫자도 텍스트도 모두 생성해준다.

React에 넣을 더미 데이터를 이미지 따로, 글 따로~ 무료 공개 API를 검색해서 일일이 붙이느라 덕지덕지 코드가 붙어 힘들었는데, 이제는 실제 서버 API를 붙이기 전까지 faker.js로 간편하게 더미데이터 뭉치를 만들 수 있다.

실 서버에서는 API에서 응답받은 데이터를 객체로 받아서 컬럼마다 떼어 쓸 것이므로 이쪽이 좀 더 적절해 보인다.

 

npm install @faker-js/faker --save-dev

 

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

const example = () => {

  const dummyData = {
    name: faker.name.firstname(),
    img: faker.image.avatar(),
    description: faker.lorem.sentence(3)
  }
  
  return (
    <div>
      <div>{dummyData.name}</div>
      <div><img src={dummyData.img} alt="avatar"/></div>
      <div>{dummyData.description}</div>
    </div>
  )
}

export default Example

 

이런 식으로 조합해서 사용하면 된다.

제공되는 더미데이터 종류마다 사용법에 약간의 차이가 있으니 사이트를 참조하자.

 

image 는 () 안에 width, height, random(boolean) 을 받는다. random을 true로 설정하면

상태가 바뀔 때마다 이미지도 모두 랜덤하게 바뀐다.

게시글마다 이미지가 전부 다른 모습을 보고 싶다면 true로 설정하고 사용하면 된다.

 

이름이나 문장 또는 숫자의 경우에는 random 여부를 넣지 않아도 상태가 바뀌면 계속 새롭게 바뀌었던 거 같다.

 

※ 주의점

Next.js 에서는 생성되는 더미 이미지의 주소를 next.config.js의 images: { domains: ['image.com'] } 이런 식으로 넣어주고 프로젝트를 구동해야 오류가 나지 않는다. 이미 구동한 뒤에는 next.config.js를 수정해도 오류메세지는 변동이 없으니 서버를 껐다가 다시 실행하도록 하자.

 

https://fakerjs.dev/guide/

Getting Started | Faker