HTML Semantic Element
div를 남발하지 않고 의미있는 태그를 쓰는게 좋다.
-> 한눈에 구조를 파악할 수 있고 웹 표준에도 맞기 때문이다. (SEO 👍🏻)
header, main, article, section, footer등 적극 활용!
Html은 마크업 언어(문서)이다.
깃허브의 Readme.md 에서 md는 마크다운이다.
마크다운은 마크업보다 조금 더 간단하게 작성할 수 있는 언어이다.
ex. h1, h2 대신 #, ## 사용
Nodelist
- Node : 문서 내에 모든 객체를 뜻함
- Element : 태그로 둘러싸인 요소를 뜻함
- Nodelist :
document.querySelectorAll에 의해 반환되는 노드의 콜렉션이다.
웹 페이지의 HTML 문서 내에서 선택한 요소 뿐만 아니라 텍스트, 주석, 속성 등의 모든 노드를 문서 내 정렬된 순서대로 모아둔 집합이다.
-> 유사 배열 객체이면서 for of 문으로 순회가 가능하다.
innerHTML
innerHtml은 만들어진지 오래되었고 좋지않은 api이다.
단점
보안적으로 좋지 않다.(XSS의 위험성이 있음)
-XSS(cross site scripting): 스크립트 코드를 삽입해서 공격할 수 있음- 직렬화 과정을 거쳐서
시간도 오래 걸린다.(파싱 성능이 떨어짐)
대안책
setHtml을 대신 써도 되지만 아직 실험적인 기능이고 사파리에서 지원이 되지 않는다.
따라서 insertAdjacentHtml를 쓰는게 좋다.
정리
innerHtml대신insertAdjacentHtml사용하기- 문자열만 렌더링 할 때에는
innerHtml->innerText->textContent로 쓰기
권장
insertAdjacentElement, insertAdjacentHTML, insertAdjacentText
Data Attributes
자주 쓰는 데이터 속성에는 class, id 등이 있다.
ex. input 속성 : type, value,,
- 존재하지 않는 속성(비표준 속성)을 사용해도 오류가 나지 않는다.
- 그렇지만 혼돈을 야기할 수 있기 때문에 규칙을 사용하여 커스텀 속성을 좀 더 의미있게 사용하는 것이 좋다. (kebab-case로 작성)
ex. data-color, data-columns, data-cy(테스트를 위해 존재) 등등
Black box EventListener
개발에서의 Black box는 내부 구현이 어떻게 동작할지 예측할 수 없는 경우를 말한다. (추상화가 너무 과하게 되거나 명시적인 코드가 아닌 경우)
ex. addEventListener(‘click’, onClick)
-> 클릭하면 어떤 일이 일어나는지 알 수 없음
ex. addEventListener(‘click’, getLog)
-> 이건 이해하기 쉬움
검색창 같은 경우에도 handleClick 보다는 handleSearch와 같이 작성해주는 것이 좋다.
