그럴듯한 가짜 데이터 만들기

김동현·2023년 8월 3일

nodeJS

목록 보기

14/14

가짜 데이터 만들기

chance, luxon 패키지 설치하기

npm i chance luxon
npm i -D @types/chance @types/luxon

chance 패키지는 다양한 종류의 그럴듯한 가짜 데이터를 제공해준다.
luxon 패키지는 '2021/10/6'과 같은 날짜를 '20분 전' 형태로 만들어 주는 유용한 기능을 제공해준다.

폴더 구조

data
- index.ts
- util.ts
- image.ts
- chance.ts
- date.ts

util.ts 파일 작성하기

/**
 *
 * @param length 배열의 길이
 * @returns null 값이 들어있는 배열
 */
export const makeArray = (length: number) => new Array(length).fill(null)
/**
 *
 * @param min 이상
 * @param max 미만
 * @returns min이상 max미만의 정수 배열
 */
export const range = (min: number, max: number): number[] =>
  makeArray(max - min).map((_, index) => index + min)
/**
 *
 * @param min 이상
 * @param max 미만
 * @returns min이상 max미만의 랜덤한 정수
 */
export const random = (min: number, max: number): number =>
  Math.floor(Math.random() * (max - min + 1) + min)

makeArray

makeArray 함수는 자바스크립트가 기본으로 제공하는 Array 클래스를 좀 더 간결하게 사용하려고 만든 것이다.
그 이유는 다음과 같다.

const array = new Array(3); // [empty × 3]

empty 가 담긴 배열이 만들어지는데, 이게 왜 문제가 되냐면 length 속성만 3일 뿐 실제 값이 담겨있지 않아서 반복 메서드를 이용할 수 없기 때문이다.
하지만 fill 메서드는 먹히는데 이 메서드로 length 속성 만큼 실제 값들을 넣을 수 있다.

array.map(콜백함수); // 반응없음
array.fill(null).map(콜백함수); // 실행
// 또는 이렇게도 함
[...array].map(콜백함수); // 실행

range

때로는 파이썬의 range() 형태의 배열이 필요할 때가 있다.
map 함수는 콜백함수의 2번째 매개변수에 배열의 인덱스 값을 제공하므로 이를 활용하여 range 함수를 만들었다.

random

min 과 max 범위에서의 무작위 정수를 반환한다.
이미지를 임의의 크기로 생성할 때 유용하다.

image.ts 파일 작성하기

import * as U from './util'
/**
 *
 * @param width picsum사이트에 요청할 이미지의 가로 길이
 * @param height picsum사이트에 요청할 이미지의 세로 길이
 * @returns 가로세로 길이가 파라미터에 포함되어있는 완성된 picsum사이트 URL
 */
export const picsumURL = (width: number, height: number): string =>
  `https://picsum.photos/${width}/${height}`
/**
 * 랜덤한 사이즈의 이미지를 picsum 사이트에 요청
 * @param width 이미지의 최소 가로 길이
 * @param height 이미지의 최소 세로 길이
 * @param delta 이미지 가로 세로 길이의 최대길이가 width+delta, height+delta
 * @returns 가로세로 길이가 파라미터에 포함되어있는 완성된 picsum사이트 URL
 */
export const randomImage = (width = 1000, height = 800, delta = 200) =>
  picsumURL(U.random(width, width + delta), U.random(height, height + delta))
/**
 * 아바타에 사용할 이미지이다.
 * 가로세로 크기는 200~400 사이의 랜덤한 정사각형의 이미지이다.
 * @returns 가로세로 길이가 파라미터에 포함되어있는 완성된 picsum사이트 URL
 */
export const randomAvata = () => {
  const size = U.random(200, 400)
  return picsumURL(size, size)
}

Lorem Picsum(picsum.photos/)는 다양한 테마의 고해상도 이미지를 제공하는 사이트이다.
무료 이미지의 URL을 통해 이미지를 받아올 수 있다.

chance.ts 파일 작성하기

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

export const randomUUID = () => chance.guid()
export const randomName = () => chance.name()
export const randomEmail = () => chance.email()
/**
 *
 * @returns a random Facebook id,
 */
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 randomTitleText = (words = 3) => chance.sentence({words})
export const randomParagraphs = (sentences = 3) => chance.paragraph({sentences})

date.ts 파일 작성하기

import {DateTime} from 'luxon'
import * as U from './util'

/**
 *
 * @returns 현재부터 1000일 전까지 랜덤한 Date객체
 */
export const makeRandomPastDate = () => {
  const todayMillisecond = new Date().valueOf()
  const n = 100_000_000_000 // 1억초 ( 대략 1000일 정도 )
  return new Date(todayMillisecond - U.random(0, 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())

luxon 패키지는 '19시간 전' 형태로 날짜를 만들 때 필요한 DateTime 객체를 제공한다.
그리고 이 DateTime 객체로 다음과 같이 사용하면 '19시간 전' 과 같은 문자열을 만들 수 있다.

DateTime.fromJSDate(Date_객체).startOf('day').toRelative();

index.ts 파일 작성하기

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

싹 정리해서 내보내기 위해 사용한다.

가짜 데이터 사용해보기

import * as D from "./data";

function App() {
  return (
    <div className="App">
      <p>{D.randomName()}</p>
      <p>{D.randomJobTitle()}</p>
      <p>{D.randomDayMonthYear()}</p>
      <p>{D.randomRelativeDate()}</p>
      <img src={D.randomAvatar()} height={50} />
      <img src={D.randomImage()} height={300} />
    </div>
  );
}