개발지원

소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로
클래스들을 제공하는 프레임워크와 자주 쓰일 만한 기능, 함수들을 모아 놓은 클래스들의 모음인 라이브러리를 지원합니다.

Angular Ver.4.4.5 홈페이지 바로가기

정의 및 사용 목적

React-Admin (https://github.com/marmelab/react-admin)

REST / GraphQL API 기반의 관리자앱을 구축하기 위한 프론트엔드 프레임워크이다. ES6, React, Material Design을 사용한다. 러닝커브가 있지만 익숙해 진다면 관리자페이지를 좀 더 빠르게 개발할 수 있다.

장점 및 특징

1. 작성해야하는 자바스크립트 코드량을 줄여준다.

2. 유지보수가 쉽고 개발속도가 빠르다.

3. 재사용이 쉬운 정적인 UI 컴포넌트를 만들 수 있다.

4. 의존관계 주입을 이용해 웹 어플리케이션을 개발할 수 있다.

설치 방법

AngularJS를 다운로드하기 위해선 AngularJS 공식 사이트인 www.angularjs.org에 접속한다. 브라우저를 통해 접속하면 다음 그림 같은 화면을 볼 수 있을 것이다.

위 그림에서 보는 것과 같이 파란색 큰 다운로드 버튼을 이용해서 AngularJS를 다운로드 할 수 있다. 다운로드 버튼을 클릭하면 브렌치branch, 빌드build를 선택하여 다운로드 하거나 CDN정보나 Bower 인스톨 정보를 확인할 수 있는 모달modal창이 나타난다. 별도의 다운로드 없이 CDN 정보로 HTML 스크립트 태그에 경로로 입력하여 AngularJS를 적용할 수 도 있으나 본 글에서는 AngularJS를 다운로드하여 적용하는 것을 설명하겠다. 글을 작성하는 시점에는 AngularJS는 1.2.x와 1.3.x 두 개의 브렌치로 나누어 진다. 최신 버전은 1.3.x이나 IE8을 지원하기 위해서는 1.2.x 버전의 AngularJS를 사용해야 한다. 그럼 1.2.x 브렌치와 zip 빌드로 선택하고 다운로드 버튼을 클릭하자. 그리고 압축을 풀면 아래 그림과 같을 것이다.


위 그림에서 보는 것과 같이 많은 자바스크립트 파일과 개발자문서 폴더, i18n 다국어 파일폴더 등을 볼 수 있다. AngularJS를 적용하기 위해서 모든 자바스크립트 파일이 필요로 하지는 않는다. 기본 프레임워크만 적용하기 위해서는 angular.js 또는 압축된minified 버전인 angular.min.js 둘 중 하나만 HTML 스크립트 태그로 작성하면 된다.

비고

AngularJS는 웹 애플리케이션 개발에 필요한 여러 기능을 제공하는 오픈 소스 자바스크립트 프레임워크다. jQuery와 같은 자바스크립트 라이브러리와 다른 점은 우리의 코드가 AngularJS를 직접 호출 하기보다는 우리가 작성한 코드를 AngularJS가 호출하는 것이다. 즉, 우리의 코드가 AngularJS라는 뼈대에 살을 채워 웹 어플리케이션이 만들어 진다.


지금까지 HTML, 자바스크립트, CSS만으로는 화려하고 편리한 사용자 인터페이스를 제공하는 웹 애플리케이션을 개발하기 매우 어려웠다. 그래서 ActiveX와 플래시와 같은 기술에 의존하여 Rich한 웹 애플리케이션을 개발했다. AngularJS는 이러한 리치 웹 애플리케이션을 위해 만들어지지 않은 HTML의 부족한 부분을 채우고자 만들어졌다. 다음은 AngularJS가 제공하는 주요 기능이다.


- 템플릿

- 양방향 데이터 바인딩

- MVC 구조

- 지시자directive를 이용한 HTML 확장

- 의존관계 주입Dependency Injection

- 단일 페이지 웹 애플리케이션을 위한 라우터Router

- $q를 이용한 자바스크립트 비동기 프로그래밍 지원

- 자바스크립트 테스팅 지원

- CSS3 Animation 처리 지원

- 모바일 터치 이벤트 지원