TIL 8/1

학습내용

html 의 엘리먼트의 속성값으로 data-변수이름="값" 형태로 속성을 부여할 수 있다.

<div class="box__container">
  <div class="inner-box1" data-inner=".inner-box1">box1</div>
  <div class="inner-box2" data-inner=".inner-box2">box2</div>
  <div class="inner-box3" data-inner=".inner-box3">box3</div>
  <div class="inner-box4" data-inner=".inner-box4">box4</div>
</div>

위와 같다면 JavaScript에서는 data-inner에 대한 값에 접근 할 수 있다.

const boxes = document.querySelectorAll('.box__container');
boxes.addEventListener('click', (event) => {
  const target = event.target;
  console.log(target.dataset.inner);
});

이렇게 된다면 클릭된 .inner-box숫자 가 나오게 된다. 이렇게 data- 다음에 키와 값의 형태로 넣어두면 dataset으로 접근이 가능하다. 이를 이용해서 클릭했을 때의 좌표를 입력할 수도 있다.

느낀점

프로젝트를 준비해야 할때 부족한 부분을 공부하려고 했는데 생각보다 많은 준비를 하지 못했다. 프로젝트 때도 공부를 하면서 열심히 준비해야겠다. 생각보다 두려움을 느끼는 것 같다. 민폐가 될까 걱정도 되고 내 코드가 의미가 없게될까 하는 생각도 든다. 자신감이 생겨야 하는데 요즘은 위축이 되어 있는 것 같다. 이를 극복해야겠다. 못하면 더 공부하면 된다. 부족하면 채우면 된다. 이렇게 움츠려들면 더 공부가 안된다는 것도 생각해야겠다. 오늘 공부도 생각보다 잘 들어오지 않았다. 나중에 복습하면서 다시 정리해야겠다. 프로젝트가 다가오니 오늘은 여기까지만해야지.