인터넷의 발전과 함께 웹 개발도 꾸준한 진화를 거듭하고 있습니다. 이러한 진화 과정에서 컴포넌트 기반 아키텍처가 등장하면서 웹 개발의 패러다임이 크게 변화했습니다. 오늘은 이러한 변화를 이끈 주요 기술 중 하나인 '웹 컴포넌트'에 대해 알아보겠습니다. 웹 컴포넌트는 프레임워크와 독립적으로 웹 애플리케이션을 구축하고 관리하는 새로운 방식을 제시하고 있습니다.
1. 컴포넌트 기반 웹 개발의 필요성
과거의 웹 개발은 각 페이지 또는 기능을 개발할 때마다 중복된 코드를 작성하는 번거로움이 있었습니다. 또한 복잡한 웹 애플리케이션을 관리하기 어려웠으며, 유지보수에도 어려움을 겪었습니다. 이러한 문제를 해결하기 위해 컴포넌트 기반 아키텍처가 등장하였습니다.
컴포넌트 기반 아키텍처는 다음과 같은 핵심 원칙을 갖고 있습니다.
모듈성: 소프트웨어는 독립적인 컴포넌트로 나누어져야 하며, 각 컴포넌트는 특정한 기능 또는 화면 요소를 담당합니다.
재사용성: 컴포넌트는 다른 애플리케이션에서 재사용될 수 있어야 하며, 이는 개발 생산성을 높입니다.
독립성: 각 컴포넌트는 독립적으로 작동해야 하며, 다른 컴포넌트와의 의존성을 최소화해야 합니다.
2. 리액트와 뷰: 컴포넌트 기반 프레임워크
리액트와 뷰는 컴포넌트 기반 웹 개발을 쉽게 구현할 수 있도록 도와주는 프레임워크입니다. 이 두 프레임워크는 컴포넌트를 만들고 관리하는데 필요한 다양한 도구와 기능을 제공합니다. 하지만 이런 프레임워크들도 결국은 JavaScript로 웹을 만드는 방법 중 하나일 뿐입니다.
3. 웹 컴포넌트: 웹 개발의 새로운 패러다임
리액트와 뷰와는 별개로, 웹 컴포넌트는 웹 표준의 일부로서 모든 브라우저에서 지원되는 기술입니다. 이를 통해 우리는 웹 개발을 더욱 모듈화하고 재사용 가능한 컴포넌트로 구축할 수 있습니다.
4. 웹 컴포넌트 API
웹 컴포넌트 API는 바닐라 자바스크립트로 웹 컴포넌트를 만들 수 있게 해줍니다. 이 API는 다음과 같은 주요 기능을 제공합니다.
Custom elements 생성: HTML 태그를 확장하여 커스텀 엘리먼트를 생성합니다.
Shadow DOM: 스타일과 마크업을 캡슐화하여 컴포넌트를 격리시킵니다.
HTML templates와 Slot: 컴포넌트의 구조를 정의하고 재사용 가능한 템플릿을 생성합니다.
라이프사이클 관리: 컴포넌트의 생성, 업데이트, 파괴와 같은 라이프사이클을 관리합니다.
웹 컴포넌트 API를 사용하면 HTML 태그와 유사한 방식으로 웹 컴포넌트를 만들고 사용할 수 있습니다. 이를 통해 코드의 가독성을 높이고, 재사용 가능한 컴포넌트를 쉽게 작성할 수 있습니다.
Custom elements 생성
Shadow DOM 등록을 통한 캡슐화
HTML templates와 Slot을 통한 컴포넌트 재사용
라이프사이클
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Component Example</title>
</head>
<body>
<!-- 웹 컴포넌트 사용 예시 -->
<my-web-component>
<span>This is a slotted content!</span>
</my-web-component>
<script>
class MyWebComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
// Define the template
const template = document.createElement('template');
template.innerHTML = `
<style>
p {
color: blue;
font-size: 20px;
}
slot::slotted(span) {
font-weight: bold;
}
</style>
<p>Hello from My Web Component! <slot></slot></p>
`;
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
// Register the web component
customElements.define('my-web-component', MyWebComponent);
</script>
</body>
</html>먼저 HTML에서 사용될 웹 컴포넌트 이름을 정의한다. 이때 컴포넌트 이름에는 반드시 ‘-’ 가 포함되어야 한다. 그리고 HTMLElement 클래스를 확장하여 웹 컴포넌트의 기능을 정의한 후에 customElements.define() API를 사용하여 웹 컴포넌트를 정의하고 브라우저에 등록한다.
커스텀 컴포넌트를 shadow DOM으로 등록한다는 것은 캡슐화하는 것을 의미한다. 커스텀 컴포넌트로 사용할 클래스를 정의할 때 생성자 안에서 attachShadow() API를 호출하면, 해당 커스텀 컴포넌트는 shadow DOM이 된다. 캡슐화의 가장 직관적인 장점은 내부에서 선언한 style이 격리된다는 점이다. 뷰에서 style 태그의 scoped 속성으로 style을 격리하는 것과 유사하다.
HTML templates와 slot을 사용하는 방식 역시 뷰를 사용해 본 사람이라면 비슷하다고 느낄 것이다. 커스텀 컴포넌트로 감싼 내부에 내용을 적으면, 그 내용은 커스텀 컴포넌트 클래스에서 선언한 템플릿 안에서 렌더된다.
또한 웹 컴포넌트 API에는 생명주기 콜백도 존재한다. 웹의 중요한 부분이 렌더링 성능인 만큼, 생명주기를 관리할 수 있는 것은 매우 유용하다.
connectedCallback : 커스텀 컴포넌트가 DOM에 추가될 때 호출
disconnectedCallback : 커스텀 컴포넌트가 DOM에서 해제될 때 호출
adoptedCallback : 커스텀 컴포넌트가 새로운 DOM으로 이동할 때 호출
attributeChangedCallback : 커스텀 컴포넌트 속성에 변경이 생겼을 때 호출
5. 뷰, 리액트와의 차이점
뷰와 리액트는 웹 컴포넌트와 비슷한 개념을 가지고 있지만, 더 많은 기능과 최적화를 제공합니다. 이들 프레임워크는 가상 DOM을 통해 빠른 렌더링을 지원하고, 상태 관리를 위한 도구를 제공하여 복잡한 애플리케이션을 개발하기 용이합니다. 또한 커뮤니티와 에코시스템이 크기 때문에 다양한 리소스와 지원을 받을 수 있습니다.
6. 웹 컴포넌트의 장점
웹 컴포넌트를 사용하면 다음과 같은 이점을 얻을 수 있습니다.
플랫폼 독립성: 웹 컴포넌트는 모든 브라우저에서 지원되므로 플랫폼에 독립적으로 개발할 수 있습니다.
컴포넌트의 재사용성: 웹 컴포넌트는 다른 프로젝트에서도 쉽게 재사용할 수 있습니다.
설정 가능한 캡슐화: Shadow DOM을 사용하여 스타일과 마크업을 격리시킬 수 있어, 컴포넌트의 캡슐화가 용이합니다.
7. 결론
웹 개발의 패러다임은 계속해서 변화하고 있으며, 웹 컴포넌트는 이러한 변화의 중요한 부분 중 하나입니다. 프레임워크와 독립적으로 웹 애플리케이션을 개발하고 관리하는 데 웹 컴포넌트를 활용함으로써 더욱 모듈화된 코드를 작성하고, 웹 애플리케이션의 성능과 유지보수성을 향상시킬 수 있습니다. 따라서 웹 개발자로서 웹 컴포넌트를 공부하고 적용하는 것은 중요한 미래 지향적인 스킬 중 하나입니다.
'SW Dev Portfolio' 카테고리의 다른 글
| Jotai 전역 변수 관리 라이브러리 (0) | 2023.09.21 |
|---|---|
| 지도 웹앱 개발 좌표계 [최근접 이웃 알고리즘] (0) | 2023.09.19 |
| 네이버 오픈 API 사용 하는 방법 : 검색 기능 편 (0) | 2023.09.08 |
| ‘애자일’ 잘 하는 방법(EoA) (0) | 2023.09.04 |
| HEROKU 배포 하는 방법 (0) | 2023.08.15 |
| XSS 해킹을 막기 위한 나의 노력 및 해결 방법 (0) | 2023.08.09 |
