▶ AngularJS 2.0 :: 처음부터 시작하기 :: 1. 전체적인 구조 및 개념

▶ AngularJS 2.0 :: 처음부터 시작하기 :: 1. 전체적인 구조 및 개념

---

이 글에서는 AngularJS 2.0에 대한 개념에 대하여, 부족하지만 하나하나 세부적으로 살펴보려고한다. 이 글은 다음과 같이 구성되어 있다.

 AngularJS 2.0 전체적인 기술 개념

1. AngularJS란 무엇인가

2. 왜 AngularJS 인가

3. 왜 AngularJS 2 인가

4. AngularJS 2의 구조

4-2. (1) Component의 사전적 정의

4-2. (2) Angular JS 에서의 Component란?

1. AngularJS란 무엇인가

---

서점에 책도 깔리고, 여기저기서 AngularJS 개발자를 찾는다. 도대체 AngularJS가 뭘까.

- 기본적으로   AngularJS 2 는 자바스크립트 Framework 다.

-  Client Side Application 을 빌드하는데 사용한다.

-  HTML ,  CSS , 그리고  JavaScript 를 사용한다.

Framework의 개념

소프트웨어 Application이나 솔루션의 개발을 수월하게 하기 위해 소프트웨어의 구체적 기능들에 해당하는 부분의 설계와 구현을 재사용 가능하도록 협업화 된 형태로 제공하는 소프트웨어 환경을 말한다.^[각주:1]

2. 왜 AngularJS인가? - AngularJS를 사용하면 어떤 점이 좋은가?

---

이 부분은 개인적으로도 내용을 정리하기 이전부터 궁금했던 부분이다. 굉장히 빠르게 변화하는 기술 트렌드 속에서, "어떤 Framework 를 학습해야하는가?"라는 질문은, 아마 이 글을 보고 있는 사람이라면 한번 쯤 해봤을 것이라 생각한다. 우선 이 글은 AngularJS 2.0에 대한 내용이지만, 그전에 AngularJS1,2에 공통적으로 해당되는 부분들을 간단히 짚고 넘어갈 필요가있다.

왜 AngularJS인가?

- Expressive HTML : For eg:- ngIF, ngFor 등

- 강력한 데이터 바인딩(Data Binding)

- Support Modular By Design

- 백엔드(Back-end) 통합 서비스 내장

3. 왜 AngularJS 2 인가 - angularJS1도 모르는데(?)

---

안그래도 복잡해보이는데, 굳이 AngularJS2.0을 "이전과 다른 또다른 것'으로 규정하는데에도 이유가 있다. 우리는 거두절미하고 "왜 AngularJS 2여야 하는가?" 에 대한 궁금증에 대한 물음을 다음과 같이 정리 해볼 수 있다.

＿＿＿＿＿

왜 AngularJS2 인가?

- 빠른 구축이 가능하다.

- 새로운 기능들을 사용할 수 있다.(using new features - classes, object)

- 간결해진 API

- 개선된 생산성

새로운 기능이라고 말하는  classed ,  object 에 대해서 궁금하다면, 아래의 사이트에서 살펴볼 수 있다.

- [MDN Mozilla Devleoper Network - Classes]

4. AngualrJS 2의 구조

---

AngularJS 2가 말하는 Application 은, 쉽게 말해서 컴포넌트(Component)의 결합과 결합과 결합으로 이루어진다.

＿＿＿＿＿

4-1 AngularJS 2 기본 구조 살펴보기

[ structure of angularJS 2 image ]

위 사진과 같이 AngualrJS 2의 Application 을 이루는 것은 각  컴포넌트(Component) 다. 이 컴포넌트들이 기능과 목적에 맞게 하나씩 작성되고, 결합될 수 있으며, 컴포넌트 단위로 Customising 을 하거나 별도의 기능을 넣고 빼며 테스트할 수 있다.

＿＿＿＿＿

4-2 Component 란?

