랜덤 색상 만들기

요즘 nodeJs를 배우면서 그림판을 업그레이드 하고싶은 욕구가 뿜뿜 하고있어서 리팩토링을 하고있는데 그전부터 오류가 있던 랜덤 색상을 고쳐보려고합니다.

 

이전 랜덤 색상 코드는 다음과 같았는데

 brushColor = '#' + Math.round(Math.random() * 0xffffff).toString(16)

 

헥사코드로 바뀌면서 자릿수가 모자라 검은색 색상과, 경고메세지가 콘솔에 찍히곤 했었습니다. 저만 그런건가 싶긴 하지만 대부분의 블로그가 위와 같이 설명을 해주고있기에 저는 다른 방법으로 해결한것을 정리하려 합니다.

* 랜덤 색상을 계속 누르게되면 위와같이 6자리가 아닌 헥사코드가 나오곤 했습니다.

그래서 처음엔 맨뒤에 0을 추가해줄까 했지만 근본적인 해결이 아닌것같아 다른 방법으로 해결해 줬습니다.

function randomColor(){
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    const randomNumber = Math.floor(Math.random() * 0xf).toString(16)
    let rgb = `${r},${g},${b}`
    rgb = rgb.split(',').map((x) => parseInt(x.replace(/[^0-9]/g,''),10).toString(16).padStart(2,randomNumber)).join('')
    colorInput.value = "#" + rgb;
}

 

r,g,b 각각 랜덤한 숫자를 뽑아내주고, 그것을 rgb로 합쳐서 input[type='color'] value 안에 넣어주는 코드인데 input value의 값이 헥사여야 하기때문에 rgb코드를 헥사로 바꿔주는 코드도 같이 써줬습니다. 헥사로 바꿀때 자릿수가 모자란 부분을 padStart를 사용해서 randomNumber를 넣어줌으로써 해결했습니다.

 

오류없이 잘 작동 합니다!