오늘 만들어본 것 !
요구사항 📋
✅ 랜덤한 Hex color code를 생성하는 함수 작성하기 (직접 작성해보세요.)
✅ 버튼 클릭 시, 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code 텍스트 수정하기
이전에 노마드코더 JS 챌린지에서 비슷한 것들을 과제로 받은 적이 있었다.
그 때 분명 해봤었는데 오늘 하루 종일 붙잡고 있었던 것 같다.
🤯 어려웠던 부분 🤯
개념공부가 부족한걸까, 응용을 못하는걸까? 둘다라고 생각한다 ㅎ...
👉 click 이벤트가 발생할 때 한번 발생하고 끝이 아니라, 계속해서 텍스트와 배경색이 바뀌어야 한다.
if문을 사용해서 기본 배경 색상과의 비교를 해야될까?라고도 생각했다.
하지만 랜덤하게 계속해서 바뀌는 조건에서는 작성할 수 없다고 생각했다.
다음으로 classList와 toggle을 사용해야하는것인가 하는 생각을 해봤는데, 아 이건 지금도 모르겠다... 머릿속에 방법이 그려지질 않았다.
갑자기 짜증이 또 치밀었고 나는 적어둔 코드를 전부 지워버렸다.
그리고 처음부터 다시 차근차근 적어보았다.
다시 작성한 나의 코드 💻
-
getHexColor 라는 함수를 만들어 준 뒤, 0-9 /A-F까지 numbers라는 변수에 배열을 만들어주고 그 배열을 결과값으로 가지고 #와 함께 넣어줄 변수 result 를 만들었다.
-
for문을 이용해 6자리를 출력하기로 했다.( i < 6) 그리고 for문 안에는 랜덤한 숫자를 numbers의 index의 갯수만큼 출력될 수 있도록 Math.floor( ) / Math.random( ) 을 이용해 만들어주었다.
-
result는 문자열로 만들어서 결과를 출력해주도록 할 것이고 numbers 배열의 randomNum을 index요소로 가져 출력할 수 있도록 해주었다.
-
초기화 함수를 작성해준 뒤에 버튼을 click 했을때 이벤트가 발생하도록 작성하였다.
-
이벤트를 핸들링할 수 있는 handleClick 이라는 함수를 작성해주고 h1 태그 안에 있는 텍스트를 위에 구해놓은 색상코드가 적혀 나올 수 있도록 작성을 해야했고, 그러러면 getHexColor 함수의 결과를 변수에 담아 값으로 가질 수 있어야했다. 이전에는 이 부분을 놓쳤었는데, (result가 전역변수로 선언되어 있었으므로 그냥 ${result}로 값을 가지면 된다고 생각했었음...) 자연스럽게 내가 치고 있었다... body의 배경색을 바꿔주는 코드까지 작성 후 완성!
-
두근거리며... CLICK ME 를 ... 딸-깍!
돌아간다!! 누를 때마다 변하며 돌아간다 ! ! ! !
💡 꼭 기록해두고 싶은 다음에는 안하고싶은 실수 💡
-
처음 작성한 코드에서 hexcolor를 위한 배열인 numbers와 result가 전역변수로 선언되어있었다. 밖에 있으면 result+= numbers[randomNum] 으로 작성해두었기 때문에 클릭을 누를 때마다 안에 랜덤으로 출력된 6자리 색상코드가 계속 불어난다.
만약 밖에서 선언 해주고 싶었다면 let result ="#"; 로 문자열을 계속 추가해서 넣어주는 것이 아니라 .push,set 등 뭔가 배열 관련 메소드를 이용해준다면 해결할 수 있을 것 같다. -
handleClick이 발생했을 때 6자리 색상코드를 출력하는 함수는 발생해야한다!
그냥 출력을 위해 ${result}값만 띡-하고 적어주는 것이 아니다!
다시 한번 기억해야하는 것은 handleClick()은 함수다!
#00FF22 같은 문자열을 return하는 함수! 여기까진 선언된 상태다.
나는 얘를 호출해준 적이 아직 없다! -
그러니까 함수를 다시 호출해주어야한다. 호출은 init()의 위치가 아니다. 처음 작성했던 코드에서 init에 호출해주었던 것이 작성도중 떠올랐다.... 아.. 이게 내 3시간을 태웠구나...... 클릭을 했을 때 매번 값을 넣어주어야하는 게 맞다! init() 제대로 못 쓸거면...쓰지말자......
