[JavaScript] 이미지 랜덤 출력(Math.Random() - 랜덤 함수)

게시글 작성 목록의 사용자 아이콘이 하나의 색상으로 통일되어있는게 왠지 예쁘지가 않았다.

기존의 게시글 목록

 

그래서 색상만 다른 아이콘을 두개 더 집어 넣고 랜덤하게 아이콘을 출력하는 코드를 짜 보았다.

(javaScript기반의 Quasar 프레임워크를 사용하고 있다.)

 

  data () {
    return {
      userImg: ''
    }
  }

우선 문자열 형식으로 변수 선언을 해주고

 

<q-icon
       :name="userImg"
/>

사용할 HTML 요소에 변수 바인딩을 해주었다. (반복문으로 게시글을 하나씩 출력하는 구조이다.)

 

Math.Random() 

userRandomImg () {
      const randomNum = Math.floor(Math.random() * 3)
      if (randomNum === 0) {
        this.userImg = 'img:icons/chat-profile-normal.svg'
      } else if (randomNum === 1) {
        this.userImg = 'img:icons/chat-profile-green.svg'
      } else if (randomNum === 2)
        this.userImg = 'img:icons/chat-profile-purple.svg'
    },

핵심인 userRandomImg () 함수이다.

Math.random()은 0부터 1사이에서 무작위로 수를 추출하는 함수이다.

3을 곱해주면 0부터 3사이의 수를 무작위로 추출하게된다.

 

여기서 추출된 난수를 Math.floor()로 소수점을 제거하고 정수형태로 변경해 준다.

그럼 0, 1, 2 의 숫자가 랜덤으로 출력된다.

 

다음으로 조건을 걸어 각 숫자 마다 이미지 파일을 경로를 변수에 넣어주고 

 

<q-icon
       :name="userImg"
/>
{{ this.userRandomImg() }}

HTML 요소에서 함수를 실행시켜 주면,

 

변경된 게시글 목록

 

위와 같이 아이콘이 랜덤으로 출력된다.

확실히 보기 좋고 화사해진 느낌이다.

 

하지만 함수를 계속 실행시켜 아이콘을 변경하기 때문에 웹페이지의 로딩속도가 기존보다는 느려질 것 같고, HTML요소를 불러올때마다 다시 랜덤 재배치 되는 현상이 있다.

개선점은 운영 배포를 건드리지 않는 선에서 혼자 탐구를 해봐야겠다ㅎㅎ