<react-native> faker / error 확인

 

 

 

 

 

 

가짜 데이터 만들기

 

우선, faker 설치

npm i faker
npm i -D @types/faker

 

 

그 후

 

디렉토리 설정

 

mkdir src
cd src
cd data
touch index.ts IPerson.ts faker.ts util.ts createRandomPerson.ts
cd ../..

 

app.tsx

 

 

import React from "react";
import { SafeAreaView, Text } from "react-native";
import * as D from './src/data'

const person = D.createRandomPerson()
export default function App() {
  return (
    <SafeAreaView>
      <Text> {JSON.stringify(person, null, 2)} </Text>
    </SafeAreaView>
  )
}

 

 

createRandomPerson.ts

 

import type {IPerson} from './IPerson';
import * as F from './faker';
import * as U from './util';

export const createRandomPerson = (): IPerson => {
  const name = F.randomName();
  return {
    id: F.randomId(),
    createdDate: F.randomDate(),
    modifiedDate: new Date(),
    name,
    email: F.randomEmail(),
    avatar: F.randomAvatarUrl(name),
    image: F.randomImage(),
    comments: F.randomParagraphs(4),
    counts: {
      comment: U.random(10, 100),
      retweet: U.random(10, 100),
      heart: U.random(100, 1000),
    },
  };
};

 

 

index.ts

 

export * from './util';
export * from './faker';
export * from './IPerson';
export * from './createRandomPerson';

 

IPerson.ts

 

type IPerson = {
    id: string;
    createdDate: Date;
    modifiedDate: Date;
    name: string;
    email: string;
    avatar: string;
    image: string;
    comments: string;
    counts: {
      comment: number;
      retweet: number;
      heart: number;
    };
  };
  
  export type {IPerson};

 

 

util.ts

 

export const makeArray = (length: number) => new Array(length).fill(null);
export const random = (min: number, max: number): number =>
  Math.round(Math.random() * (max - min)) + min;
export const unsplashUrl = (width: number, height: number): string =>
  'https://source.unsplash.com/random/${width}x${height}';
export const avatarUriByName = (name: string) =>
  "https://ui-avatars.com/api/?name=${name.split(' ').join('+')}";

 

 

faker.ts

 

import faker from 'faker';
import * as U from './util';
export const randomId = (): string => faker.random.uuid();
export const randomName = (): string => faker.name.findName();
export const randomEmail = (): string => faker.internet.email();
export const randomAvatarUrl = (name?: string): string =>
  U.avatarUriByName(name ?? randomName());
export const randomDate = (): Date => faker.date.recent();
export const randomParagraphs = (count: number = 2): string =>
  U.makeArray(count).map(faker.lorem.paragraph).join('/n');
export const randomImage = (): string =>
  U.unsplashUrl(U.random(800, 1000), U.random(800, 1000));

 

 

엥 그런데 import 부분 faker가 에러가 뜬다 뭐지뭐지뭐지?

솔치가 안됐나? 했는데 되어있다

몬소린지 몰라서 구글링해봤는데

 

 

 

 

현재 faker 라이브러리는 지원이 안되서

예전 버전으로 해야 된단다.

그래서 버전을 다 5.5.3으로 맞춰주고 npm i faker 재설치 업데이토 하면

바로 에러 없어진당 앗싸!!~!~~!#~@!~~

 

 

실행결과

 

 

 

 

가짜데이터 불러오기 성공!