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과 렌더링에 대한 개념을 알아봐야겠다.
'Front_End > Angular' 카테고리의 다른 글
05. Angular로 개발하기 - 3 - 구조 지시자 (0) | 2017.08.19 |
---|---|
04. Angular로 개발하기 - 2 - 서비스/의존성주입 (0) | 2017.07.29 |
03. Angular로 개발하기 - 1 - src/app, Component, Data Binding (0) | 2017.07.28 |
02. Angular 시작하기 (0) | 2017.07.08 |
01. Angular 준비하기 (0) | 2017.07.07 |