컴포넌트란?(Component)

컴포넌트란?

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

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

웹 컴포넌트는 이러한 컴포넌트 기반 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새로 정한 규격이다.

웹 표준을 기반으로 구축되었으며, 최신 부라우저 및 모든 JavaScript 라이브러리, 프레임워크에서도 사용할 수 있다.

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

(유저가 사용하는 시스템에 대한 조작장치를 말한다. 통상 컨트롤(Control)이라고도 하고 UI 라고도 한다.)

웹 컴포넌트의 규격

• Shadow DOM : DOM과 스타일을 캡슐화하여 메인으로부터 독립적으로 스크립트와 스타일을 처리할 수 있도록 한다.
• Custom Elememts : HTML에 새로운 HTML/DOM 요소를 정의할 수 있는 JavaScript API.
• ES Modules : 이전 규격이었던 HTML Import를 대체하여 나온 규격이며, 자바스크립트로 구현하는 모듈 시스템.

위의 4가지 규격을 함께 사용하는 것이 가장 이상적이지만, 사용하고 싶은 부분만 선택적으로 사용하는 것도 가능하다.

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

스마트폰과 베터리가 각각 독립적으로 문제없이 돌아간다고 가정할때 상호간의 단자만 규격에 맞을 시 어떠한 베터리를 교환하더라도 스마트폰은 정상 작동할 것이다. 이와 같이 소프트웨어에서도 단자와 같은 일종의 장치가 필요하다.

객체지향 언어에서는 이러한 장치를 인터페이스(Interface)로 제공해준다.

인터페이스는 사용자에게 해당 소프트웨어를 쓰기위한 메소드(=장치)를 공개하고, 규격화된 메소드 환경에서 소프트웨어를 개발할 수 있는 환경을 제공해준다. 

이렇게 함으로써 객체지향 개념은 정보은닉개념을 수행할 수 있을 뿐더러 각각 독립된 모듈로 소프트웨어를 만들 수 있도록 크게 이바지 할 수 있다.

결론적으로 컴포넌트는 각각 독립된 모듈을 뜻하며, 이는 흔히 JAVA같은 oop 언어등의 class등의 개념과는 다르다. 하나의 컴포넌트는 하나의 클래스로만 작성될 수도 있지만, 여러개의 클래스로도 작성될 수 있기 때문이다.

컴포넌트 개념을 잘 적용한 소프트웨어란 부품(인터페이스를 구현받는 클래스)만 바꾸어주었을 시 오류없이 잘 작동되는 것을 의미한다.

 

컴포넌트는 구현, 명세화, 패키지화, 그리고 배포 될 수 있어야한다.

컴포넌트의 정의나 형태는 관점에 따라 다양하게 존재하지만 재사용 부품으로서의 컴포넌트가 되기 위해서는 아래의 내용을 만족해야한다.

1.  소스코드(soure code)가 아닌 실행코드(execute code) 기반으로 재사용할 수 있도록 이미 구현(implemetntation)이 완료되어 있어야만 한다.
2. 컴포넌트는 해당 컴포넌트의 용도, 유형, 기술표준과 인터페이스등에 대한 정보들에 대해서 명세화(specification)되어 있어야만 한다.
3. 교체가능한 컴포넌트를 개발하기 위해서는 표준(standard)을 준수하여 개발해야한다.
4. 컴포넌트가 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화(packaing)되어 있어야만 한다.
5. 컴포넌트는 독립적인 업무단위로 개발된 것이므로 사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용할 수 있도록 독립적으로 배포(deployment) 가능해야만 한다.

컴포넌트의 종류 (jQuery Component)

• page : 모든 구성요소를 포함하는 가장 큰 단위로 single template와 multi-page template 이 있다.
• dialog : 대화상자
• header bar : 상단에 위치하면서 제목을 표시하고 페이지 이동과 관련된 버튼이 위치한다.
• footer bar : 페이지 하단에 위치하면서 버튼이 위치한다.
• navbars : 일반적으로 header bar 나 footer bar 내에 위치하면서 특정한 페이지로 이동하는 메뉴의 역할
• button : 버튼
• form : 사용자로부터 데이터를 입력받는 컨트롤
• list view : 여러개의 항목을 열거하는데 사용되는 컨트롤

1. 링크 : jQuery Mobile Demos