[JS] 자바스크립트 랜덤 숫자, 데이터 생성 예시

랜덤 게시글(혹은 댓글)을 구현한다고 가정, 기본적으로 여러개의 유저 이름, 메시지 텍스트가 필요하다. 유저 이름이나 랜덤 텍스트는 영문 Lorem처럼 자동 생성해주는 사이트를 활용하면 된다. 10개 정도 더미 데이터를 생성한 후 자바스크립트의 Math.random을 활용하면 유저별로 다른 메시지 텍스트를 생성할 수 있다.

 

필요한 데이터 리스트

---

1. 유저 이름 : 한글 랜덤 이름 생성기 이용
2. const randomUser = ['예세희', '허선숙', '제갈지훈', '심성태', ...]
3. 메시지 텍스트 : 한글 Lorem 사이트인 간세네 혹은 한글입숨 이용
4. const randomMessage = ['광야에서 무엇을 보내는...', '...', '...', ...]
5. 생성일 : new Date() 이용

 

랜덤 숫자 생성 함수 ⭐️

---

`Math.random()`과 `Math.floor()`를 이용하여 지정한 최대 숫자 미만(혹은 이하)의 정수(소수점이 아닌)로 된 난수를 생성할 수 있다.

// min 이상 max 미만의 랜덤 숫자 생성(max 미포함)
const getRandomInt = function (min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
};

getRandomInt(4, 5); // 4
getRandomInt(3, 5); // 3~4
getRandomInt(2, 5); // 2~4

 

메서드 설명

• Math.random() : 0 이상 ~ 1미만 부동 소숫점 난수 생성 (0.932322...)
• 1 미만이므로 Math.random()을 곱한 수를 넘지 않는다. 0.9 * 2 = 1.8 0.8 * 2 = 1.6
• Math.floor() : 소수점 버리고 가장 큰 정수 반환

Math.floor(5.95); // 5
Math.floor(-5.05); // -6 (-5보다 -6이 작으므로)
Math.floor(0.2); // 0
Math.floor(-0.2); // -1 (-0.2보다 -1이 더 작다)

 

원리

• max는 8, min은 2라고 가정하고 이 둘을 빼면 두 수 사이의 차이값 6이 나온다.
• 차이값 6에 Math.random()을 곱하면 항상 0 ~ 5.999... 사이의 값을 반환한다.
• 예를들어 Math.random() 값이 0.999이면 6 * 0.999 = 5.994가 된다.
• Math.floor()를 이용해 소수점을 버리면 5가 된다.
• 여기에 min 값 2를 더하면 5 + 2 = 7이 된다.
• 만약 Math.random() 값이 0.1이라면 0.1 * 6 = 0.6이고, Math.floor()를 적용해서 소수점을 버리면 0이 된다. 여기에 min 값을 더하면 항상 min 이상이 되도록 보장할 수 있다.
• 위 과정을 통해 항상 min ~ max - 1 사이의 난수를 얻을 수 있다

 

참고

max 수까지 포함한 난수를 만들려면 max - min에 1을 더해준다.

Math.floor(Math.random() * (max - min + 1)) + min; // max 포함
Math.floor(Math.random() * (max - min)) + min; // max 미포함

 

Lodash 라이브러리의 random 메서드를 사용하면 더 간편하게 난수를 만들 수 있다.

_.random(1, 999); // 1~999 사이의 난수 생성
_.random(10); // 0~10 사이의 난수 생성(하나의 인자만 넘기면 0이 기본값이 됨)

 

랜덤 유저 / 코멘트 생성

---

"0 이상 ~ randomUser 배열 length 미만"의 랜덤 숫자 생성 후, 해당 숫자를 인덱스로 유저 이름을 가져온다.

const comment = {};
comment.userName = randomUser[getRandomInt(0, randomUser.length)];

 

랜덤 코멘트 역시 같은 방법으로 가져온다

comment.message = randomMessage[getRandomInt(0, randomMessage.length)];

 

날짜 포맷 변경 함수

---

new Date()로 날짜 객체 생성 후 생성한 날짜 객체는 포맷 변경 함수를 만들어 2021-02-11 10:34:22 형식으로 변환해서 사용. 통일성을 위해 10미만의 한자리는 앞에 0을 붙여 두자리로 바꿔서 보여주면 좋다.

// 10미만(한자리)일땐 앞에 0 추가하여 2자리로 변경
// 0 → 09
function padLeft(date) {
  if (date < 10) {
    return '0' + String(date);
  }
  return String(date);
}

 

// 날짜 포맷 변경 함수. 연도는 항상 4자리 이므로 padLeft 함수로 0을 추가할 필요 없다.
function getFormattedDate(date) {
  const yyyy = date.getFullYear();
  const month = padLeft(date.getMonth() + 1);
  const dd = padLeft(date.getDate());
  const HH = padLeft(date.getHours());
  const mm = padLeft(date.getMinutes());
  const ss = padLeft(date.getSeconds());

  const format = [yyyy, month, dd].join('-') + ' ' + [HH, mm, ss].join(':');

  return format;
}

 

최종 결과물 예제

---

const generateNewComment = () => {
  const comment = {};
  comment.userName = randomUser[getRandomInt(0, randomUser.length)];
  comment.message = randomMessage[getRandomInt(0, randomMessage.length)];
  comment.created_at = getFormatDate(new Date());

  return comment;
};

/*
{
    userName: '예세희',
    message: '광야에서 무엇을 보내는...',
    created_at: '2021-02-11 12:34:05'
}
*/

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요