기본 콘텐츠로 건너뛰기

Angular.js이란?

Angular.js이란?

Angular.js 개요

AngularJs는 2009년 Miško Hevery과 Adam Abrons에 의해 개발된 자바스크립트로 만든 client 측 MVC/MVVM 프레임워크로 모던 단일 페이지 웹 애플리케이션 SPA(Single Page Application) 형태를 빠르게 개발할 수 있도록 도와준다.

SPA란 단일 페이지 어플리케이션은 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는것이 아니라 최초 한번 페이지 전체를 로딩한 후 이후부턴 데이터만 변경해서 사용할 수 있는 웹 어플리케이션을 말한다.

Angular.js(파란색)의 트렌드 변화

Angular.js 의 무엇이 개발자를 열광시키는가?

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

간편한 데이터 바인딩을 통해 뷰 업데이트가 쉽다.

코드 패턴이 동일해 개인간 차이에 따른 결과물의 차이가 적다. 코드량이 감소한다.

SPA 개발에 최적화되어 있다.

기능적인 분리가 명확해 협업이 쉽다.

Angular.js 예제1

ng-app: 이 지시자(directive) 내에 속한 영역은 AngularJS 애플리케이션으로 인식된다.(예제 코드에서는 … 사이의 영역을 의미)

ng-model='name': 데이터 바인딩을 위해 사용되는 지시자로, 값으로 지정한 'name'은 모델의 이름으로 사용된다.

{{name}}: 데이터의 출력을 위한 템플릿 표현식으로, 이중 중괄호로 묶어 사용한다. 이곳에 사용된 모델명인 'name'은 ng-model='name'과 바인딩되어 처리된다.

See the Pen AngularJS 데모 by kimch3617 (@kimch3617) on CodePen.

Angular.js 예제2 (Jquery와 비교)

주소록 리스트를 출력하고 해당 요소를 삭제하는 예제

Jquery 예제

기존 DOM 제어 기반 로직

• 마크업 요소의 인지

아래 코드는 템플릿 요소를 확인하고, 마크업 요소(DOM)를 저장 또는 지정

$('.inbox').find('ul') $('.inbox').find('ul li:last')

• 이벤트 핸들러의 할당

마크업 요소에 맞는 이벤트 핸들러를 할당하는 코드이다.

$('.delete').click(function() { ... });

• 데이터의 변경, 템플릿을 이용하여 화면 반영

사용자 입력에 의해 변경된 데이터를 변경하고, 템플릿을 이용하여 변경된 내용을 화면에 반영한다.

$('.inbox').find('ul').append(''); $(this).parents('li').remove();

Angular.js 예제

• 모듈 만들기

모듈은 컨트롤러, 서비스, 지시자를 포함하는 단위이다. 다음은 모듈을 이용하여 컨트롤러를 만드는 코드이다.

var myApp = angular.module('myApp', []);

• $scope에 모델 만들기

$scope에 모델을 추가한다. 또한 추가한 모델의 데이터가 변경되었을 경우, 자동으로 뷰에 반영할 수 있도록 대상 모델을 등록한다.

$scope.emails = {}; . . $scope.deleteEmail = function (index) { $scope.emails.messages.splice(index, 1) };

• 서비스 지시자 만들기

구현하고자 하는 기능 중, AngularJS에서 기본적으로 제공하는 지시자로 구현할 수 없을 경우에는 서비스에서 별도의 지시자를 만들어야 한다. AngularJS는 개발자에게 주어지는 자유도가 상대적으로 높지 않기 때문에, 기존 'DOM 제어 방식' 개발에 익숙한 개발자라면 이 부분이 상당한 아쉬움으로 남을 수 밖에 없다.

AngularJS의 동작방식

양방향 데이터 바인딩

최소 한번 템플릿과 모델이 결합되야하며 이 또한 자동적으로 이루어지지 않는다. 개발자가 일일이 모델과 뷰를 지속적으로 싱크를 맞추도록 코딩을 해야한다는 것으로 코딩이 불가피하다.

하지만 AngularJS는 다른 JS와 달리 양방향 데이터바인딩을 지원한다. 페이지가 로드되면 AngularJS는 동일한 이름의 데이터 모델을 연결하고 이둘의 싱크를 유지시킨다. 개발자는 단지 UI의 어느 부분에 어떤 자바스크립트 속성을 할당할지 선언만 하고(앞의 예제의 ng-model) 동기화는 자동으로 이루어지게 된다.

양방향 데이터 바인딩

양방향 데이터 바인딩을 한 문장으로 표현하자면 완전히 동기화된 데이터 정도가 가장 좋겠다. 즉 모델 을 갱신하면 뷰 에 반영되고, 뷰 를 갱신하면 모델 에 반영되는 형태를 말한다. 이는 별다른 작업 없이도 데이터가 동기화된다는 뜻이다. 예를 들어 하나에 ng-model 을 바인딩하고 값을 입력하기 시작하면 동시에 모델이 생성(기존에 존재하면 갱신)된다.

