[javascript] javascript boot camp 16기 여섯번째 수업

2020-09-07

자바스크립트 부트캠프 16기 여섯번째 수업

이벤트 시스템의 이해 ui를 다루기위해선 필수적으로 익혀야하는 시스템.

저장소가 있을때, UI / 이벤트 / 함수

1) UI 요소: Btn이라는 DOM 2) 이벤트: click이라는 사건 3) 함수: 실행되어야하는 코드덩어리

querySelector는 css의 구문 즉 CSS의 선택자를 입력해서 활용할 수 있는 메소드입니다

기본적으로 ui를 가지고오는 코드가 수반됀다.

큐의 개념같은 경우는 지금 학습하기엔 어려움. 컴공 베이스지식(자료구조)이 있어야지 이해가능한 영역

비전공자라도 자료구조 중에 3가지는 꼭 알고가면 좋은 지식

  1. 스택
  2. 큐 스택이나 큐같은 경우는 알아서 배열루 구현하면 좋을거고
  3. 트리 트리도 학습할때 도움이 굉장히 마니 댐.

이벤트 구독

let root = document.querySelector('div');
let save = document.querySelector('[data-action=save]');

root.addEventListener('click', function(event) {
  console.log(`target: ${event.target.tagName}`);
  console.log(`currentTarget: ${event.currentTarget.tagName}`);

  console.log(event.target.dataset.action);
});

save.addEventListener('click', function(event) {
  if (event.target.dataset.saveType === 'auto') {
    // dataset의 이름을 카멜케이스로 가지고올수있음
    // event.target해버리면 i라는 node를 누르게 돼서 currentTarget이 적합하다.
    console.log('자동 저장');
  } else {
    console.log('수동 저장');
  }
});

target 과 currentTarget ? target: 클릭한 DOM. 실제로 이벤트가 발생한 DOM 요소 currentTarget: 이벤트리스너가 등록된 요소, 이벤트핸들러로 등록된 대상

html태그는 태그를 감싸고 있는 형태. a태그는 p태그가 감싸고 있고 div가 감싸고 있는 형태 2차원 평면형태로 바라보다보니깐 감싸진게 아니라 위치가 안쪽.

실제적으로는 전체가 다 감싸져있음

내가 등록한 요소에서만 이벤트가 발생하는게 아니구나 ! 요소 입장에서는 부모이벤트에 이벤트를 등록해놓으면.. 혼란이 올수도~_~ 정확히 어떤 요소가 클릭됐는지 확인됄 필요가 있기에 target을 씀

?_? 근데 버튼만하면 돼지 왜 div클릭하게하는걸까? 실제상황엔 변이가 많음.

구글 스프레드 시트 경우에는 그 많은 dom들을 querySelector로 등록하기엔 비용이 크니, 그냥 아예 div 통채로 묶어서 진행하는것이 더 효율적..

target을 쓸때가 나을때가 있고, currentTarget을 쓸때가 나을 수도 있음. 적절히 혼합해서 사용하기

이벤트 전파

쓸일이 없어도 개념은 확실히 알아야함 이벤트 핸들러가 어떤 순서로 호출되게 할것이냐…

바깥쪽 안 박스 안 박스가 있는데. 클릭할때, 바깥쪽부터 이벤트가 전파된다.

이벤트가 중첩됐을때 어떻게 전파되는가?

이벤트 버블링, 이벤트 캡쳐링
const BUBBLING_PHASE = false;
const CAPTURING_PHASE = true;
const PHASE_NAME = ['NONE', 'CAPTURING', 'TARGET', 'BUBBLING'];

function eventLogger(e) {
  console.log(`${e.target.dataset.name}, ${e.currentTarget.dataset.name}, ${PHASE_NAME[e.eventPhase]}`);
}

let divs = document.getElementsByTagName('div');

/*
  let divs = document.querySelectorAll('div');
  divs.forEach(div => div.addEventListener('click', eventLogger));
*/

// 이벤트 버블링
for(let i=0; i < divs.length; i++) {
  divs[i].addEventListener('click', eventLogger, BUBBLING_PHASE);
}

// 이벤트 캡쳐링 (캡쳐링 쓰는건 별로 없고..)
for(let i=0; i < divs.length; i++) {
  divs[i].addEventListener('click', eventLogger, BUBBLING_PHASE);
  // 세번째 인자는 기본값이 false고, 버블링이 일어난다.
}


event.stopPropagation(); // 이벤트 전파를 금지시킨다. (면접때 질문~_~)

브라우저 기본 객체의 이해

DOM이 중요한데 왜 자세히 다루지않는가? DOM은 매우 복잡하고 애립다. DOM을 다루면서 ui를 다루기에는 너무 복잡도가 높아짐

DOM을 가지고 제어하지않아도 ~ react나 vue로 만들 수 있어염

library의 역사는 DOM과의 사투였다

DOM을 몰라도 웹앱을 개발할 수 있다 -> react만 한다치면 가능함. react는 DOM의 직접적인 접근을 막고 지양함.

하지만 DOM에 대한 개념을 알아야 성능개선에 이로움

DOM (Document Object Model) -> html의 오브젝트들을 객체화 시킨 모델.

DOM도 자료구조라고 보면 CRUD가 가능하다 ㄴ> DOM TREE 돔 트리 ㄴ> html :root / 줄기는 node.

html root node. head와 body는 head node, body node 뿌리와 가지의 관계를 부모, 자식간의 관계로 표현하기도 함 자식을 추가한다 appendChild..

// 색이 다른 5개의 상자를 추가하세요.
function createBoxStyle(width, height, color) {
  return {
    width: `${width}px`,
    height: `${width}px`,
    backgroundColor: color
  };
}

function createSquareBoxStyle(size, color) {
  return createBoxStyle(size, size, color);
} // 의미를 더욱 더 명확하게 하기 위해서.. 명시적인 함수들을 활용하면 앱의 규모가 커질수록 더 가독성 높아지고 쾌적해짐.

function createBox(boxStyle) {
  let box = document.createElement('div');

  box.style.width = boxStyle.width;
  box.style.height = boxStyle.height;
  box.style.backgroundColor = boxStyle.backgroundColor;

  return box;
}

let container = document.getElementById('box-container');
let boxStyles = [
  createSquareBoxStyle(10, 'red'),
  createSquareBoxStyle(20, 'orange'),
  createSquareBoxStyle(30, 'yellow'),
  createSquareBoxStyle(40, 'green'),
  createSquareBoxStyle(50, 'blue'),
];

for(let i = 0; i < boxStyles.length; i++) {
  container.appendChild(createBox(boxStyles[i]))
}

학생 1 ~ 학생 3 분들의 코드를 보고 리뷰해보는것도 괜찮.. 재미있는 approach ㅎㅎ