Home SD 커뮤니티 Easy Tech

Easy Tech

Easy Tech

자바스크립트 프레임워크 앵귤러(Angular.JS) 제대로 알기

2019-06-04


앵귤러 프레임워크란?
Angular.JS

 

앵귤러는 SPA (Single Page Application) 프레임워크로, 하나의 웹페이지를 실행 시 view에 해당되는 부분의 페이지 주소를 바꾸지 않으면서도 새로운 view를 동적으로 불러와 사용하는 것을 말한다. 앵귤러는 이러한 SPA를 편리하게 사용할 수 있도록 하는 MVC 패턴 오픈소스 프레임 워크이다.

여기서 MVC는  Model, View, Controller의 약자로 애플리케이션을 세가지 역할로 구분한 방법론으로서 디자인 패턴은 소프트웨어의 개발 방식을 공식화해 구현하는 개발자 사이의 커뮤티케이션 효율성을 높이는 기법을 말한다. MVC의 M(Model)은 데이터 및 데이터 구조를 의미하고, C(Controller)는 데이터를 업데이트 하는 등의 동작, V(View)는 사용자 인터페이스(UI)처럼 어떻게 보여질 지 결정짓는 요소로 생각하면 쉽다.

 
 
 

앵귤러의 주요 개념들
 

앵귤러 프레임워크는 사용자 인터페이스를 만들거나 소프트웨어 컴포넌트를 서로 엮어 연결하는데에는 선언적 코드가 훨씬 좋다는 신념에서 만들어졌다. 아래는 앵귤러 사용시 미리 이해해야 하는 몇가지 주요 개념들에 대한 내용이다.

1. 지시어 (Directives)
 앵귤러의 기능을 적용하기 위한 특정 HTML 함수로 사용자 지정을 할 수 있다는 특징이 있다. 지시어는 ng로 시작하는 것들이 많다. (예:  ng-controller, ng-app 등)
2. 필터 (Filters)
 표현식이 화면에 표기되는 포맷에 있어서 원하는 데이터만을 필터링 하여 사용할 수 있게 해준다.
3. 데이터 바인딩 (Data Binding)
 모델과 뷰의 데이터를 양방향으로 지속적, 실시간 연동하여 업데이트 한다. 데이터를 원하는 위치에 편리하게 사용할 수 있도록 바인딩 해준다.
4. 컨트롤러 (Controller)
 모델 생성, 메소드를 통해 뷰로 퍼블리싱을 담당하는 등 자바스크립트로 된 제어 로직이다. 메인 컴포넌트로서 기능별로 묶어 사용할 수 있도록 해준다.
5. 모듈 (Module)
 응용 프로그램의 서로 다른 기능을 구성하는 컨테이너로 지시어, 필터, 컨트롤러, 서비스 등을 포함한다. 모든 자바스크립트의 기능들은 모듈 단위로 관리된다.
6. 서비스 (Service)
 특정 기능을 담당하는 객체와 공통된 특정 작업을 수행하는 singleton 객체들을 사용해 컨트롤러 간의 통신을 제어하거나
또는 이 객체들을 리턴해서 컨트롤러로 CRUD를 수행하여 사용된다.

 

 

 

앵귤러 프레임워크 특징

 1. 자바스크립트 코드량을 줄여준다.
   - MVC 구조 제공으로 이를 위한 코드 작성이 불필요하다.
   - DOM을 선택, 조작하는 코드를 작성할 필요가 없다.
   - 모델은 단순 자바스크립트 객체이며 getter, setter 함수 작성을 하지 않아도 된다.
   - 양방향 데이터 바인딩 지원으로 서로를 동기화 하는 코드 작성이 불필요하다.

 2. 앵귤러의 데이터 모델은 단순 자바스크립트 객체이다.
   - 앵귤러는 대부분의 MVC 프레임워크와 달리 기본 모델 클래스를 상속해 모델 클래스를 만들지 않는다.
   - 양방향 데이터 바인딩으로 모델이 바뀌면 뷰 데이터도 같이 바뀌어 동작한다.

 3. 재사용이 쉬운 UI 컴포넌트 제작이 가능하다.
  - 복잡도가 높은 UI 컴포넌트 중에서도 기본 HTML에서 제공하지 않은 것들을 HTML로 만들 수 있게 해준다.
  - HTML로 만들어진 UI 컴포넌트를 HTML엘리먼트 또는 애트리뷰트를 이용해 사용할 수 있게 한다.

 4. 의존관계 주입을 통한 웹 애플리케이션 개발이 가능하다.
   - 원래 웹 애플리케이션은 더 좋은 사용자 편의성을 위해 많은 자바스크립트를 사용하여 복잡했지만, 의존관계 주입을 통해 단위테스트가 가능하며 분리된 형태로의 개발이 가능하다.

 5. HTML&CSS 와  자바스크립트 개발에 대한 부분을 명확히 분리해 준다.
   - 앵귤러를 사용하게 되면 HTML 구조에 대해 자바스크립트 개발자가 알지 못해도 작업이 가능하다.
   - 뷰와 로직 코드가 명확히 분리된다.

 
 

