📝 오늘 한 것

1. Background Changer 구현

2. Hex Color Code / Math.random() / Math.ceil() / Math.floor()

3. 함수 호출과 return 다시 한번 정리 후 커밋

📖 학습 자료

1. 사전 학습 가이드 STEP 4 (Background Changer)

📚 배운 것

DOM 실습

---

1. Background Changer 구현

1) 과제

버튼 클릭 시 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code 텍스트 수정하기

2) 풀이 과정

(1) HTML / CSS 작성

HTML

<div>
  <p class="code"></p>
  <button>CLICK ME</button>
</div>

CSS

div {
  width: 100%;
  height: 500px;
  background-color: bisque;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button {
  background-color: grey;
  color: white;
  border-style: none;
  border-radius: 3px;
  padding: 10px;
}

(2) javascript 작성 (실제로 문제를 풀면서 생각한 순서대로 정리)

• 일단 아무 색상 코드를 하나 지정해서 이벤트를 등록해봤음
• 이벤트 타깃 : 버튼
• 이벤트 타입 : click
• 이벤트 리스너 : 배경 색과 텍스트 문구를 바꿔야 함
• 배경 색과 색상 코드는 같아야 함

// 요소 선택
const div = document.querySelector('div');
const code = document.querySelector('.code');
const button = document.querySelector('button');

// 버튼에 이벤트 등록
button.addEventListener('click', function change () {
  code.textContent = `HEX COLOR: 아무 색상 코드`;
  // 버튼 클릭 시 텍스트 수정하기
  div.style.backgroundColor = '아무 색상 코드';
  // 버튼 클릭 시 배경 색깔 바꾸기
});

→ 버튼을 한번 누르니까 지정한 색으로 배경 색깔이 바뀌고, 없었던 텍스트가 생기는 것을 확인함
→ 이제 헥스 색상 코드를 생성하는 함수를 만들고, '아무 색상 코드' 부분에 헥스 색상 코드를 넣어야 함

• 그렇다면 헥스 색상 코드를 생성하는 함수는 어떻게 만들 수 있을까?
• Hex Code : 0부터 9까지의 숫자와 A부터 F까지의 알파벳이 랜덤하게 구성되어 이루는 6자리 코드
• 총 16개의 숫자+알파벳을 하나의 배열로 만든 후 그 요소를 랜덤하게 하나씩 뽑아 와서 6자리 문자열로 만들 수 있는지 알아 보자.
• 일단 배열을 만들어 둚

const collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
// 총 16개의 요소들이 있음 → 배열의 길이 : 16

• '자바스크립트 배열에서 랜덤 추출' 검색
  → 뭐가 많이 나오는데 이해하기 어려움
  → 랜덤 추출과 관련된 거 같아 보이는 Math.random( ) 먼저 학습
  자바스크립트 Math.random() 범위 지정 및 정수 자릿수 조절 참고

console.log((Math.random() * (최댓값 - 최솟값)) + 최솟값);
// 괄호 관계 복잡함. 유심히 확인할 것.

(Math.random() * (16 - 0)) + 0
// 즉, 깔끔하게 쓰면
Math.random() * 16

• 배열의 길이가 16이므로 내가 Math.random()을 통해 랜덤으로 추출되길 바라는 값은 배열의 index인 0 ~ 15
• 추출값에 최솟값은 포함되지만, 최댓값은 포함 안됨
  → 최댓값에 '16', 최솟값에 '0'을 대입
• 0 이상 16 미만의 숫자를 랜덤하게 추출할 수 있게 됨

• 그러나, 여기서 추출되는 숫자(난수)들은 정수가 아니고 소수점 이하에 딸린 숫자들이 많음. 내가 필요한 건 배열의 index인 0부터 15까지의 정수임. Math.random()의 추출값을 정수로 만드는 방법 검색.
• Math.ceil()과 Math.floor() 학습

// Math.ceil(숫자); 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 정수
console.log(Math.ceil(15.4)); // 16

// Math.floor(숫자); 주어진 숫자보다 작거나 같은 숫자 중 가장 큰 정수
console.log(Math.floor(15.5)); // 15

• 내가 필요한 건 Math.floor()였음

• 여기까지 진행해서 작성한 javascript 코드

const div = document.querySelector('div');
const code = document.querySelector('.code');
const button = document.querySelector('button');

const collection = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']; // 16개 아이템

console.log(Math.random() * 16);
// 0 이상 16 미만의 난수 출력 (소수점 이하에 딸린 숫자들 있음)
// 이 코드는 나의 사고 과정을 기록하기 위해 쓴 것일 뿐, 여기선 필요 없는 코드임

const randomIndex = Math.floor(Math.random () * 16);
// 0 이상 16 미만의 정수 난수 출력

const getRandom = collection[randomIndex];
// collection 배열의 16개 요소들 중 랜덤으로 뽑아온 값

button.addEventListener('click', function change () {
  code.textContent = `HEX COLOR: #${getRandom}${getRandom}${getRandom}${getRandom}${getRandom}${getRandom}`;
});
  div.style.backgroundColor = `#${getRandom}`;

• 이상하지만 한번 해봤는데 역시 이상하게 나옴 ex) #222222, #FFFFFF 등
• 그리고 버튼을 처음 누르면 텍스트는 저렇게라도 나오긴 나오는데 그 다음부턴 누르면 반응이 없음
• 심지어 배경색은 아예 안 바뀜