AngularJS 도입 시 고려사항

※ 데이터 바인딩 성능 비교

※ 컴파일되지 않은 콘텐츠의 출력

AngularJS의 초기화가 완료되기 전 콘텐츠가 출력되는 상황이 만들어지는 경우에는 위와 같이 원하지 않는 형태의 출력이 발생

※ 이벤트 바인딩

양방향 데이터 바인딩을 위해서 AngularJS는 모델로 지정된 요소에 여러 개의 이벤트를 자동으로 바인딩한다. 예를 들어, 요소를 모델로 지정하고 그 값을 뷰에 출력하는 간단한 애플리케이션의 경우, 요소에는 실제로 다음의 이벤트들이 바인딩된다.

• input

• change

• blur

• compositionstart

• compositionend

이벤트 로그 출력

AngularJS는 직접 요소에 이벤트 바인딩을 하거나 직접 요소를 조작하지 않아도 되기 때문에 편리한 부분도 있지만, 이벤트 바인딩을 세부적으로 컨트롤해야 하는 상황에서는 불편할 수도 있다.

※ 참고자료

http://netil.github.io/slides/angularjs/index3.html#/19

from http://kimch3617.tistory.com/7 by ccl(A) rewrite - 2020-03-06 13:54:41

댓글

댓글 쓰기

이 블로그의 인기 게시물

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다.

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다. - 좋아요 아래와 같은 업무를 훌륭히 감당하실 분을 모십니다.서비스 관련 DB 모델링, DB 최적화 작업서버 & DB 관리Frontend & Backend 인터페이스의 최적화 작업 화합과 성장을 같이! - Angular JS의 경험 - Node.js - javascript 능숙자 - DRMS 사용 능숙자 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/742 by ccl(A) rewrite - 2020-03-22 12:20:20
댓글 쓰기
자세한 내용 보기

[020] 파동함수를 쓰기

[020] 파동함수를 쓰기 [020] 파동함수를 쓰기 [020] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [020-01] 파동함수 사인파의 일반형은 코사인 (cos) 을 이용해 쓰지만, 사인 (sin) 과 코사인은 위상차이만 있는 함수들이고, 우리는 앞으로 사인을 이용해 문제를 풀 예정이라 사인을 이용하기로 한다. 파동함수는 양자역학에서 갑자기 나온 말이 아니고, 원래 파동을 함수의 형태로 쓴 것을 파동함수라고 부른다. 파동-입자 이중성을 가지니까 기존에 파동을 함수의 형태로 쓰던 그 모양을 가져다 쓴 것. 주교재의 16장에 있는 내용이다. [020-02] 펄스 - Pulse 아래와 같이 하나의 진동이 왼쪽에서 오른쪽으로 진행하는 상황을 생각해보자. 시간 t 일 때, 위치 x 의 밧줄의 높이를 y 라 하고, 셋의 관계를 기호로 쓰면, 그러면 아래의 관계가 성립한다. 이게 무슨말이냐면, 시간 t 일 때 위치 x 의 밧줄의 높이 와 시간 0 일 때 위치 x-vt 의 밧줄의 높이가 같다 는 말인데, 그림으로 보면, 왼쪽은 시간 0, 오른쪽은 시간 t 이고, t 일 때 P 의 높이와 0 일 때 높이가 같다는 것. [020-03] 파동을 식으로 써보자. 아래의 파동을 보자. 지금 내용부터는 사인이든 코사인이든 상관없는데, 위 그림이 사인이니까 아래의 식 으로 쓸 수 있다. A는 진폭이고, 주기, 진동수, 파장 같은 값을 아직 모르니까 a 는 아직 정해지지 않은 값 이다. 일반적으로 알고있는 삼각함수는 가로축이 각도 이지만, 우리는 공간을 진행하고 있는 파동을 다루니까 위의 형태로 써진다고 생각하자. x=0 에서 진폭이 ...
댓글 쓰기
자세한 내용 보기

[Angular] Router 라우터 정리

[Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트를 태그에 렌더링하는 영역을 구현하는 Directive이다. Routes – 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다. RouterLink – HTML의 앵커 태그는 브라우저의 URL 주소를 변경하는 것이다. 앵귤러에서 RouterLink를 사용하면 라우터를 통해 렌더링할 컴포넌트를 변경할 수 있다. ActivatedRoute – 현재 동작하는 라우터 인스턴스 객체이다. Router 설정 라우터를 사용하기 위해서는 먼저 Router 모듈을 import 해야 한다. import { RouterModule, Routes } from '@angular/router'; 라우터에서 컴포넌트는 고유의 URL과 매칭된다. URL과 컴포넌트는 아래와 같이 Routes 객체를 설정하여 지정할 수 있다. 아래의 예에서는 디폴트 path에서는 MainComponent가 노출이 되고 product-list path에서는 ProductListComponent가 노출이 되도록 설정을 한 것을 볼 수 있다. const routes: Routes = [ { pa...
댓글 쓰기
자세한 내용 보기