AngularJS 이해

AngularJS에서 지원하는 개발 방식은 모덷-뷰-컨트롤러(MVC)패턴에서 유래했다.

웹 애플리케이션은 넓게 두 종류가 있다.

라운드 트립 / 단일페이지

라운드 트립은 브라우저에서는 서버에 초기 HTML 문서를 요청한다. 사용자 상호작용(링크 클릭)이 일어나면 브라우저는 새 HTML문서를 요청해 서버에서 다시 받는다. 브라우저가 HTML 콘텐츠의 랜더링 엔진이며, 모든 애플리케이션 로직 및 데이터는 서버단에 있다.브라우저는 계속해서 무상태 HTTP 요청을 보내고, 서버는 동적으로 HTML문서를 생성해 요청을 처리한다.

단일페이지는 다른 접근 방식을 취한다. 초기 HTML문서는 브라우저로 보내지만, 사용자 상호작용이 일어나면, Ajax 요청을 통해 HTML이나 데이터 일부를 가져와 기존 엘리먼트에 삽입 후 사용자에게 보여준다. 초기 HTML문서는 다시 로드하거나 대체하지 않으며, 사용자는 Ajax 요청이 비동기적으로 처리되는 동안 기존 HTML과 계속 상호작용 할 수 있다.

AngularJS는 단일페이지에 가깝다.

MVC패턴

MVC패턴을 구성하는 세 가지 요소는 모델, 컨트롤러, 뷰이다.

일반적으로 MVC패턴을 서버사이드 MVC패턴 구조를 갖는데, 이를 구글에 검색하여 이미지는 보는 것이 이해가 잘 될 것이다.

AngularJS는 MVC 구현 방식이 조금 다르다.

이것 또한 구글에 검색하여 이미지를 보는 것이 이해가 더 빠를 것이다.

모델

모델에는 사용자가 사용할 데이터가 들어있다. 모델의 유형은 크게 두가지로 되어있다. 컨트롤러에서 뷰로 전달된 데이터를 나타내는 뷰 모델과 비즈니스 도메인 내 데이터, 작업, 변형, 데이터를 생성, 정렬, 조작하는 데 필요한 규칙이 들어있는 모델이다.

MVC 패턴을 사용하는 애플리케이션 모델에서는

1. 도메인 데이터를 포함해야한다.
2. 도메인 데이터를 생성, 관리, 수정하는 로직을 포함해야 한다.
3. 모델 데이터를 노출하고 모델 데이터상에서 작업을 수행할 수 있는 정돈된 API를 제공해야한다.
4. 모델을 가져오고 관리하는 상세 방법을 노출하지 말아야 한다.
5. 사용자에게 데이터를 보여주는 로직을 포함하지 말아야 한다.
6. 사용자 상호작용을 기반으로 모델을 변형하는 로직을 포함하지 말아야 한다.

컨트롤러

컨트롤러는 AngularJS 웹 앱에서 데이터 모델과 뷰를 연결하는 조직이다. 컨트롤러는 비즈니스 도메인 로직을 모델의 일부인 스코프에 추가한다.

MVC를 사용해 개발한 컨트롤러에서는

1. 스코프를 초기화하는 데 필요한 로직을 포함해야 한다.
2. 스코프의 데이터를 뷰가 표시하는 데 필요한 로직/동작을 포함해야 한다.
3. 사용자 상호작용을 기반으로 스코프를 업데이트하느 데 필요한 로직/동작을 포함해야 한다.
4. DOM을 조작하는 로직을 포함하지 말아야 한다.
5. 데이터의 영속화를 관리하는 로직을 포함하지 말아야 한다.
6. 스코프 밖에 있는 데이터를 조작하지 말아야한다.

뷰

뷰 데이터는 영속적이지 않으며 도메인 모델 데이터의 일부를 합성하거나 사용자 상호작용에 반응해 생성한다.

AngularJS 뷰는 개선된 HTML 엘리먼트를 통해 데이터 바인딩 및 디렉티브를 사용해 HTML을 생성함으로써 정의한다.

뷰는

1. 사용자에게 데이터를 보여주는 데 필요한 로직과 마크업을 포함해야한다.
2. 복잡한 로직을 포함하지 말아야한다.
3. 도메인 모델을 생성, 저장, 조작하는 로직을 포함하지 말아야 한다.