전체메뉴

프레임워크

아이콘
프레임워크는 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의
협업화된 형태로 클래스들을 제공하는 것으로써 정보시스템 개발을 위해 필요한 기능 및 아키텍처를 미리 만들어 제공하여
효율적인 어플리케이션 구축을 지원합니다.

Angular Ver.4.4.5

홈페이지 바로가기

정의 및 사용 목적

자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크의 하나로,  싱글 페이지 애플리케이션 개발 중에 마주치는 여러 문제들을 해결하기 위해 개발되었으며 주로 구글과 개별 커뮤니티, 여러 회사에 의해 유지 보수되고 있다.


사용 목적 : 솔루션의 복잡한 요구사항을 지속적으로 반영해야 하고 DOM제어가 복잡해 질 가능성이 높을 때  jQuery, React 같은 라이브러리 보다는 Angular 같은 프레임워크를 선택하는 것이 좋다.

웹 서비스 개발 시 사용. 개발팀 차원에서 TypeScript 도입을 고려하고 있다면 Angular는 좋은 선택이 될 수 있음. 단, 초반 Angular의 장점이었던 '가벼움'은 다소 사라졌다고 평가되고 있음

장점 및 특징

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 처리 지원

- 모바일 터치 이벤트 지원

이메일 무단 수집 거부

팝업 닫기

본 웹사이트에 게시된 이메일 주소가 전자우편수집 프로그램이나 그밖의 기술적장치를 이용하여 무단으로 수집되는 것을 거부하며, 이를 위반시 정보통신망 이용촉진 및 정보보호등에 관한 법률에 의해 처벌 받을 수 있습니다.

닫기
TOP