@component란 - @componentlan

오늘의 모르는 IT 개념(용어) 정리

컴포넌트란?

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

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

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

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

웹 컴포넌트의 규격

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

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

폴리머

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

컴포넌트 개념의 유래

많은 하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어진다. 이 제품들은 회사 상관없이 서로 조합하여 하나의 제품으로 만들어진다. 이러한 제품들의 부품은 문제가 발생했을 때 해당 부품만 다른 부품으로 바꿔도 제품은 문제없이 작동한다. 컴퓨터와 스마트폰과 같은 제품들을 상상해보면 금방 이해가 갈 것이다.

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

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

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

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

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

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

1. 컴포넌트는 독립적인 소프트웨어 모듈이다.
   컴포넌트를 한마디로 표현하자면 소프트웨어 시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 ‘모듈’로서 이후 시스템을 유지보수 하는데 있어 교체 가능한 부품이다.
2. 컴포넌트는 구현, 명세화, 패키지화, 그리고 배포 될 수 있어야한다.
   컴포넌트의 정의나 형태는 관점에 따라 다양하게 존재하지만 재사용 부품으로서의 컴포넌트가 되기 위해서는 아래의 내용을 만족해야한다.
   1.  소스코드(soure code)가 아닌 실행코드(execute code) 기반으로 재사용할 수 있도록 이미 구현(implemetntation)이 완료되어 있어야만 한다.
   2. 컴포넌트는 해당 컴포넌트의 용도, 유형, 기술표준과 인터페이스등에 대한 정보들에 대해서 명세화(specification)되어 있어야만 한다.
   3. 교체가능한 컴포넌트를 개발하기 위해서는 표준(standard)을 준수하여 개발해야한다.
   4. 컴포넌트가 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화(packaing)되어 있어야만 한다.
   5. 컴포넌트는 독립적인 업무단위로 개발된 것이므로 사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용할 수 있도록 독립적으로 배포(deployment) 가능해야만 한다.
3. 하나의 컴포넌트는 하나 이상의 클래스로 구성될 수 있다.
   컴포넌트와 클래스는 다른 개념이며, 컴포넌트와 객체 또한 다른 개념이므로 컴포넌트가 되기 위해서는 반드시 클래스나 객체로 만들어야 한다는 것은 아니다. 기존의 C나 Cobol로 개발된 모듈 또한 컴포넌트로 만들 수 있으나 현재의 컴포넌트 기술 표준들과 핵심개념들이 객체지향에서 비롯된 개념들이 많아 컴포넌트를 개발하는데 있어 객체지향 기술을 바탕으로 하는 것이 보다효과적을 수 있다. 하나의 컴포넌트를 개발하기 위해서는 하나 이상의 클래스들을 바탕으로 개발할 수 있으며 이렇게 개발된 컴포넌트가 실행될 때 해당 컴포넌트 인스턴스(Instance)인 컴포넌트 객체가 수행된다. 이때 컴포넌트 내부에는 하나 이상의 클래스에 대응하는 하나 이상의 객체들이 수행되고 있는 것이라고 생각할 수 있다.
4. 컴포넌트는 인터페이스를 통해서만 접근할 수 있다.
   컴포넌트내의 정보는 외보로부터 모두 숨겨진다. (은닉)
   따라서 외부에서 접근할 수 있도록 컴포넌트가 제공하는 서비스를 정의한 인터페이스만을 제공하고 컴포넌트를 사용하기 위해서는 어떤 인터페이스를 사용해야 하는지만을 알 수 있다.
   따라서 인터페이스 외부와의 연결을 위해 반드시 존재해야만하며, 이처럼 컴포넌트가 내부 정보를 숨기고 인터페이스만 제공함으로써 소프트웨어도 하드웨어처럼 조립 기반으로 갈 수 있게 되는 것이다.

컴포넌트란?

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

컴포넌트의 종류 (jQuery Component)

링크 : jQuery Mobile Demos

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

참조 : [Web] 웹 컴포넌트란

참조 : 컴포넌트(Component)란?

참조 : 컴포넌트 정의 – 컴포넌트란 무엇인가?

참조 : 컴포넌트(Component) – 생활코딩