Implementing dynamic browser features using HTML and JavaScript
1. link page
HTML의 a 태그를 통해 페이지 이동
2. button_id addEventListener
버튼에 id 를 부여 후 클릭 이벤트 추가하여 컨텐츠 변경
3. custom_data_attributes function_mapping
버튼에 data- 어트리뷰트를 커스텀하여 프로퍼티로 전달 받은 후 클릭 이벤트로 컨텐츠 업데이트,
분기된 함수를 값에 저장하여 프로퍼티로 전달
4. button_onclick arrow_function
버튼에 onclick 메서드를 통해 화살표함수를 값을 변경할 수 없는 변수(=상수)에 담아서 호출
5. button_onclick module_property
ES6 Module과 CommonJS Module 의 모듈을 알아보고,
불러온 모듈을 값에 담아서 버튼 이벤트 호출 시 프로퍼티로 전달
6. button_onclick customElements_property
HTMLElement로 customElements를 생성하고
버튼 클릭 시 해당 컴포넌트를 프로퍼티로 전달받아서 innerHTML로 출력
7. template
template 태그를 사용하여 미리 템플릿을 만들어두고,
fetch로 분리한 HTML 불러온 후 insertAdjacentHTML 로 파싱 후
DOM 트리에 추가된 템플릿을 버튼 이벤트로 호출하여 지정된 요소에 출력,
미리 만들어둔 템플릿은 브라우저 렌더링 초기에 로드되지 않음
8. shadowDOM
attachShadow 메서드를 사용하여 shadow-root 를 open 활성해주고
글로벌에 영향 받지 않는 쉐도우 스코프를 생성