[react] 가짜 데이터 사용해 보기: chance

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다.

우분투 환경에서 진행함

 

 

chance

 

src/data 폴더 생성

 

//util.ts
//가짜 데이터 만드는 함수 정의

export const makeArray = (length: number) => new Array(length).fill(null)
export const range = (min:number, max:number): number[] => makeArray(max-min).map((notUsed,index)=>index+min)
export const random = (min: number, max: number): number=> Math.floor(Math.random() * (max-min)) + min

//image.ts
//이미지 파일 가져오는 함수 작성

import * as U from './util'

export const picsumUrl = (width: number, height: number): string => `https://picsum.photos/${width}/${height}`
export const randomImage = (
    w: number = 1000,
    h: number = 800,
    delta: number = 200
): string => picsumUrl(U.random(w, w+delta), U.random(h, h+delta))
export const randomAvatar = () => {
    const size = U.random(200,400)
    return picsumUrl(size,size)
}

 

//chance.ts
//util, image ts 파일의 함수들 사용

import Chance from 'chance'
const chance = new Chance()

export const randomUUID = () => chance.guid()
export const randomName = () => chance.name()
export const randomEmail = () => chance.email()
export const randomId = () => chance.fbid()
export const randomJobTitle = () => chance.profession()
export const randomCompanyName = () => chance.company()
export const randomSentence = (words = 5) => chance.sentence({words})
export const randomTiteText = (words = 3) => chance.sentence({words})
export const randomParagraphs = (sentences = 3) => chance.paragraph({sentences})

//date.ts

import {DateTime} from 'luxon'

export const makeRandomPastDate = () => {
  const value = new Date().valueOf()
  const n = 100000
  return new Date(value - Math.floor(Math.random() * n *n))
}

export const makeRelativeDate = (date: Date) =>
  DateTime.fromJSDate(date).startOf('day').toRelative()
export const randomRelativeDate = () => makeRelativeDate(makeRandomPastDate())

export const makeDayMonthYear = (date: Date) =>
  DateTime.fromJSDate(date).toLocaleString(DateTime.DATE_FULL)
export const randomDayMonthYear = () => makeDayMonthYear(makeRandomPastDate())

//index.ts
//data 폴더에서 구현한 기능들을 호출하는 쪽에서 간편하게 쓸 수 있게 한다. export *으로 내보냄

export * from "./util";
export * from "./image";
export * from "./chance";
export * from "./date";

 

가짜 데이터 사용

//src/App.tsx

import * as D from "./data"; //index.ts에서 export했던 것 import

export default function App() {
  return (
    <div >
      <p>
        {D.randomName()},{D.randomJobTitle()},{D.randomDayMonthYear()}
      </p>
      <img src={D.randomAvatar()} height="50"  alt="random"/>
      <img src={D.randomImage()} height="300" alt="random"/>
    </div>
  )
}

 

 

결과화면