00. Angular의 개념/구조

00-1. Angular란?

무엇이냐고 묻는다면 '구글에서 개발한 SPA 프레임워크다' 라고 할 수 있다.

여기서 SPA는 Single Page Application의 약자로서 하나의 웹 페이지가 실행할 때 View 단에 해당하는 부분이 페이지의 주소가 바뀌지 않으면서 또 다른 새로운 view를 동적으로 로드하여 사용하는 것을 SPA라고 한다.
view는 클라이언트 측 기술인 html/css/javascript들을 모아둔 컨테이너를 의미한다.

직관적인 설명을 위해 예를 들자면 facebook처럼 계속해서 스크롤을 내려도 view단이 새로고침이 되서 정보를 불러오는 형식이 아닌 추가되는 것이다. 다만 facebook은 react를 사용한다.

---

00-2. Angular의 구조

수식으로 표현하자면 아래와 같다.
WEBPAGE = Component + Component + Components

문장으로 얘기하자면 Component들의 집합으로 WEB Application을 구성하는 것이다.

그럼 도대체 여기서 이야기하는 Component는 무엇인가?

Component=Template + Class(Properties+Method) + Metadata 이다.

앞으로 자주 만나게 될 용어이면서 Angular의 핵심이다.

웹을 공부하다보면 필연적으로 많이 듣게 되는 컴포넌트, 템플릿, 프로퍼티, 메타데이터 등등.. 하나씩 정의부터 차근차근 알아보자.

---

Template

• HTML로 작성된 View layout

• 추가적으로 바인딩(binding)과 지시자(directive)를 포함한다.
  
  

여기서 바인딩(binding)이란 '화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것'이라 하겠다.

내가 해석하기에는 어떤 데이터가 변경이 될 경우 변경된 데이터를 뷰에다가 변경사항을 적용해야하는데 뷰에 적용하기 직전에 일어나는 것이 바인딩이 아닐까 한다.

+나중에 공부하다가 알았는데 이런 방식으로 즉시 뷰업데이트가 일어나는 것을 양방향 데이터바인딩이라고 한다.

여기서 지시자(directive)란 HTML을 확장하는 앵귤러만의 가장 특별한 기능으로 HTML 태그로서 뷰를 확장할 수 있고, 그 안에 상태와 액션을 담아 컴포넌트화 할 수 있게하는 것 정도로 생각하면 된다.

+예전에 VueJS를 잠깐이나마 공부할 때 v-if 나 이런 태그를 말하는 것 같다. vue에서도 그런 것들을 지시자라 했었던 것 같다.

---

Class

• Properties : data
• Method : Function
  
  
  프로퍼티는 어떤 데이터 즉 변수들을 의미하는 것 같고 메소드는 함수를 의미하는 것 같다.
  우리(나처럼 평범한 학부생ㅎ)가 일반적으로 알고 있는 클래스라고 생각하면 될 것 같다.

---

Metadata

Metadata란 데이터(data)에 대한 데이터이다. 이렇게 흔히들 간단히 정의하지만 엄격하게는, Karen Coyle에 의하면 "어떤 목적을 가지고 만들어진 데이터 (Constructed data with a purpose)"라고도 정의한다 -출처 위키백과-

• Angular에서 굳이 표현하자면 추가 데이터
• Decorator로 정의 및 표현한다.
  

Decorator는 JavaScript 클래스를 변형하는 함수로써 Angular는 클래스가 어떤 특징을 가지며 어떻게 동작해야 하는지 메타데이터를 사용하는 데코레이터를 여러개 구현해두고 있다.

뭐랄까 클래스의 추가기능을 담당하는 녀석인것 같다. 공부를 하다보면 이 부분을 빠지고 지날 수 없을 것 같으니 다음번에 확실히 알아보도록 하자.

---

다음 포스팅에는 DOM과 렌더링에 대한 개념을 알아봐야겠다.