컴포넌트 - Study - angular2 - WEB DEV NIEE

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용할 수 있습니다.

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{
  //컴포넌트 로직 작성
}