React 6. 리액트 프로젝트 만들기 - 가짜 데이터 만들기

3. 가짜 데이터 만들기

 

개발을 하다보면 실제 데이터가 필요할 때가 있다.

하지만, 실제 데이터를 얻기 어려울 때는 그럴 듯한 가짜 데이터를 임시로 사용해야 한다.

이번에는 외부 패키지 설치를 통하여 가짜 데이터를 만들어볼 것이다.

 

npm i 또는 npm install을 통하여 프로젝트에 필요한 다양한 오픈소스 패키지를 설치할 수 있다.

원래는 npx를 사용하려고 했으나, npx를 사용하니 에러가 떴다.

여기서는 npx를 사용할 수 없는 이유가 무엇인지 궁금하여 검색을 해보았다.

 

npx는 주로 CLI(Command-Line Interface) 기반의 패키지를 실행하기 위하여 사용된다고 한다.
CLI 패키지는 명령줄에서 실행할 수 있는 명령어를 제공하는데, npx는 이러한 명령어를 실행할 수 있게 해준다.
반면에 luxon, chance 등의 패키지는 일반적인 라이브러리로 CLI를 제공하지 않기 때문에 npx로 실행할 수 없다고 한다.
이러한 경우는 npm, yarn을 통하여 설치를 하거나 CDN에서 라이브러리를 불러와 사용해야 한다.

 

이제 npm을 통하여 설치해야 한다는 것을 알았으니, npm 설치 옵션에 관하여 알아보자.

npm 설치 명령에는 두 가지 옵션이 있다.

 

npm i 옵션	의미	단축 명령
--save	실행에 필여한 패키지 설치. package.json 파일의 "dependencies" 항목에 등록됨.	-S
--save-dev	개발에 필요한 패키지 설치. package.json 파일의 "devDependencies" 항목에 등록됨.	-D

 

패키지를 설치할 때 알고 있어야 하는 것이 하나 더 있다.

Node.js 패키지는 자바스크립트로 개발된 것도 있고 타입스크립트로 개발된 것도 있다.

만약, 자바스크립트로 개발된 패키지를 타입스크립트에서 사용해야 한다면

@types/로 시작하는 타입 라이브러리를 추가로 설치해야 한다.

 

이렇게 npm i로 패키지를 설치하면

package.json 파일이 있는 디렉토리에 node_modules라는 서브 디렉토리가 생기고 여기에 패키지가 설치된다.

 

아, 그리고 프로젝트를 깃허브에 올리거나 할 때는 .gitignore 파일에 node_modules를 등록해두면 된다.

위에서 말했듯이 node_modules는 패키지들이 설치되어 용량이 매우 크다.

그래서 깃허브에 올릴 때 node_modules는 함께 올라가지 않도록 .gitignore 파일에 올려두면 된다.

물론 기본적으로 설정이 되어 있다...

 

이제 패키지를 설치해보자.

chance와 luxon.

설명을 덧붙이자면, chance 패키지는 다양한 종류의 그럴듯한 가짜 데이터를 제공해주며

luxon 패키지는 '2021/10/6'과 같은 날짜를 '20분 전' 형태로 만들어주는 유용한 기능을 제공한다.

 

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

 

이 다음부터는 이 패키지들을 사용하여 그럴 듯한 가짜 데이터를 만들어내는 것이다.

솔직히 가짜 데이터 만들기의 경우, 가장 중요한 부분을 제외하곤 코드만 적어두고 뛰어넘도록 하겠다.

다들 길고 긴 해석의 시간을 가지길 바란다...(물론 나만 그랬을 수도)

 

ch01_5 프로젝트의 src 폴더로 진입한 후, data 폴더를 생성해준다.

그 다음 방금 만든 data 폴더로 진입하여 각각 index.ts, util.ts, image.ts, chance.ts, date.ts 파일을 생성해준다.

 

> cd src
> mkdir data
> cd data
> touch index.ts util.ts image.ts chance.ts date.ts
> cd ../.. 

 

각각의 파일들에 필요한 함수들을 담는다.

참고로 index.ts 파일은 data 폴더 내의 다른 파일들에서 내보낸 기능을 모아서 하나의 진입점을 제공한다.

