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

필요한 데이터 리스트

1. 유저 이름 : 한글 랜덤 이름 생성기 이용

   const randomUser = ['예세희', '허선숙', '제갈지훈', '심성태', ...]
   

2. 메시지 텍스트 : 한글 Lorem 사이트인 간세네 혹은 한글입숨 이용

   const randomMessage = ['광야에서 무엇을 보내는...', '...', '...', ...]
   

3. 생성일 : 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)]

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