상세 컨텐츠

본문 제목

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

자바스크립트

by e7e 2024. 10. 24. 22:28

본문

faker-js 한국어가 갑자기 안되서 문서를 뒤적이니, 말도 없이 locale 세팅이 조금 바뀌었당.

내용을 들여다 보니, 왜 바꾸었는지 나름 이해가 되고, 칭찬할만 하당.~~

이전 방식을 모르는 사람은 그냥 새 방식에 적용하면 그만이당. ~~ (^-^)

 

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 , ko, en } from "https://esm.sh/@faker-js/faker";
 
 
  // Locale 세팅   이전과 바뀜 ㅠㅠ
  const fakerKO = new Faker({
        locale: [ko],
  });
 
 
  const fakerEN = new 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.street()}`;
      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

 

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

노션에 등장 블록 에디터 (editor.js)  (6) 2025.03.12
네이버 오늘 날씨 한번 가져와 보깅깅  (2) 2025.03.12
엑셀(Excel) 파일 다루는 SheetJS  (0) 2024.08.01
CKEditor5 임시샘플  (2) 2024.06.18
괘니 만들어보는 사이드 메뉴  (2) 2024.06.03

관련글 더보기

티스토리툴바