이를 통해 다른 컴포넌트나 모듈에서 data 폴더의 기능을 쉽게 가져올 수 있다.

 

// index.ts

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

 

그럼 지금부터 각 파일들에 작성해준 함수들을 나열하도록 하겠다.

 

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

export const makeArray = (length: number) => new Array(length).fill(null);
// 자바스크립트가 기본으로 제공하는 Array 클래스를 좀 더 간결하게 사용하기 위하여 만든 함수.
// null로 배열의 각 index를 채워준 이유는, new Array(length) 여기까지만 코드 작성시
// [undefined, undefined, undefined...] 이렇게 undefined로 가득 차는데,
// 그럼 map 메서드를 사용할 수 없다.

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;
// min과 max 범위에서의 무작위 정수를 반환하는 함수. 이미지를 임의의 크기로 생성할 때 유용하다.

 

Lorem Picsum(picsum.photos/)는 다양한 테마의 고해상도 이미지를 제공하는 사이트다.

picsumUrl 함수를 사용하여 사이트에서 제공하는 이미지를 얻는게 목적이다.

 

// image.ts
// 이미지 파일 가져오기

import * as U from './util'

export const picsumUrl = (width: number, height: number): string =>
  `https://picsum.photos/${width}/${height}`
// 실제로 이 url에 임의의 넓이와 높이를 넣으면 크기가 흡사한 랜덤의 이미지가 나온다.

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 파일은 chance 패키지를 사용하여 가짜 데이터를 제공받을 것이다.

 

// 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()
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 파일.

여기서는 luxon 패키지를 사용한다.

luxon 패키지는 위에서 말했듯이 "19시간 전" 형태의 날짜를 만들 때 필요한 DateTime 객체를 제공한다.

 

// date.ts

import {DateTime} from 'luxon'

// 랜덤 과거 날짜
export const makeRandomPastDate = () => {
  const value = new Date().valueOf();
  // Date 객체의 원시값을 반환.

  const n = 100000;
  return new Date(value - Math.floor(Math.random() * n * n));
  // 현재 시간으로부터 임의의 과거 시간을 생성하는 함수.
}

// 상대적 날짜
export const makeRelativeDate = (date: Date) =>
  DateTime.fromJSDate(date).startOf('day').toRelative();
// DateTime.fromJSDate() => Luxon 라이브러리의 DateTime 객체로 변환
// startOf("day") => 주어진 날짜/시간 객체의 시작점을 반환. 여기서는 하루의 시작을 반환.
// toRelative() => 현재 시간과 비교하여 상대적인 날짜 표현을 반환.(ex: 2 days ago)

export const randomRelativeDate = makeRelativeDate(makeRandomPastDate());

// 일,달,년도 만들기
export const makeDayMonthYear = (date: Date) =>
  DateTime.fromJSDate(date).toLocaleString(DateTime.DATETIME_FULL);
 // DateTime.DATETIME_FULL => Luxon 라이브러리에서 제공하는 상수 값 중 하나.
 // 날짜를 2023년 4월 25일 오후 3:00:00"과 같은 형식으로 표시하도록 지정하는 함수.
 
 // toLocaleString() => 숫자나 날짜 객첵를 인자로 받는다.
 // DATETIME_FULL은 내부적으로 날짜 객체로 변환되어 함수에 전달된다.
 // 전달 받은 날짜 객체를 현지화된 문자열로 변환하여 반환.
 
export const randomDatMonthYear = () => makeDayMonthYear(makeRandomPastDate());

 

여기까지 각 파일들에 필요한 함수들을 작성해보았다.

이제 만든 가짜 데이터를 한 번 사용해보자.

src 폴더 바로 아래에 있는 App.tsx 파일을 수정해보도록 하자.

 

일단 우리는 위에서 index.ts 파일을 통하여

data 폴더 내의 다른 파일들에서 내보낸 기능을 모아서 하나의 진입점을 만들었다.

그렇기 때문에 어느 파일에서든 import * as D from "./data" 이런 식으로 쉽게 가져다 사용할 수 있다.

 

아래는 웹 브라우저의 결과 화면이다.

 

import * as D from './data'

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

export default App