faker-js 이용 가짜(Dummy) 데이터 마궁 맹글깅

자바스크립트

by e7e 2024. 4. 10. 19:01

https://fakerjs.dev/

위 faker-js를 활용하여 아래 그림과 같이 필요한 갯수의 랜덤한 데이터를 맹글려 한다치면

아래와 같은 소스가 필요할 것이다.(주석을 잘 참고하길....)

faker-js 사용법은 너무나 쉬워서 괘니 공부가 되도록 table 만드는 소스를

조금 있어 보이게 header 들어가는 부분에 json의 key값을 이용하고,

그것을 한글화 하는 부분도 일부러 넣어 보았당.

도움이 되었으면 하는 바램이당.

faker.helpers.fromRegExp 는 문서 API 에서 꼬옥 찾아보장! 구세주당

그냥 복사/붙여넣기로 하고, 랜덤 데이터 생성 부분만 추가/수정해서 사용해도 좋을거시당.

<!DOCTYPE html>
<meta charset="UTF-8" />
<style>
  #wrapper {
    text-align: center;
  }
  .e7e-100 {
    width: 50px;
    height: 50px;
  }
</style>
<div id="wrapper">
  <div>
    몇갱?<input type="text" id="txtCnt" value="10" /><br />
    <button id="btnMake">E7E 가짜 데이터 맹글깅</button>
  </div>
  <hr />
  <div id="divDisp"></div>
</div>
<script>
  // module 아님 전역임에 눈길
  const divDisp = document.querySelector("#divDisp");
  const txtCnt = document.querySelector("#txtCnt");
  const btnMake = document.querySelector("#btnMake");

  // tr 마우스 오버 & 아웃
  // type=module 안에 있으면 왜 안 읽힐까용?
  function fTrOver(curTr) {
    curTr.style.backgroundColor = "black";
    curTr.style.color = "yellow";
  }

  function fTrOut(curTr) {
    curTr.style.backgroundColor = "white";
    curTr.style.color = "black";
  }
</script>
<script type="module">
  // 전역 아니공, type="module" 임에 눈길!
  //import { faker }  from 'https://esm.sh/@faker-js/faker';
  //console.log(faker);

  import { faker as fakerKO } from "https://esm.sh/@faker-js/faker/locale/ko";
  import { faker as fakerEN } from "https://esm.sh/@faker-js/faker/locale/en";

  // 길게 쓰기 싫으니, 짧겡
  const person = fakerKO.person;
  const personE = fakerEN.person;
  const location = fakerKO.location;
  const internet = fakerKO.internet;
  const animal = fakerKO.animal;
  const lorem = fakerKO.lorem;
  const image = fakerKO.image;

  // 버튼 누르면 생성!
  btnMake.addEventListener("click", () => {
    const sarams = [];

    for (let i = 1; i <= txtCnt.value; i++) {
      // 랜덤 데이터 생성, 제공되는 랜덤 이메일은 보기 흉-> 수정
      let name = `${person.lastName()} ${person.firstName()}`;
      let email = personE.firstName().replaceAll(" ", "");
      email += `@${internet.email().split("@")[1]}`;
      let address = `${location.state()} `;
      address += `${location.city()} `;
      address += `${location.streetAddress()}`;
      let avatar = image.avatar();

      // 데이터 모아서 덩어리롱(객체)
      let saram = {
        name,
        email,
        age: Math.round(Math.random() * 80) + 20,
        address,
        avatar,
      };
      sarams.push(saram);

      // 화면에 뿌리깅!
      displayTable(sarams);
    }
  });

  // 헤더 컬럼명을 한글로 바꾸기 위한 세팅
  const HeaderNm = {
    name: "이름",
    email: "이메일",
    age: "나이",
    address: "주소",
    avatar: "아바타",
    // 필요하면 요아래 계속 추가
  };
  Object.freeze(HeaderNm); // 딴데서 못고치게 얼리깅

  //만든 데이터로 테이블 뿌리깅!
  function displayTable(dataArr) {
    //테이블 시작
    let tblStr = `<table border=1 style="width:100%">`;

    // thead 맹글기
    let thead = `<thead><tr>`;
    let headerNames = [];
    for (let column in dataArr[0]) {
      thead += `<th>${HeaderNm[column]}</th>`;
      headerNames.push(column);
    }
    thead += `</thead>`;
    tblStr += thead;

    // tbody 맹글기
    let tbody = `<tbody>`;
    dataArr.forEach((data, index) => {
      // 이벤트 동적 바인딩은 아예 inline 이벤트로 박으면 좋아용
      tbody += `<tr onmouseover='fTrOver(this)' onmouseout='fTrOut(this)'>`;
      headerNames.forEach((colName) => {
        if (colName == "avatar") {
          let imgUL = data[colName];
          tbody += `<td><img class="e7e-100" src=${imgUL}></td>`;
        } else {
          tbody += `<td>${data[colName]}</td>`;
        }
      });
      tbody += `</tr>`;
    });
    tblStr += `${tbody}</tbody></table>`;

    divDisp.innerHTML = tblStr;
  }
</script>

아래 faker의 helpers.fromRegExp는 너무도 유용해서 직접 다양하게 해보길

너무도 너무도 권장에 권장을 하는 바이당.

let phoneNum = faker.helpers.fromRegExp("010-[0-9]{4}-[0-9{4}")
console.log(phoneNum);

자바로 하고 싶다면 아래를 참공

2024.03.24 - [스프링] - Faker 이용 가짜 데이터 맹글기

공간이 성장, 변형되어가는 과정이 시간이당.

나 자신도 결국 공간 속 공간이라 치면

나를 바꿀 수 없는 건 더 큰 공간에 대한 의존성으로

내가 바뀌면 전체 공간도 바뀌어야 하기 때문일 것이다.

현재라는 공간은 하나의 입체 프레임일거시다.

현재 라는 입체 프레임을 분리할 수 있어 그것을

과거에 끼어 넣는다 해도 결국 맥락이 맞지 않을 뿐더러

나머지 입체 프레임이 반복 될 거시당. 운명이당!

요 입체 프레임을 만드는 알고리즘을 찾거나,

알고리즘을 만든 존재를 찾아야 한당.

그 존재는 이름이 무 일깡? 유 일깡?

이런 무한대로 발산되는 문제의 해결 실마리는

과연 가능한가? 라는 본질적 질문 일 것이다.

무한대 너 참 고약하게 어렵구낭!!!!

https://www.youtube.com/watch?v=ZqU4oTDy3XE

'자바스크립트' 카테고리의 다른 글

IntersectionAPI 오디 한번 싸용해 보올깡 (0)	2024.04.16
clipboard API 사용 복사/붙여넣기 (0)	2024.04.16
fetch API를 Promise를 써 직접 맹글깡? (2)	2024.04.09
Promise(약속) 모르면 바보옹(비동기) (0)	2024.01.08
외부파일 드래그 앤 드롭3 (File Drag and Drop) (2)	2023.12.20