• 일단 ${getRandom}이 전부 같은 값이 나오는 이유는 이러함
  → 위에서 출력만 랜덤하게 했을 뿐, 출력 자체를 딱 한 번 하기 때문에 그 값은 변화 없이 getRandom이란 변수에 고정값으로 할당되기 때문
• 그렇다면 어떻게 하면 헥스 색상 코드의 6자리 문자들이 전부 다르게 나오도록 만들 수 있을까?
• collection 배열의 index를 의미하는 randomIndex라는 변수에 값이 6번 랜덤으로 할당되고, 그에 따라 배열에서 랜덤으로 뽑힌 요소들이 차례차례 옆으로 붙어서 6자리 문자가 되도록 해야 함

• 그러나 방법을 모르겠어서 여기서 사전 학습 가이드 STEP 4의 힌트('헥스 색상 코드를 생성하는 함수')를 참고함
• 참고해서 수정한 코드

// 복습할 때 가로 스크롤바 움직여서 옆에까지 볼 것!
const div = document.querySelector('div');
const code = document.querySelector('.code');
const button = document.querySelector('button');

// 이동함 ❌ const collection = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
// 이동함 ❌ const randomIndex = Math.floor(Math.random () * 16);
// 삭제함 ❌ const getRandom = collection[randomIndex];

button.addEventListener('click', function change () {
  function MakeHex () {
    const collection = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']; // 이동됨 ❗

    let string = '#'; // 추가함 ➕

    for (let i = 0; i < 6; i++) {
      const randomIndex = Math.floor(Math.random () * collection.length); // 이동됨 ❗ + 16을 collection.length로 바꿈
      string += collection[randomIndex]; // 추가함 ➕
    } // for 반복문을 추가함 ➕

    return string;
  }

  code.textContent = `HEX COLOR: ${string}`;
  div.style.backgroundColor = `${string}`;
});

• 이전에 내가 만든 코드들을 이벤트 리스너 안의 헥스 색상 코드 생성 함수 안으로 이동시킴
• for 반복문과 let string = '#'; , string += collection[randomIndex]; 을 통해 6자리 코드 구현이 가능해짐
• 그러나 결과는 이번에도 제대로 나오지 않고 'HEX COLOR: #' 라고 뜸
• 원인은 MakeHex 함수를 선언만 했을 뿐, 호출하지 않았기 때문이었음

• 다시 수정한 최종 답안 코드 💡 💡 💡

const div = document.querySelector('div');
const code = document.querySelector('.code');
const button = document.querySelector('button');

button.addEventListener('click', function change () {
  function MakeHex () {
    const collection = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];

    let string = '#';

    for (let i = 0; i < 6; i++) {
      const randomIndex = Math.floor(Math.random () * collection.length);
      string += collection[randomIndex];
    } // for 반복문 끝

    return string;
  } // 헥스 색상 코드 생성 함수 MakeHex() 끝

  const color = MakeHex();
  // MakeHex() 함수를 호출한 후 그 값을 color라는 변수에 할당

  code.textContent = `HEX COLOR: ${color}`;
  div.style.backgroundColor = `${color}`;
});

💭 느낀 점

이 문제 하나를 연구하는 데 꼬박 하루가 다 갔다. 한 문제에 이렇게 긴 시간을 쏟아도 되는 건가 하는 불안감도 들고, 힌트를 보지 말고 끝까지 혼자 할 걸 하는 후회도 들고, 그래도 결국 완성해서 끝까지 모르는 부분 없이 이해했다는 것에(일단 지금은 그러한데 며칠 뒤에 발견할지도?!) 조금은 뿌듯한 마음도 든다.

그래도 역시 힌트를 보지 않고 완성했다면 시간을 많이 쏟았어도 더 뿌듯했을 거 같은데 그건 좀 아쉽다. 얼마 전 첫 알고리즘 문제를 풀면서는 끝까지 스스로 풀어서 더 뿌듯했던지라. 이 문제의 경우 기간이 최대 3일이라고 쓰여 있긴 했는데 나 같은 입문자에겐 이런 문제도 정말 3일짜리 문제인 걸까. 아무래도 주어진 시간이 많지 않아서 좀 더 조급해지는 거 같다. 그래도 시간은 그저 부족할 뿐, 의미 없는 시간은 없다는 걸 다시 한 번 느꼈다. 고로 내일은 정말 최대한 혼자 해봐야겠다.

머리는 뒤죽박죽이 되지만, 역시 이론보단 실전이 더 재밌는 거 같다. 비로소 완성해서 버튼을 클릭할 때마다 배경 색이 자유자재로 휙휙 바뀌었을 때의 쾌감이란. 훗날 이 글을 다시 보면서 별 것도 아닌 걸 풀면서 풀이를 참 구구절절하게도 써놨다며 추억을 회상할 날이 올까. 그때 돼서 조금 창피해도 되니까 그런 날이 어서 빨리 왔으면 좋겠다. 아무쪼록 오늘은 답답했지만, 재밌는 시간이었다! 내일 실습도 재밌어 보이던데(일단 지금은...) 내일이 기대된다. 😁

✨ 내일 할 것

1. 사전 학습 가이드 STEP 4 (carousel)