코딩하는라민

[JavaScript] 바닐라 자바스크립트에서 header, footer 와 같은 공통 요소 처리 방법에 대해 📌 개요 1년 전 멋사에서 진행했던 마켓컬리 클론코딩 프로젝트를 리팩토링하기 위해 오랜만에 코드를 살펴보았다. 이 프로젝트는 바닐라 자바스크립트로 작성된 프로젝트인데, header, footer 와 같은 공통 요소가 각 html에 모두 삽입되어 있었다. 리액트에 익숙해진 현재 시점에서 이와 같은 코드를 보니 익숙하지 않았다. 바닐라 자바스크립트에서는 공통적인 요소를 어떻게 적용하는지 궁금해졌다. 📌 웹 컴포넌트 웹 컴포넌트란? MDN 에서는 "재사용 가능한 커스텀 엘리먼트를 생성하고, 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다." 라고 정의하고 있다. 등장 배경 컴포넌트는 재사..