웹 컴포넌트
1. 정의
- HTML, CSS, 자바스크립트를 하나의 단위로 묶어 주는 기술
- 위의 여러 기술을 합해져 하나의 웹 컴포넌트를 구성한다
- 웹 컴포넌트를 이용하려면 보완 라이브러리를 이용해야 한다(웹컴포넌트js,폴리머)
1) 기술 요소
- HTML 템플릿
- 템플릿 호출
- 쉐도우 DOM
- 커스텀 엘리먼트
2. HTML 템플릿
- 컴포넌트의 UI를 표현하는 영역
- 웹 페이지의 일부분으로 동작, 재사용이 가능하다
3. 템플릿 호출
- 정의한 템플릿을 외부에서 호출한다
- 문서 상단에 링크 엘리먼트를 이용해 호출한다
1) 템플릿 실제 사용
- 스크립트 엘리먼트 안에 template.html 내용을 불러와 쿼리 선택자를 이용해 템플릿 노드를 현재 문서 DOM노드 밑으로 붙임
4. 쉐도우 DOM
- DOM에 엘리먼트에 대한 정의나 스타일과 같은 각종 정보가 저장된다
- 웹 페이지는 기본적으로 DOM을 가진다
A. 문서 DOM
- 현재 페이지에 대한 DOM
B. 쉐도우 DOM
- 웹 페이지가 실행되는 도중 가상으로 생성되는 DOM
- 문서 DOM 외부에 존재하기 때문에 문서 DOM에 정의한 스타일이나 이벤트가 적용되지 않고 캡슐화 된다
1) 쉐도우 DOM 호출
- 쉐도우 DOM은 쉐도우 경계가 있으며 쉐도우 호스트를 통해 호출된다.
- 현재 문서에 쉐도우 DOM을 포함할 때는 쉐도우 루트를 호출함
5. 커스텀 엘리먼트
- 이름을 임의로 정의해서 만든 엘리먼트
- 커스텀 엘리먼트는 빈 엘리먼트가 아닌 기능과 모양이 합쳐진 화면 구성 요소이다
'Front-End > AngularJs2' 카테고리의 다른 글
| [Angularjs2] 앵귤러2 컴포넌트 사이 값 전달(@Input 장식자, inputs속성) (0) | 2017.09.10 |
|---|---|
| [Angularjs2] AngularJs2 컴포넌트 구조 (0) | 2017.03.05 |
| [AngularJs2] AngularJs2 ng 명령어 활용 (0) | 2017.03.05 |
| [AngularJs2] Angular CLI 설치 및 프로젝트 만들기 (0) | 2017.03.05 |
| [AngularJs2] AngularJs2 설치 (0) | 2017.02.16 |
리딩리드