쇼핑몰 예제를 진행하면서 헤더나 검색창 부분이 중복 사용되면서 이전에 연구해봤던 웹컴포넌트를 사용해보기로 했다. 이전에 포스팅했던 방식으로 진행을 해보았는데 막상 실전에서 사용해보니 shadow.root로 컴포넌트에 벽을 쳐 두니 생각보다 번거로운 부분이 너무 많았다. 그래서 그냥 모두 오픈시켜서 사용해보았고 이렇게 해도 큰 탈 없이 잘 진행되었다. class HeaderComponent extends HTMLElement { constructor() { super(); } connectedCallback() { this.innerHTML = ` home 로그인 로그아웃 admin `; // 버튼 이벤트 리스너 추가 this.querySelector('#home-btn').addEventList..