JavaScript Day11 ~ Day14

애매하게 14일까지 정리하는 이유는요 ?
아직 14일까지만 배웠기 때문인데요 ?
애 ~ 매한 14일까지 가보자고 !

---

Day 11

배열

• 배열 복사

  // 참조 복사
  let copiedArray = friends;
  
  // 얕은 복사 : 전개 구문
  copiedArray = [...friends];
  
  // 얕은 복사 : slice
  copiedArray = friends.slice();

• 배열 메서드
  • forEach 반환값 없음, 유사배열인 NodeList에 사용 가능
  • 원본 훼손 : push, pop, shift, unshift, reverse, splice, sort
  • 새로운 배열 반환 : concat, slice, toSorted, toReversed, toSpliced, map
  • 배열을 문자로 : join
  • 문자를 배열로 : split

try..catch와 에러 핸들링

try {
  console.log(value);
} catch(err){
  console.log(err); // ReferenceError: value is not defined
  console.log(err.name); // ReferenceError
  console.log(err.message); // value is not defined
  console.log(err.stack); // ReferenceError: value is not defined
}

• 서버에서 비동기적으로 데이터를 받을 때, 잘못된 형식이 들어오면 스크립트가 죽지 않고 에러를 핸들링 할 수 있음

JSON

• JSON.stringify( {..} ) : 데이터를 문자화
• JSON.parse( data ) : 데이터를 객체화

---

Day 12

주요 노드 프로퍼티

Object → EventTarget → Node → Element → HTMLElement → HTMLAnchorElement → <a>

• 모든 노드에서 이벤트를 사용할 수 있는 이유는 EventTarget을 상속받기 때문
• 모든 태그는 HTMLElement까진 동일하고 이후에 나눠짐
• innerHTML보단 textContent

속성과 프로퍼티 (⭐️)

• HTML 속성(attribute)은 DOM 객체의 프로퍼티(property)가 됨
• 표준 HTML 속성은 자동으로 해당하는 프로퍼티가 생성되어 1:1 매칭됨
• 비표준 HTML 속성은 프로퍼티와 매칭되지 않음
  • 비표준 속성은 data 키워드를 붙여 dataset으로 접근

문서 수정하기

document.body.insertAdjacentHTML('beforeend', '<div class="tiger">안목해변</div>');

스타일과 클래스

• className = '' 모든 클래스 삭제
• classList 이터러블하여 for..of 사용 가능

• cssText 해당 요소의 스타일 아예 다시 쓰기 (기존 CSS 날아감)
• getComputedStyle css 파일에서 작성한 스타일까지 반영됨

---

Day 13

브라우저 이벤트 소개

• HTML 속성 이벤트 핸들러(지양) <input type="button">
  • 실행한 형태로 작성해야 함수가 실행됨

• DOM 프로퍼티 이벤트 핸들러(지양) first.onclick = handler;
  • 실행하지 않은 형태로 작성해야 함수가 실행됨

• 메서드 이벤트 핸들러 addEventListener (⭐️)
  • 여러 개의 이벤트 할당 가능
  • 이벤트 제거 : removeEventListener
  • 이벤트 객체 제공 (핸들러의 첫번째 인수)

debounce

function debounce(callback, limit = 1000) {
  let timeout; 
  return function (e) {
    clearTimeout(timeout); 
    timeout = setTimeout(() =>
			callback.call(this, e);
    }, limit);
  };
}

function handle(e) {
  console.log(e);
}

ground.addEventListener('mousemove', handle); // 디바운스 X
ground.addEventListener('mousemove', debounce(handle, 500)); // 디바운스 O

• 이벤트가 여러번 실행되어 과부하를 방지하기 위해 사용함
• 가장 마지막으로 호출된 이벤트만 실행됨

throttle

function throttle(callback, limit = 100) {
  let waiting = false;
  return function (e) {

    // 무조건 한번만 실행됨
    if (!waiting) {
      callback.apply(this, e);
      console.log(this, e);
      waiting = true;

      // limit 타임마다 실행되도록
      setTimeout(() => {
        waiting = false;
      }, limit);
    }
  };
}

// throttle(() => {},1000); 1000 타이머에 맞춰서 주기적으로 호출됨
ground.addEventListener('mouseover', throttle(handle, 1000));

• 타이머로 넘긴 시간마다 이벤트가 실행됨

버블링과 캡처링

• event.target : 실제 이벤트가 시작된, 마우스가 닿은 대상
• event.currentTarget : 이벤트를 실행시킨 대상 (= this)
  • 이벤트 위임에서 현재 이벤트가 시작된 대상을 알기 위해 event.target 많이 사용함

• 버블링 중단 : event.stopPropagation()
  • 버블링 중단시 죽는 공간이 생김
  • 구글 애널리틱스 등의 자료 수집을 위해 웬만하면 막지 말기

• 캡처링 : elem.addEventListener(..., true)
  • 많이 사용 안함

이벤트 위임 (⭐️)

• event.target을 통해 실제 어디서 이벤트가 발생했는지 알아냄
• 명령을 실행해야 할 요소의 하위 요소가 event.target으로 잡힌다면, closest 메서드 활용

---

Day 14

모듈 프로그래밍 (⭐️)

// lib/dom/getNode.js
function getNode(){}
export default getNode

// lib/dom/index.js
export {default as getNode} from './getNode.js'; 
export {default as insert} from './insert.js'; 

// lib/index.js
export * from './dom/index.js';
export * from './error/index.js';

// main.js
import { getNode, insertLast, clearContents, refError } from './lib/index.js';

• 모듈 사용시 defer 기본 적용
• 내보내기시 이름으로, 기본으로 내보내기 방법이 있음
  • 기본으로 내보낼 때는 해당 js 파일에 함수가 하나만 존재해야 함

---

코어 자바스크립트 진도가 끝나고 DOM, Event를 배우면서부터는 확실히 실습을 많이 해서 정리할 내용이 적다.
이렇게 그동안 배운 내용을 돌아보니 정말 많은 내용을 배웠군아 ...
돔 제어만 했던 과거의 나 이제는 안녕 ~

이제 자스 수업이 단 6일 남았다 ...
수업은 곧 끝나지만 다행히 나에겐 모던자스 딥다이브가 있다 !!!
앞으로도 힘내보자고 ~