데이터 통신시 주의사항

• api오류인지, 구현오류인지 처음엔 잘 모르니 더미데이터 생성 후 렌더링까지하고 api받기
• 어떤 타입의 데이터가 어떻게 오는지 써놓기(알면 편하다!)

---

이벤트 위임

이벤트 버블링을 활용함.
=> 이벤트가 부모로 전파됨. e.target이 실제 이벤트 지점. 부모에게 달아놓고 e.target별로 구분해서 사용하면 핸들러 하나만 등록 하면 됨.

• closest는 내가 정해놓은 부모의 자식이면 true반환! 이걸 사용해서 핸들러처리할때도 있음.
• stopPropagation을 사용하면 부모로 전파되는 이벤트를 막을 수 있다.

이벤트 캡처링은 뭐지?
=> 이벤트가 있는지 document.root부터 타고 내려가면서 체크하고 실행함. 버블링의 반대. 기본적으로 캡처링은 false다.

즉, 부모노드에만 할당해두면 자식노드에 반복해서 달 필요가 없다.

---

fetch

fetch(url)형식으로 사용하지만 부가기능을 설정할수있음(객체)
http메소드를 정하거나, cors를 설정하고 헤더에 담을 데이터를 정하는 등 다양한 기능이 있다.

// Example POST method implementation:
async function postData(url = "", data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData("https://example.com/answer", { answer: 42 }).then((data) => {
  console.log(data); // JSON data parsed by `data.json()` call
});

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

---

텍스트 에디터

textarea vs contenteditable

=> 전자는 구식, 후자는 최신. 후자는 div같은 태그에 옵션으로 줄 수 있어서 꾸미기가 원활

---

디바운스, 스로틀링

같은 이벤트를 연속적으로 받아도, 맨 마지막 이벤트만 받아서 처리하는 기법.
전자공학에서 사용하는 단어다.
스위치를 사람이 눌렀다 떼면, 전압은 불규칙적으로 흘러들어간다. 압력, 타이밍 등등.
이 모든 전류를 처리할수도 없고 목적은 결국 on-off니 마지막까지 흘러들어온 전압만 체크한다.
이게 디바운스다.

if(refOfSetTime) {
	clearTimeout(refOfSetTime)
}
const refOfSetTime = setTimeout....

// setTimeout 함수는 자신을 가리키는 특수한 ID를 리턴해준다. 이 값을 참조해서 clearTimeout 호출이 가능하다.

쓰로틀링은 성능을 강제로 제한 하는 기술이다. 500만원을 송금할 수 있지만, 10만원씩 송금하게 하는 방법이다.
본래는 하드웨어(CPU)가 제한 온도에 도달하면 성능을 낮추어 온도를 내리는 기술이었다.

---

커스텀 이벤트

내가 원하는 이벤트를 만들고, 필요한 곳에서 구독하는 방식을 사용할수 있다.
마치 pub-sub패턴 같구만!

window.addEventListener("custom-event", callback());
//받는곳에서는 이렇게
window.dispatchEvent(new CustomEvent("custom-event", {
	detail: {
    	//필요한 값
    }
})
)

굳이 이벤트 채널을 따로 구현하지 않아도 되는구나!

하지만 단점도 있어보인다. 윈도우 전체에 이벤트를 등록하니, 이벤트가 많아질수록 리소스소모가 꽤 크지 않을까? 작은 이벤트들이라면 할만하다.

---