faker란?
하드코딩을 통해서 가짜 데이터를 만들 수도 있지만, 규모가 커진다면 가짜 데이터를 만들기 힘들 것이다!
그럴 때 이 가짜 데이터를 생성해주는 라이브러리를 사용할 수 있는데,
한번 알아보자!
설치
** 주의
npm i faker로만 설치하면 다른 라이브러리가 깔린다!
꼭 faker-js/faker를 설치하기
npm i -D @faker-js/faker사용법
faker.js는 여러 범주를 가지고, 그 범주에서 함수를 호출하는 방식이다.
예를들어 내가 사람 데이터가 필요한데, 그 데이터의 First Name만 알고 싶다면
faker.person.firstName()
상품정보 알고 싶다면
faker.commerce.product()
등 여러 데이터를 이용할 수 있다!
더 많은 데이터는 문서 참고
z.com 에서 사용
우리는 image를 사용할 건데,
이렇게 4가지가 있었다.
urlLoremFlicker는 https://loremflickr.com
urlPicsumPhotos는 https://picsum.photos
urlPlaceholder는 https://via.placeholder.com/
각각 해당 사이트에서 사진을 가져온다.
그럼 url은 뭐지?
공식 문서엔 이렇게 적혀있었다.
loremflicker에서 가져오면 urlLoremFlicker랑 같은 거 아닌가??
그냥 랜덤 이미지 중 하나인 것을 저렇게 표현한 거 일까? 하고 내 로컬에서도 돌려보았다.
진짜 loremflicker에서만 이미지를 가져왔다.
그럼 뭐가 다른 거지?
링크에 집중하지 않고 보면 답이 바로 나왔다!
parameter가 달랐다.
-> urlLoremFlicker를 사용하면 category params를 사용할 수 있다 :D
-> 더 다른 내용이 있을 수도 있겠지만 일단 내가 찾은 두 개의 차이점은 이거다!
따라서 z.com에서는 urlLoremflicker를 사용해보려한다
(강의에서도 urlLoremflicker를 사용했음)
코드
const target = {
postId: 1,
User: {
id: 'elonmusk',
nickname: 'Elon Musk',
image: '/yRsRRjGO.jpg',
},
content: 'z.com 클론코딩!',
createdAt: new Date(),
Images: [],
}
if (Math.random() > 0.5 && !noImage) {
target.Images.push(
{imageId: 1, link: faker.image.urlLoremFlickr()},
{imageId: 2, link: faker.image.urlLoremFlickr()},
{imageId: 3, link: faker.image.urlLoremFlickr()},
{imageId: 4, link: faker.image.urlLoremFlickr()},
)
}-> 이미지가 들어갈 곳에 faker.image.urlLoremFlicker()를 넣어준다.
여기에서 신기했던 점은 글만 쓸 수도 있고, 사진이 들어갈 수도 있으니 random()을 통해서 짰다는 점이다!!
무튼 이렇게 되면 0.5 확률로 이미지가 나오거나 안 나오게 되고
이미지 4개가 무사히 나오게 된다 !
