본문 바로가기

앙귤러JS

[앙귤러] 앙귤러(angular)는 ?

What is angular ?

angular JS는 다이나믹한 웹 어플리케이션을 위한 프레임워크이다. HTML을 템플릿 언어처럼 사용하게하고 HTML의 문법을 간결하고 명료하게 확장할 수 있다. 가장 먼저 의존성 주입과 데이터 바인딩을 통해 기술된 많은 코드를 정리할 수 있다. 그리고 자바스크립트나 브라우저에서 발생하는 모든 사건을 서버의 형태로 구현하 수 있다.

 angular는 HTML이 어플리케이션을 위해 설계되었을 것이다. HTML은 정적인 문서에게는 굉장히 좋은 문서이다. 어플리케이션을 생성하기 위해 많은 방법을 제공하고 있지는 않지만 말이다.

 정적인 어플리케이션과 동적인 어플리케이션 사이의 다른 차이에 대한 흔한 해결책

1. 라이브러리 - 웹 어플리케이션을 사용할 때 사용되는 function의 집합. 코드는 굉장히 종속적이고 jquery나 다른 라이브러리에 묶여서 있음

2. 프레임워크 - 코드가 치밀하게 작성되어 웹 어플리케이션을 구현한다. 프레임워크는 뭔가 필요로 할 때 코드를 호출한다.

  angular는 다른 접근 방식을 사용한다. 어플리케이션이 필요에 의해 생성되는 새로운 HTML 문서 구조와 문서중심의 HTML 사이의 간격을 최소화하려는 시도를 했다. angular는 directives라는 우리가 부르는 구조를 통해 새로운 문법으로 브라우져를 가르친다.

1. {{ }}으로 데이터 바인딩

2. DOM Element의 repeating과 hiding를 위한 DOM 구조를 컨트롤 한다.

3. form의 유효성을 지원한다.

4. DOM Element의 뒤에 코드를 붙인다.

5. 재사용 가능한 컴포넌트에 HTML를 그룹화한다.

6. 완벽한 클라이언트 사이드 솔루션

 

angular는 퍼즐 하나의 조각같은게 아니다. 모든 DOM과 잘짜여진 AJAX 코드를 다룬다. 이것이 Angular가 어떻게 CRUD 어플리케이션이 만들어져야 하는가에 집착하게 만들었다. 그러나 이것에 집착하는 동안 이 집착이 그냥 쉽게 변할 수 있는 시작점인지를 확인할 필요가 있다.

1. CRUD 어플리케이션을 만드는데 필요한 모든 것 : 데이터바인딩, basic

templating directives, form, validation, routing, deep-linking, reusable

components, dependency injection.

2. 시험 가능한 것 : unit-testing, end-to-end testing, mocks, test harnesses

 

Angular Sweet Spot

angular는 높은 추상화의 높은 레벨을 개발자에게 제공하여 어플리케이션 개발을 단순화했다. 어떤 추상화든지 유연성의 노력은 필요한 법이다. 다른 말로 모든 앱이 angular에 적합한건 아니다. angular는 CRUD 어플리케이션과 함게 만들어졌다.

다행히 CRUD 어플리케이션은 많은 웹 어플리케이션을 대표한다.

  Angular는 CSS, javascript 등 여러 가지 언어가 짬뽕되어 사용되는 것보다 선언적인 코드가 더 중요하다라는 믿음에서 만들어졌다.

이것은 DOM 조작을 어플리케이션 로직으로부터 분리하는 것은 좋은 아이디어이다. 코드의 테스트가 용이하게 코드가 극적으로 높아졌다.

정말 정말 좋은 아이디어는 어플리케이션을 구현하는 거랑 테스트하는거랑을 같게 보는 것이다. 테스트가 힘들다는 것은 코드의 구조에 영향을 받는다.

훌륭한 아이디어는 서버사이트에서 클라이언트 사이드를 분리하는 것이다. 웹 어플리케이션이라 하더라도 이 점은 매우 유용한데 개발에 있어서 병행으로 일할 수도 있고 두 사이드를 분리했기 때문에 두 사이드를 재사용할 수도 있다.

 

나름 해독해놨는데 왜 어렵지 ..

어떤분이 Grid를 예를 들며 말씀해주신건데 그런건 아닌 것 같다.

그냥 웹페이지에서 사용하는 여러가지 언어를 뭐 javascript나 css 등 jquery를 배제하고 짬뽕되서 보기 힘든 웹 페이지를 directives를 활용해서 간결하고 명료한 웹 어플리케이션을 구현하는데 목적이 있는 듯..

그 점에서 웹에서는 없었던 Service Controller View로 분리시켜서 코드 재사용성을 높이고 가시성과 가장 중요한 테스트에 용이성을 극대화 시켰다고 보면 좋겠다.

 

 

'앙귤러JS' 카테고리의 다른 글

$Watche와 ng-change는 뭐가 다르지 ?  (0) 2016.06.20
[앙귤러] BootStrap  (0) 2013.11.28