Mini Web Project - Background Changer
- 랜덤한 Hex color code를 생성하는 함수 작성하기 (직접 작성해보세요.)
Hex Code란?
0~9까지의 숫자와 A~F까지의 알파벳이 랜덤하게 구성되어 이루는 6자리 코드를 의미합니다. 예를 들면 000000, 3474FF 등 모두 유효한 Hex Code입니다. CSS에서는 Hex Code앞에 #를 붙여 색상값으로 이용할 수 있습니다.
예) #3474FF
버튼 클릭 시, 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code 텍스트 수정하기
-문제를 해결하기 위해서 작게 잘라서 보자면
1. 초기 값이 있어야 한다.
2. 초기 값이 HEX의 어느 랜던 값으로 들어가 있어야한다.
3. HEX 값을 구하는데 그 자체가 랜덤이다.
4. CLICK ME를 누르면 임의에 색상 값을 가져온다
5. 그 값을 background에 넣는다
6. 그 값을 text에 넣는다
처음에 임의에 값을 구해 줄 때는 아래와 같은 함수를 작성했다.
Math.random이 0부터 1의 수소점으로 값이 나오고 그 값에 16777215(16진수로 변환 시 ffffff최대값)을 곱해주고, 그렇게 되면 임의에 값에 toString을 붙여주면 16진법으로 바뀐다. 그리고 그 나머지 소수점들은 Math.floor로 잘라주면 랜덤 값이 너오게 된다. 그러나 이렇게 되면 나중에 값을 바꿔주거나 자리숫를 변경해줄 때 번거로움이 생기기도 하고, 문제를 낸 사람의 의도와 다를 수 있어서 다르게 바꿨다.
아래의 12번부터 24번까지를 보면 while문을 통해서 hex-16자리의 길이를 곱해주고 그리고 index로 배열의 항목에 접근해 각 값이 index번호가 되기 때문에 그 값을 넣어주는 방향으로 바꿔줬다. 그러면 number라는 변수에 배열의 순서대로 값이 들어가게 되고 임의에 값이 들어가게 된다.
문제를 풀면서 가장 어려웠던 점은 랜덤값을 뽑아주는 부분과 그 랜덤값을 이용해 addEventListener을 이용하는게 가장 어려웠다.
처음에 함수로만 이용하던 부분을 조건문을 통해 돌리려고 하는 부분과 배열 부분을 적어주는 부분, 그리고 길이를 알
아내고 배열의 항목에 접근 하는 부분이 어려워서 찾아보는데 시간이 오래걸렸다.
그리고 변수를 선언 할 때, let으로 선언하는게 편해서 let으로 쓰는데 코드리뷰를 해주시는 친절한범기님께서 const를 쓰는 부분을 많이 말씀해주셔서 그 부분을 좀 더 공부해야 할 것 같다. 왠지 const를 쓰면 값을 변경 못하고, 한 값으로 고정되어 있다는 관념이 생겨서 let으로 쓰는데 const를 써야 값에 대한 잘못된 수정을 막을 수 있는 부분이라는 좋은 장점이 있기 때문에 그 부분을 잘 유념해야겠다.
최종본이다. 버튼을 누르면 이벤트 효과로 인해서 글씨체와 배경색이 같이 바뀌는 부분을 확인했다.