TIL 시맨틱, XMLHttpRequest, 이벤트 위임 제약

특정 태그를 사용하지 않을 때를 고려해야 하는 이유

 

의미론적으로 맞지 않을 때

(ex: a태그는 이동을 위한 것이므로 모달창을 열기 위해서는 의미론적으로 맞지 않음)

접근성

의미론과 같은 선상에 있는데, a태그는 열기 위해서인데 button을 사용한다거나 반대로 사용한다면 

접근성에도 영향을 미칠 것이다. 

 

각 태그의 시멘틱을 지키자

이 태그만 보았을 때 어떤 의미를 가지고 있을 것이라는 것을 알 수 있도록

(사용의 목적과 의미를 명확히)

 

XMLHttpRequest객체와 fetch의 장단점 

 

 

- js deepdive 822p

 

XMLHttpRequest객체

비동기 HTTP통신을 하기 위해 사용되는 객체. 

콜백헬이 일어날 수 있고, fetch보다 비교적 장황한 로직으로 되어있다. 

new키워드로 인스턴스를 생성하고 해당 인스턴스로 상속받은 메서드를 사용하는 방식

 

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

 

header를 지정하는 데도 메서드가 필요하고 상태가 변화할 때마다 메서드 안의 콜백을 부르는 식이라서

가독성에 영향을 미친다

 

장점으로는 비교적 오랜 사용연수를 가지고 있기 때문에 브라우저 호환성에 좋다.

abort()메서드를 사용하여 요청 취소를 할 수 있다. 

 

fetch

XML에 비해 로직이 간단하고 async await방식으로 promise지향적인 사용법이다.

요청취소할 수 없는 단점이 있지만, asyn await방식이므로 가독성이 향상되었고, 

헤더를 설정하는데 비교적 간단하다. 

AbortController를 사용하지 않으면 요청 취소를 할 수없다는 단점이 있으나, 

많은 장점을 가지고 있으므로 fetch가 현재 더 널리 통용된다. 

 

 

이벤트 위임한 부모 태그에서 특정 상황에서 이벤트 리스너 동작 무효화하기

 

동적으로 받아오는 pagenation을 컴포넌트로 그려주고 있고, 

해당 pagenation컴포넌트에 특정 클릭 이벤트 리스너를 등록해야 한다. 

(클릭하면 특정 위치로 스크롤)

 

제약 조건

총 페이지가 1이라면 왼, 오, 맨앞, 맨뒤 버튼(이하 페이지 이동 버튼)을 클릭했을때 해당 리스너가 작동하면 안된다. 

현재 페이지의 넘버를 클릭하면 리스너가 작동되면 안된다. 

 

특징

페이지 이동 버튼은 textContent가 글자로 되어있고, 

페이지넘버는 숫자 타입으로 되어있다.  

현재 페이지는 state로 변경되어 적용되어있다.

 

해결 방법 고민중

1) totalPage가 1일때 모든 이벤트 리스너 위임 막기 

2) 페이지 버튼 클릭시 현재 page와 textContent가 동일한 경우 이벤트 리스너 무효화

그게 아니면 데이터 속성을 사용해보기