[javascript] 브라우저 & 웹 API

HTML Semantic Element___

HTML은 문서다.

각 태그에는 의미가 있고, 구조화되어있다는 의미.
읽었을 때 의미가 전달이 되어야 한다.

NodeList___

Node는 문서 내의 모든 객체를 말한다.

각 태그는 물론이고 \n(줄바꿈), 주석도 Node이다.

Element는 tag로 둘러싸인 요소다.

기술면접 준비를 하다보면 element와 property의 차이점에 대해서 묻는 내용을 간간히 볼 수 있다.

element는 html 태그의 속성이다.

<input type="text" onClick={onClick}/> //여기서 type과 onClick이 바로 element다.

property는 자바스크립트 객체 속성이다.

const onClick = (e) => { //e: 이벤트 객체
  console.log(e.value)  //value: 이벤트 객체의 property
}

NodeList

NodeList
element.childNodes,
document.querySelectorAll로 요소를 가져오면 NodeList가 반환된다.

• NodeList는 array가 아니다. object임.
  
  mdn에서 NodeList페이지의 div를 querySelectorAll로 가져와봤다.
• NodeList를 array로 변환해서 사용해야한다.

1. [...NodeList]로 변환(방법은 많다.)
   
2. arr.map 사용이 가능해진다.
   

innerHTML___

지양할(위험한) 메서드

문자열 렌더링

innerHTML => innerText => texContent
xss(해킹)에 취약하다. 심지어 느리다.

insertAdjacent 모음을 사용하자.

insertAdjacentElement

insertAdjacentHTML

insertAdjacentText

Data Attributes

비표준(커스텀), 존재하지 않은 어트리뷰트도 태그에 들어간다. 보안에 좋지 않다.

<main hello="world" /> //작동하지만 이렇게 쓰지 말것

data- prefix

data- 를 붙여서 커스텀 사용이 가능하다.
kebab-case를 사용해서 네이밍한다.
자바스크립트에서 사용할때는 snakeCase를 사용해야함.

• 사용자에게 보이면 안되는 custom attribute의 경우
  빌드 단계에서 지운다.

attribute에 접근

getAttribute()

dataset

• javascript에서 사용하기

<main data-index-number="123" />
const main = document.querySelector('main');
main.dataset.indexNumber; //"123"
delete main.dataset.indexNumber; //삭제

• css에서 사용하기

main[data-index-number='123'] {
  width: 400px;
}

Black Box Event Listener___

Black box란

내부 구현이 어떻게 되는지 알 수 없지만 기능만 아는 어떤 물체나 시스템을 말한다.
테스트 할때 블랙박스 테스트와 화이트박스 테스트가 있는데,
블랙박스 테스트는 기능이 제대로 작동하는지만 테스트 하는 것이고
화이트박스는 내부 구조까지 테스트하는 것을 말한다.

이 강의에서의 black box의 의미는

1. 내부 구현이 어떻게 동작될지 예측할 수 없는 경우.
2. 추상화가 너무 과하게 되거나 명시적인 코드가 아닌 경우.

const button = document.querySelector('button');
button.addEventListener('click', onClick); //혹은 handleClick

• 네이밍이 중요하다.
• 위와 같은 경우 어떤 이벤트가 발생하는지 알 수가 없다.
• 굉장히 많은 코드가 등록되는 경우에는 오히려 추상화가 필요하다.
• 의미를 파악할 수 있게 네이밍하자.

case1:: searchbar

// 검색: 엔터가 당연히 되어야한다.
const handleClick = (e):void => {
  // 1. input을 받는 코드
  // 2. 유효성 검사를 하는 코드
  // 3. form을 전송하는 코드
}
button.addEventListener('click', handleClick);
button.addEventListener('keyup', handleClick); //keyup과 handleClick: 이질감이 든다.

Refactor

const handleSearch = (e):void => {};
button.addEventListener('click', handleSearch);
button.addEventListener('keyup', handleSearch);
form.addEventListener('onsubmit', handleSearch); //form 이벤트도 추가