AngularJS 란 ?

AngularJS 란 ?

AngularJS는 구글이 2009년에 발표한 Javascript기반의 프론트앤드 프레임워크이다.

AngularJS는 MVC패턴 이고 SPA(Single Page Application)이다.

그렇다면 프레임워크란 무엇 일까?

프레임워크란 ?

설계의 기반이 될 수 있는 확장 가능한 기술들을 모아 놓고 사용자들이 원하는 대로 확장 할 수 있도록 하는 집합체이다.

이렇게 설명하면 라이브러리하고 무슨 차이냐는 질문이 반드시 나올 것이다.

라이브러리는 자주 쓰이는 기능들을 모아서 필요 할때마다 가져다 쓴다.

말 그대로 라이브러리는 단지, 소스 안에서 편리와 효율을 위해 라이브러리를 만들고 호출하여 가져다 쓴다면

프레임워크는 프레임워크이라는 틀 안에서 사용자들이 소스를 구현한다.

아래에 사진을 참고 하길 바란다.

그래서 위에 말처럼 프레임워크는 설계의 기반이 될 수 있지만 라이브러리는 설계의 기반이 될 수 없다.

Angular라는 프레임워크를 사용하면서 개인적으로 느낀 또 하나의 특징은 프레임워크의 창시자가 만들고자 하는 프레임워크

성격에 맞춰 재구현 된 것이라는 것을 느꼈다.

그럼 이어서 다시 AngularJS에 대해서 알아 보겠다.

AngularJS을 써야 하는 이유

AngularJS의 구조

모듈 - 코드를 정리하는데 도움을 주는 일종의 컨테이너이다. 애플리케이션이 어떻게 설정 되어 있고 어떻게 동작 하며 어떻게 구성 되어 있는 지 한 눈 에 볼 수 있도록 해준다.

Config - 모듈 안에서 애플리케이션이 실행 되기전 적용 되어야 할 정보들을 관리 하는 영역으로서 라우터를 설정하거나 애플리케이션의 초기 동작을 설정 할 수 있는 영역이다.

Route - 라우트는 특정 페이지 이동하는 경로를 정의한다. 라우트에 키를 부여하고 해당되는 키에는 템플릿과 컨트롤러를 지정할 수 있다. 그래서 특정 키로이동 하면 템플릿과 컨트롤러가 함께 렌더링 되면서 사용자에게 보여진다. 템플릿을 쉽게 말하자면 HTML(뷰)이라고 생각 하면 된다.

$Scope - $Scope는 애플리케이션 내부에서 뷰와 컨트롤러를 결합 시켜준다. 결합보다는 연결을 시켜준다. 뷰와 컨트롤러 사이에 다리같은 존재다.

컨트롤러 - 개인적인 생각으로는 AngularJS의 구조에 핵심이다. 특정 컴포넌트 뷰에 바인딩하고 다룰 수 있도록 하는 속성과 메서드를 정의하는 객체이다. 그렇기 때문에 해당 컴포넌트에 스스로 제어할 수 있는 독립성을 향상 시키고 다른 컴포넌트에 대한 의존성을 감소 시키기 위해 필요한 기능들만 최대한 가볍게 작성하는 것이 좋다. 다른 컴포넌트와 중복 되는 기능들은 CommonController를 만들어 작성하거나 Service를 이용하는 것을 추천한다.

Directive - 디렉티브는 AngularJS의 뷰에 대한 확장 기능이다. 위에 말한 것처럼 프레임워크가 사용자가 원하는대로 기능을 확장 시킬 수 있다는 특징에 대해 큰 역할을 한다. 원하는 특정 동작을 캡슐화 하여 재사용 할 수 있도록 구현 할 수 있다. 즉, HTML을 위한 데코레이터 생각하면 된다. 디렉티브는 뷰를 확장하며 그 기능을 여러 곳에서 사용 가능하다. 쉽게 말해 HTML의 엘레먼트(태그), 속성등을 사용자가 직접 정의 및 구현하여 활용 할 수 있도록 한다. 그리고 AngularJS 에서 만들어 놓은 내장 디렉티브도 많다. 내장 디렉티브를 공부한다면 디렉티브가 무엇인지 어떻게 활용 되는지 더욱 빨리 이해 될 것이다.

Service - 서비스는 AngularJS 애플리케이션의 공통 기능을 구현하기 위한 컴포넌트이다. 예를 들어, 여러 컨트롤러가 공유해야 하는 데이터나 기능이 있다면 서비스 객체로 구현하고 해당 service를 액세스하여 사용하도록 구현하면 된다. 그렇기때문에 서비스는 컨트롤러의 확장이라고 볼 수 있다.

- by seung

많이 말고 꾸준히