일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- recoil
- async/await
- 반공변성
- Jest
- SSR
- 태그된 유니온
- Promise
- 타입 좁히기
- 이분 검색
- webpack
- 호이스팅
- autosize
- RTK Query
- Cypress
- CI/CD
- 리터럴 타입
- 투포인터
- app router
- React
- 무한 스크롤
- ESlint
- 공변성
- TS
- useAppDispatch
- map
- 인터섹션
- 결정 알고리즘
- tailwind
- dfs
- CORS
Archives
- Today
- Total
짧은코딩
faker를 활용한 더미데이터 본문
반응형
faker
-npm 사이트
https://www.npmjs.com/package/faker
faker로 가상의 더미데이터를 만들어 api가 만들어지지 않은 상황에서 미리 구현할 수 있다. 프론트엔드 개발자라면 faker로 더미데이터를 여러 개 만들어서 성능을 높이는 방법도 좋을 것 같다.
faker를 최신 버전으로 설치하면 절대 안된다! 궁금하다면 "faker.js 사태"를 검색해본는 것이 좋다. 따라서 5버전 이하를 다운 받는 것이 좋다.(6버전은 절대 안된다)
npm i -D faker@5
//또는
npm i -D @faker-js/faker
위 2개 중에서 선택하여 설치를 해야 한다.
사용법
import faker from "faker";
// ...
initialState.mainPosts = initialState.mainPosts.concat(
Array(20)
.fill()
.map(() => ({
id: shortId.generate(),
User: {
id: shortId.generate(),
nickname: faker.name.findName(),
},
content: faker.lorem.paragraph(),
Images: [
{
src: faker.image.image(),
},
],
Comments: [
{
User: {
id: shortId.generate(),
nickname: faker.name.findName(),
},
content: faker.lorem.sentence(),
},
],
}))
);
이런식으로 더미 데이터를 만들 수 있다.
반응형
'리액트' 카테고리의 다른 글
이미지를 서버에 전달하는 방법(formData) (0) | 2023.01.15 |
---|---|
무한스크롤 구현하기, React-virtualized(간단 설명) (0) | 2023.01.13 |
id를 랜덤하게 정해주는 shortId (0) | 2023.01.13 |
http-proxy-middleware 라이브러리(cors 에러) (0) | 2023.01.03 |
styled-component에서 global style (0) | 2022.12.24 |
Comments