프라이탁 스토어 안내 페이지를 만들고 있다. 백엔드에서 스토어 관련 데이터를 크롤링하는데 문제가 있다고 해서 직접 데이터를 만들어야 하는 상황이다! 300개가 넘는 데이터를 직접 목데이터로 만들기에는 무리가 있지 않을까 싶었는데, faker.js, randomLocation 라이브러리를 사용하여 대량의 가짜 데이터를 만들 수 있었다.

필요한 데이터 만큼 for 문을 돌려 array 안에 객체들을 넣는 방식으로 만들었는데, 해당 코드를 new Array 생성자와 fill() 메소드를 사용하여 더 확장성 있게 수정할 수 있었다.

MDN | Array.prototype.fill()
MDN | Array() 생성자

기존 코드

function generateStores() {
  let stores = [];
  const P = {
    latitude: 48.8583736,
    longitude: 70.2922926,
  };
  
  for (let id = 1; id <= 32; id++) {
    let companyName = faker.company.companyName();
    let streetAddress = faker.address.streetAddress();
    let latitude = randomLocation.randomCircumferencePoint(P, 1000000).latitude;
    let longitude = randomLocation.randomCircumferencePoint(P, 4500000)
      .longitude;
    let country = faker.address.country();
    let city = faker.address.city();
    let img = "/Image/shop_s.jpg";
    let img2 = "/Image/shop_l.jpg";
    let phoneNumber = faker.phone.phoneNumber();
    let email = faker.internet.email();
    let month = faker.date.month();
    let year = faker.random.number({
      min: 2005,
      max: 2020,
    });

    stores.push({
      id: id,
      store_name: companyName,
      address: streetAddress,
      lat: latitude,
      lng: longitude,
      country: country,
      city: city,
      img: img,
      img2: img2,
      phone: phoneNumber,
      email: email,
      month: month,
      year: year,
    });
  }
  return { data: stores };
}

export default generateStores();

수정한 코드

const STORES_COUNT = 32;

function generateStores() {
  const P = {
    latitude: 48.8583736,
    longitude: 70.2922926,
  };

  const stores = new Array(STORES_COUNT).fill().map((_, index) => {
    return {
      id: index + 1,
      store_name: faker.company.companyName(),
      address: faker.address.streetAddress(),
      lat: randomLocation.randomCircumferencePoint(P, 1000000).latitude,
      lng: randomLocation.randomCircumferencePoint(P, 4500000).longitude,
      country: faker.address.country(),
      city: faker.address.city(),
      img: "/Image/shop_s.jpg",
      img2: "/Image/shop_l.jpg",
      phone: faker.phone.phoneNumber(),
      email: faker.internet.email(),
      month: faker.date.month(),
      year: faker.random.number({
        min: 2005,
        max: 2020,
      }),
    };
  });
  return { data: stores };
}