앵귤러 프레임워크의 생산성
 

앞서 특징에서 설명한 것처럼 앵귤러 프레임워크는 개발자 생산성을 향상시켰다. 모듈과 클래스, 화살표 기능을 갖고 코딩 패턴을 일관성 있도록 해준다. 형식 및 인터페이스를 제공하며 앵귤러 개발용 타입스크립트 활용으로 형식 검사와 안전한 리팩토링, 인라인 코드 문서화 기능을 얻을 수 있다. 이러한 기능을 통해 개발, 편집 경험 개선 및 코드 디버깅 및 이해에 도움을 받을 수 있다.
 

두번째로 일관된 코딩 패턴을 통해 생산성을 향상 시켰다. 그 중에서도 클래스와 내장 DI(Dependency Injection), MVVM(Model-View-Viewmodel) 패턴을 통해 그 장점을 확인할 수 있다. 앵귤러에 구성 요소를 구축하고 싶다면 클래스를 생성하고 적절한 데코레이터를 추하가면 된다. 이 밖에도 사용자 정의 파이프 필터를 구축하거나, 앵귤러 모듈, 서비스 등을 구축하고 싶다면 똑같은 코딩패턴을 활용하면 된다. 또 공통 아키텍처 패턴 활용으로 클라이언트 측 애플리케이션 구축시 사용자 인터페이스와 사용자 인터페이스를 지원하고 제어하는 코드, 마지막으로 이 해당 인터페이스를 위한 데이터가 포함된 모델등 3가지를 MVVM 패턴을 이용해 분리한다. 이런 공통의 패턴 활용은 앵귤러로 개발했을 때 더 생산적이고 쉽게 개발할 수 있도록 만들 수 있게 해준다.
 

 
 
 

앵귤러의 라우팅(Routing)
완전한 기능을 갖추다.

 

라우팅의 목적은 클라이언트 측의 웹 애플리케이션의 다양한 뷰를 제공하여 모든 기능을 지원할 때 정확한 시점에서 정확한 뷰를 표시할 수 있도록 하는데에 있다. 앵귤러 프레임워크는 완전한 기능을 갖춘 라우팅을 제공하며 앵귤러를 통해 각 애플리케이션의 페이지 경로 정의를 할 수 있으며 경로 보호 기능으로 관리자나 로그인이 없는 자의 경로 접근을 막을 수 있다. 이는 사용자가 변경사항을 저장 또는 취소를 확인할 때까지 편집 중인 페이지를 떠나지 못하게 하는 것이 가능하다는 의미이며, 페이지를 표시하기 전에 데이터를 미리 불러 올 수 있게 해준다.

앵귤러는 차일드(Child) 경로를 지원하는데 이는 특정 경로 내에서 탐색하기 위함이다. 차이드 경로는 페이지 내에서 정보 탭들을 표시할 때 유용하다. 그리고 특정 경로를 늦게 로딩시켜 사용자가 해당되는 경로와 관련된 기능에 접근하지 않는 한 해당 경로의 코드를 브라우저로 다운로드하고 로딩하지 못하게 할 수 있기 때문에 사용자가 관리 기능 접근 권한 요청 없이는 로딩되지 않는다. 이러한 기능들로 앵귤러의 라우팅은 전보다 훨씬 유연하고 강력해졌다.