랜덤 색 추출로 css 컬러가이드 만들기 01

이번 프로젝트의 목표

컬러 조합으로 많은시간 고민하는 디자이너를 위해
색상을 랜덤으로 골라주는 웹페이지를 제작할 예정이다.

1/ 3가지 컬러 바이레이션 만들기
(5가지의 비슷한 색상 조합, 그라데이션, 상관없는 색상 조합)
2/ Math.random()을 이용해 다양한 색상조합 만들기
3/ css버전으로 카피 기능

두가지를 포인트로 잡고 페이지를 만들어보고자 한다.

제작과정중 이슈

1. Math.random()의 단점
   -색상 조합을 위해선 6자리의 숫자가 나와야하는데
   드물게 4자리에서 5자리의 숫자가 출현하는 이슈가 생겼다.

const setChange = Math.floor(Math.random()*100000)

결과값

이렇게 4자리로 나오면 블랙컬러가 추출된다.
그래서 if문을 사용해
4자리일때 00,
5자리일때 0을붙여
임시로 6자리를 만들었다.
(나중에 알파벳과 배열을 다시 조합이 어려움을 깨닳았지만..)

    if (randomSet.length == 5) {
      setChange("0" + randomSet);
    } else if (randomSet.length == 4) {
      setChange("00" + randomSet);
    } else {
      setChange(randomSet);
    }

2. 알파벳과의 조합이 어려움
   숫자와 알파벳이 조합되어야 좀 더 넓은 바리에이션의 컬러를 추출 할 수 있다.

수정중

그래서 중간 수정과정에서 내린 결론은
a~f까지 0~9까지 배열에 넣어 배열자체의 랜덤값을 추출하기로 결정했다.

const alphabet = [
    "a","b","c","d","e","f",
    "0","1","2","3","4","5","6","7","8","9",
  ];

그리고 랜덤으로 조합을 만들어주는 코드를 가장 단순하게 짜봤다.

    const randomAlphabet =
      alphabet[Math.floor(Math.random() * alphabet.length)];
    const randomAlphabet2 =
      alphabet[Math.floor(Math.random() * alphabet.length)];
    const randomAlphabet3 =
      alphabet[Math.floor(Math.random() * alphabet.length)];
    const randomAlphabet4 =
      alphabet[Math.floor(Math.random() * alphabet.length)];
    const randomAlphabet5 =
      alphabet[Math.floor(Math.random() * alphabet.length)];
    const randomAlphabet6 =
      alphabet[Math.floor(Math.random() * alphabet.length)];
    setChange(
      randomAlphabet +
        randomAlphabet2 +
        randomAlphabet3 +
        randomAlphabet4 +
        randomAlphabet5 +
        randomAlphabet6
    );

음 이렇게 하면 결과는 나온다!

원하는 결과를 얻었으니 리팩토링을 해보자

리팩토링 목표

a~f + 숫자를 섞은 6자리 조합 추출

• 알파벳, 숫자 섞기
• 숫자만 나올수도 있다.
• 알파벳만 나올수도 있다.

    const resultDigit = [];
    for (let i = 1; i <= 6; i++) {
      const randomAlphabet =
        alphabet[Math.floor(Math.random() * alphabet.length)];
      resultDigit.push(randomAlphabet);
    }
    setChange(resultDigit.join(""));

알고있는 지식들로 최대한 리팩토링 해봤다 :()
결과는 동일하게 잘 나온다.

2번 목표 해결!