자기소개 페이지를 만든 1주차가 지나고 2주차에는 JavaScript를 이용해 더욱 동적인 페이지를 만들라고 하셨지만 jQuery가 애매하게 익숙했던 나는 머릿속 순서도는 엉망진창이였고 마음 역시 갈대처럼 휘둘거리고 있었다🌾
사실 주어진 Assignment는 1주차 자기소개페이지뿐이고 나머지는 알아서 공부해야한다. 방향성이 아예 모르는 나는 되게 당황스러웠지만 스터디에서 좋은 사람들은 만나 얘기도 많이하고 준우님의 주도하에 공부가 더 필요한 사람들끼리 작은 프로젝트를 하기로 하였다.

2week goal

💻 JavaScript를 사용해보자! (clikc하면 background-color 바꿔보기)

1. JavaScript 틀을 구상하기

기본적으로 어떤 메소드와 알고리즘 DOM을 제대로 몰랐기 때문에 준우님이 힌트를 주면 거기에 맞게 JS가 어떻게 돌아갈건지 머릿속으로 구상을 하였다.

2. HTML

<div class="content">
  <div>hex color:
    <div class="colorValue"></div>
  </div>
  <button value="click">click</button>
  <div class="title">Background Color Change</div>
</div>

3. JavaScript

const body = document.querySelector('body');
const rgbvalue = document.querySelector('.colorValue');
const button = document.querySelector('button');

const hexNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
rgbvalue.innerHTML = '#ffffff';

let randomNumbers = [];

button.addEventListener('click', function() {
  randomNumbers = [];
  for (let i = 0; i < 6; i++) {
    const index = Math.floor(Math.random() * hexNumbers.length);
    randomNumbers.push(hexNumbers[index]);
  }
  let chooseColor = `#${randomNumbers.join('')}`;
  console.log(chooseColor);
  rgbvalue.innerHTML = chooseColor;
  body.style.backgroundColor= chooseColor;
})

수정하면 좋은 부분

.addEventListener 밖에 let randomNumbers = [];을 선언해서 안에도 randomNumbers = []라는 코드로 초기화해주었는데 사실상 이럴 필요도 없었다.

button.addEventListener('click', function() {
  let randomNumbers = [];
}) // 안의 부분은 동일하니 생략

변수 선언을 전역 변수가 아닌 로컬 변수로 만들어주면 다시 빈 배열을 안만들어도 된고, 함수 안에서만 쓰는 변수는 전역 변수로하면 불필요하다는 피드백을 받았다.

단순히 초기화 시켜줘야한다고해서 위에 있는 코드도 보지 않은채 코드를 더 넣기만 한 것 같다. 안좋은 습관이니 고쳐야할 것 같다.

---

다음 계획

mini projects들을 하면서 '프로그래머스' 알고리즘 공부와 산 책들을 더욱 깊게 공부하여 JavaScript에 대해서 알고싶다.