코딩하는라민

[JavaScript] 바닐라 자바스크립트에서 header, footer 와 같은 공통 요소 처리 방법에 대해 본문

Core/JavaScript

[JavaScript] 바닐라 자바스크립트에서 header, footer 와 같은 공통 요소 처리 방법에 대해

코딩하는라민 2024. 1. 6. 17:48
728x90
반응형

[JavaScript] 바닐라 자바스크립트에서 header, footer 와 같은 공통 요소 처리 방법에 대해

 

 

📌 개요

1년 전 멋사에서 진행했던 마켓컬리 클론코딩 프로젝트를 리팩토링하기 위해 오랜만에 코드를 살펴보았다.

이 프로젝트는 바닐라 자바스크립트로 작성된 프로젝트인데,
header, footer 와 같은 공통 요소가 각 html에 모두 삽입되어 있었다. 리액트에 익숙해진 현재 시점에서 이와 같은 코드를 보니 익숙하지 않았다.

 

바닐라 자바스크립트에서는 공통적인 요소를 어떻게 적용하는지 궁금해졌다.

 

📌 웹 컴포넌트

웹 컴포넌트란?

MDN 에서는 "재사용 가능한 커스텀 엘리먼트를 생성하고, 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다." 라고 정의하고 있다.

 

등장 배경

컴포넌트는 재사용 가능하고, 클래스를 기반으로 생성된 인스턴스를 말한다.

1990년대 `컴포넌트 기반 아키텍처(CBA)` 라는 설계 방법이 활발히 논의되었고, 2010년대에 들어 웹의 규모가 커짐에 따라 `재사용성`, `모듈화`에 대한 논의가 시작되었고 그 결과 컴포넌트 기반 접근법 도입이 제기되었다고 한다.

이로 인해  2011년에 `웹 컴포넌트`가 등장한 것이었다!

― 출처 1

 

웹 컴포넌트의 구성

웹 컴포넌트는 다음과 같은 기술을 통해 코드의 재사용성, 모듈화를 촉진하여 효율적으로 작업할 수 있도록 도와준다.

  • Custom elements : HTML 태그를 정의하고, 해당 태그의 동작을 JavaScript로 구현하는 기술
  • shadow DOM : 컴포넌트의 스타일과 마크업을 캡슐화하여 외부의 스타일과 충돌하지 않도록 하는 기술
  • HTML template : 재사용 가능한 마크업 템플릿을 정의하는 기술

웹 컴포넌트 사용하기

Custom elements, HTML template 적용하여 header 정의하기
class HeaderComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <header>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>
    `;
  }
}

customElements.define('app-header', HeaderComponent);

 

HTML에 적용하기
<!DOCTYPE html>
<html>
<head>
  <title>웹 컴포넌트 사용하기</title>
</head>
<body>
    <app-header></app-header> <!-- 헤더 -->
</body>
</html>

 

 

React 에서도 사용 가능한 웹 컴포넌트

 

웹 컴포넌트 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

 

📌 Fetch API

Fetch API 를 이용하는 방법은

웹 컴포넌트 외의 방법이 더 없을까 고민하다가 발견한 포스팅에서 나온 방법이다.

웹 컴포넌트를 이용하는 방법과 비슷한 방법이지만, 이 방법은 api 를 사용하는 방법이기 때문에 네트워크에 따른 지연이 발생할 수 있어서 사용을 고려해봐야할 것 같다.

― 출처 2

 

fetch API 사용하기

header 렌더링할 공간 만들기
<div id="header"></div>
const headerContainer = document.getElementById('header')

 

header 렌더링하는 함수 정의하기
const renderHeader = (data) => {
  const headerContent = document.createElement('div');
  headerContent.innerHTML = data;

  headerContainer.appendChild(headerContent);
}

 

 

header 를 가져와서 렌더링하기
const renderPage = () => {
  fetch('https://example.com/api/header')
    .then((response) => response.text())
    .then((data) => {
      renderHeader(data);
    })
    .catch((error) => {
      console.error(error);
    });
};

window.addEventListener('load', renderPage);

 

fetch API 의 단점

fetch API 를 사용하는 방법에는 성능문제, SEO 문제, 유지보수의 어려움 등의 문제가 있다.

 

성능

api 를 사용하여 동적으로 html 을 로드하기 때문에 네트워크 요청에 따른 지연이 발생할 수 있다.
이로 인해 페이지의 로딩이 느려질 수 있다. 또한 api 의 호출이 많아질수록 성능 문제는 더욱 심각해질 것이다.

 

SEO

검색 엔진 크롤러에게 초기에는 보이지 않을 수 있다. 이는 검색 엔진 최적화 (SEO)에 부정적인 영향을 줄 수 있으며, 웹 페이지의 검색 노출에 문제가 생길 수 있다.

 

📌 마치며

리액트의 컴포넌트에 익숙해져 바닐라 자바스크립트에서는 재사용을 어떻게 하는지 궁금했는데, 부트캠프에서는 알려주지 않았던 개념을 새로 알게되어 매우 유익한 포스팅이었다.

원티드 프리온보딩 강의 Q&A 에도 간단하게 질문해봤다. 멘토님께서는 바닐라 자바스크립트를 현업에서 많이 사용하고 있으며,  header 나 footer 와 같은 공통적인 요소는 `컴포넌트` 사용한다고 답변해주셨다.

다음 포스팅에서는 웹 컴포넌트를 사용하여 엉망인 바닐라 자바스크립트 프로젝트를 리팩토링하는 글을 업로드할 계획이다.

참고 : MDN ― 웹 컴포넌트

728x90
반응형
저작자표시 비영리 변경금지

'Core > JavaScript' 카테고리의 다른 글

[Javascript] confirm 후 clipboard api 사용 시 DOMException Error 발생하는 문제점  (18) 2023.12.19
[JavaScript] 이벤트와 이벤트 핸들러, 이벤트 객체 event(e)  (53) 2023.12.07
[JavaScript/React] 영역 외 클릭 감지로 모달/프로필 박스 닫기 기능 구현  (54) 2023.12.07
[JavaScript/React] 현재 URL 복사하기 & window.location 객체  (42) 2023.12.04
[JavaScript] 클래스와 접근자 프로퍼티(getter함수, setter함수)  (0) 2023.02.21
'Core/JavaScript' Related Articles more