랜덤 배경 and 우물안의 개구리

mini·2022년 12월 1일

오늘은 업무 시간에 잠시 대기 해야 되는 상태로 공부하게 되었다.
여기서 나는 틀에 박혀 미쳐 생각지 못한 부분을 알게 되었고 그 부분을 체크해보려고 한다.
응용하기! 모든 가능성을 열어두자 보이는게 다가 아니다!
Javascript로 버튼 클릭 시 랜덤으로 그라데이션 배경 바꾸기를 하고 있었다.

어떻게?

그라데이션 배경을 입력할지 고민하게 되었는데
랜덤이라는것에 초점이 있는 게 아니라
그라데이션이라는거에 중점을 두어
어떻게 그라데이션을 줄 건지부터 생각하였고 CSS 롤 입력 후
add로 불러오며 지우고 랜덤으로 하는 방법을 생각했다.

(하.. 너무 한심하고 부끄럽다...)

조금만 생각해보면 컬러 자체를 셋팅하고
배경 안에서 셋팅한 색을 랜덤으로 불러오면 보다 쉽게 할 수 있는데...
왜 나는 css 로밖에 생각하지 못했을까...
퍼블리셔로 CSS를 자주 만지다 보니 개발 측면에서는 완전 꽝인 것 같다.
회사에 많은 개발자들이 있고 대부분 기본만 셋팅해주면 알아서 해주었고
동료분들이 직접 하겠다고 해서 너무 기본적인 html, css 치중이 되어
방금 같은 경우에도 CSS에 의존하려는 것 때문에 시간을 허비하였다.
하지만 이렇게 지금이라도 알았으니 다음에는 내가 알고 있는 것만이 방법이 아니고 다방면으로 생각하며,
시간이 너무 지체 될 땐 구글 선생님에 도움을 받아보자. ㅜㅜ
끝으로 생각한 그라데이션을 배경에 랜덤으로 지정하는 방법을 적어보려 한다.

일단 컬러 값부터 셋팅을 해준다.

const colors = [
  "#ef5777",
  "#575fcf",
  "#4bcffa",
  "#34e7e4",
  "#0be881",
  "#f53b57",
  "#3c40c6",
  "#0fbcf9",
  "#00d8d6",
  "#05c46b",
  "#ffc048",
  "#ffdd59",
  "#ff5e57",
  "#d2dae2",
  "#485460",
  "#ffa801",
  "#ffd32a",
  "#ff3f34"
];

그뒤에 버튼과 바디를 설정하고

const Btn = document.querySelector(".btn");
const body = document.body;

클릭 이벤트를 통해 아래코드를 작성해준다.

const Btn = document.querySelector(".btn");
const body = document.body;

function Btnclick(){
  const color1 = colors[Math.floor(Math.random()* colors.length)]
  const color2 = colors[Math.floor(Math.random()* colors.length)]
  
  if (color1 === color2) {
    return Btnclick();
  }
  body.style.backgroundImage = `linear-gradient(to right, ${color1}, ${color2})`;
}
Btnclick();
Btn.addEventListener("click",Btnclick);

여기서 랜덤에 대해 간락하게 설명하자면

Math.floor
함수는 소수점 1째자리 이후의 숫자를 버림하고, 정수를 리턴한다.
소수점 이하를 내림
1.9 일때 1
2.2 일때 2

Math.random()
0 이상 1 미만의 부동소숫점 의사 난수.
소수점 이하를 반올림
1.9 일때 2
1.4 일때 1

Math.ceil()
주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자
소수점 이하를 올림한

Array.length()
배열의 길이를 계산해준다.

여기서 코드 해석을 해보자면

const color1 = colors[Math.floor(Math.random()* colors.length)]
color1 (컬러1)
= (은)
colors (컬러셋팅값) 을
Math.floor (정수) 로 계산하서
Math.random() (랜덤 )으로 나오는데
colors.length (몇개의 컬러가 있는지 계산) 중 에 나와라

셋팅값 예) 10개라 치면 10 중 하나를 랜덤으로 배출

이런식으로 코드를 만들면 버튼을 클릭 했을때
지정된 컬러를 계산하여 그중에 랜덤으로 컬러를 뽑아 낼 수 있게 된다.

여기서 포인트 if문을 넣어 같은 컬러를 없게 만든다면!?