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