앞의 설명에서 확실히 이해하지 못했더라도 아마 '컴포넌트... 컴포넌트'라며 반복해서 이야기하고 있는 것을 보면 '아마 이게 중요한 개념인가보다' 싶을 것이다. AngularJS에서  Component  라는 개념은 1, 2를 가리지않고 등장하는 개념이다. 처음 개념을 접했거나, 확실히 기억나지 않는다면  여기서  이  Component  라는 개념을 확실하게 짚고 넘어갈 필요가 있다.

4-2 Component INDEX

4-2. (1)  Component 사전적 정의

4-2. (2)  AngularJS 에서의 Component 란?

4-2. (3)  Component를 직접 만들어보자

4-2. (4)  Metadata와 Decorator의 정의

4-2. (5)  우리가 필요한 것들을 import 하기

4-2. (6)  우리의 App Component를 Bootstrapping하기

＿＿

4-2. (1) Component의 사전적 정의

여러 기술들을 새롭게 배우다보면, '어디서 한번 들어본 것 같은' 느낌의 용어들을 마주칠 때가 있는데, 개인적으로 이 Component 가 그런 경우였다. 처음 들어본 개념이었다면 아마 긴장감을 갖고 깊게 살펴봤을 텐데, 이 Component 는 왠지 그동안 얕은 공부를 하며 몇 번 들어본 것 같기도해서 대충대충 skip하는 그런 느낌의 개념이었다. 결론적으로, 이렇게 하다간 낭패본다.

Component라는 용어의 사전적 정의를 살펴보면, '구성요소, 부품' 이라는 뜻으로 정의되어있다.

즉, Component 란 뭔가를 구성하는 요소 - 나아가 부품같은 존재라는 것이다. (억지스럽지만) 앞에서 살펴본 "컴포넌트+컴포넌트+컴포넌트+... = 애플리케이션" 이라는 설명에도 잘 들어 맞는다.

＿＿

4-2. (2) AngularJS 에서 Component 란?

[ angularJS 2 Component image ] 

 Component 는  Template  +  Class (Properties와 Method를 포함할 수 있음)  +  Metadata  로 이루어 진다. 조금 더 쪼개어 살펴보면 다음과 같다.

*Component 개념에 대해 쪼개보면서, 별로 친하지않았던 개념들에 대해서도 함께 체크해가며 정리했다. 

내용이 조금 길어지고, 추가 설명이 있을 수 있다.

•  Template *
  

• View layout

• HTML의 형태로 작성된다.

• 바인딩(Binding)과   지시자(Directive) * 를 포함한다. 
  
  
  
  

•  Class 

•  Properties 와  Method 를 포함할 수 있다.

•  Properties  : data

•  Method  : logic

• Code supporting the view

• 타입스크립트(TypeScript) 형태로 작성된다.
  
  
  
  
  

•  Metadata 

• Angular에 대한 추가 데이터

•  Decorator 로 정의한다.

*  템플릿(Template) 은 앵귤러 프레임워크가 HTML을 템플릿으로 간주하여 1차적으로 앵귤러 구문을 해석하고

 데이터를 바인딩하는 템플릿 해석기 역할을 한다.

**  지시자(Directive) 는 HTML을 확장하는 앵귤러만의 가장 특별한 기능으로 HTML 태그로서 뷰를 확장할 수 있고,

 그 안에 상태와 액션을 담아 컴포넌트화 할 수 있으므로 화면 개발의 생산성을 높여준다.

참고자료 : 윤영식, 『실전 프로젝트로 배우는 AngularJS - SPA 아키텍처 기반 구축하기』,위키북스, 2015, p.45

여기까지 AngularJS 2의 기본개념과  Component 에 대한 구조까지 정리해봤다. 다음 글에서는 이  Component 를 "실제로 어떻게 작성하고, 활용하는 지"에 대해서 정리해보려고 한다.

+글에 부족한 부분이나, 잘못된 부분이 있다면 댓글로 도움 주시면 감사하겠습니다.

​

1. 두산백과, '프레임워크', http://terms.naver.com/entry.nhn?docId=2837536&cid=40942&categoryId=32837, 확인일:2016년 07월 16일 [본문으로]