컴포넌트
Written by niee on
Angular2 스터디 발표 자료
1. 웹 컴포넌트
- 웹 컴포넌트는 HTML과 CSS, 자바스크립트를 하나의 단위로 묶어주는 기술.
- HTML, 템플릿 호출, 쉐도우 DOM, 커스텀 엘리먼트의 구성으로 이루어짐.
2. HTML 템플릿
- 컴포넌트의 UI를 표현하는 영역.
- 웹페이지의 일부분으로 동작하며, 재사용 가능함.
3. 템플릿 호출
- 템플릿은 문서 상단에 링크 엘리먼트를 이용해 호출.
- 템플릿 사용은, 스크립트 엘리먼트 안에서 템플릿 내용을 불러오고 쿼리 선택자를 이용하여 선택한 템플릿 노드를 현재 문서의 DOM 노드 밑으로 붙인다.
<head>
<link rel="import" href="template.html">
<link rel="import" href="template2.html">
.........
</head>
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
var el = content.querySelector('#template');
document.body.appendChild(el.cloneNode(true));
</script>
4. 쉐도우 DOM
- P.81 참조
5. 커스텀 엘리먼트
- 엘리먼트 이름을 임의로 정의해서 만든 엘리먼트 이다.
- 기능과 모양이 합쳐진 화면 구성요소 이다.
- P.82 참조
6. 중첩 컴포넌트
- 컴포넌트는 그 자체로 하나의 독립적인 프로그램.
- 부모 컴포넌트가 여러 자식 컴포넌트를 포함할 때 부모 컴포넌트를 중첩 컴포넌트라 함.
- P.86 참조
7. 컴포넌트 트리
- 컴포넌트 내부에 자식 컴포넌트를 포함하다 보면 컴포넌트 트리의 계층 구조가 만들어짐
- P.86 참조
8. 컴포넌트 기반 개발
- 컴포넌트는 명세에 따른 배포, 조립 가능한 독립 구성 단위여야 한다.
@Component({
//컴포넌트 메타데이터 설정
})
export class HelloComponent{
//컴포넌트 로직 작성
}
Explore more like this
지시자 (Directive)
Angular2 스터디 발표 자료 지시자는 템플릿내에서 사용되는 구성요소의 모양이나 구조를 결정, 컴포넌트 지시자, 구조 지시자, 속성 지시자, 커스텀 지시자가 있음. - 선언형 프로그래밍과 지시자 - 커스텀 지시자
자식 엘리먼트의 호출과 탐색
Angular2 스터디 발표 자료 자식 엘리먼트의 호출과 탐색 방법 - @ViewChild 장식자를 이용 - @ViewChildren 장식자를 이용 - @ContentChild 장식자를 이용 - @ContentChildren 장식자를 이용
Comments