[Web] Component

Component

프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

그림에서 확인 할 수 있듯이 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌들을 조합하여 화면을 구성할 수 있다.

웹 컴포넌트는 이러한 컴포넌트 기반 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새로 정한 규격이다. 웹 표준을 기반으로 구축되었으며, 최신 부라우저 및 모든 JavaScript 라이브러리, 프레임워크에서도 사용할 수 있다.

따라서 웹 컴포넌트를 이용하여 코드를 작성하면 Vue.js 나 React.js 와 같은 라이브러리, 프레임워크에 의존하지 않고 상호 운용이 가능하게끔 작성할 수 있다.

 

웹 컴포넌트의 규격

웹 컴포넌트는 웹 페이지 혹은 웹 앱에서 커스텀화 / 재사용화 / 캡슐화된 HTML 태그를 만들 수 있는 웹 플랫폼 APIs의 집합입니다.

 

1. Custom Elememts : HTML에 새로운 HTML/DOM 요소를 정의할 수 있는 JavaScript API입니다.

2. Shadow DOM : DOM과 스타일을 캡슐화하여 메인으로부터 독립적으로 스크립트와 스타일을 처리할 수 있도록 합니다.

3. ES Modules : 이전 규격이었던 HTML Import를 대체하여 나온 규격이며, 자바스크립트로 구현하는 모듈 시스템입니다.

4. HTML Templates : 서가 처음 로드될 때는 비활성화된 상태이지만, JavaScript를 사용하는 런타임에 나타나는 HTML 조각입니다.

폴리머

대표적인 웹 컴포넌트 라이브러리 중 하나로, 구글에서 제공한다. 폴러머를 이용하면 재사용 가능한 웹 컴포넌트 생성이 가능합니다.

---

컴포넌트 개념의 유래

소프트웨어는 독립적으로 개발되지 않은 경우가 많을 뿐더러 독립적으로 개발되었다해도 다른 모듈과의 호환을 생각하지 않고 개발하면 이는 결국 소프트웨어의 재사용을 어렵게 하고 유지보수 비용이 크게 증가하는 원인이 된다. 이러한 상황에서 소프트웨어의 재사용의 중요성과 필요성을 위해 나온 기술이 컴포넌트 기술이다.

컴포넌트는 독립적인 단위 모듈이다.

하드웨어처럼 독립적인 기능을 수행하고 추후에 교환될 수 있도록 해야한다.  또한 컴포턴트의 세부사항은 겉으로 드러나선 안되는 것이며, 일부러 끄집어 내려는 시도조차하지 말아야한다. 필요한 것은 단지 해당 컴포넌트를 쓰기 위해 제공해주는 일종의 ‘장치’가 필요하다. 예를들어 스마트폰의 베터리 수명이 다했을 경우 베터리를 새로 구입하여  스마트폰에서 베터리만 교체했을 것이다. 이때 스마트폰 단자와 베터리 단자가 맞물려야 제 기능을 발휘하는데 이때 베터리 단자가 앞서 말했던 일종의 ‘장치’가 된다.

컴포넌트 개념을 객체지향 언어에 대입

스마트폰과 베터리가 각각 독립적으로 문제없이 돌아간다고 가정할때 상호간의 단자만 규격에 맞을 시 어떠한 베터리를 교환하더라도 스마트폰은 정상 작동할 것이다. 이와 같이 소프트웨어에서도 단자와 같은 일종의 장치가 필요하다. 객체지향 언어에서는 이러한 장치를 인터페이스(Interface)로 제공해준다. 인터페이스는 사용자에게 해당 소프트웨어를 쓰기위한 메소드(=장치)를 공개하고, 규격화된 메소드 환경에서 소프트웨어를 개발할 수 있는 환경을 제공해준다. 이렇게 함으로써 객체지향 개념은 정보은닉개념을 수행할 수 있을 뿐더러 각각 독립된 모듈로 소프트웨어를 만들 수 있도록 크게 이바지 할 수 있다.

결론적으로 컴포넌트는 각각 독립된 모듈을 뜻하며, 이는 흔히 JAVA같은 oop 언어등의 class등의 개념과는 다르다. 하나의 컴포넌트는 하나의 클래스로만 작성될 수도 있지만, 여러개의 클래스로도 작성될 수 있기 때문이다. 컴포넌트 개념을 잘 적용한 소프트웨어란 부품(인터페이스를 구현받는 클래스)만 바꾸어주었을 시 오류없이 잘 작동되는 것을 의미한다.