Inspired World

구글의 AngularJS 프레임워크 본문

JavaScript

구글의 AngularJS 프레임워크

InspiredJW 2014. 4. 10. 10:55

AngularJS

소개

AngularJS는 구글(Google)에서 만든 Single Page App (SPA) 를 만들 때 반복되는 코드와 복잡한 코드를 줄이고 테스트를 쉽게 하도록 하기위해 만든 JavaScript MVC Framework입니다.





Two-Way Data Binding 이라는 특징이 처음에 눈에 많이 띄는 요소입니다.


기존 jQuery나 JavaScript DOM API를 이용해서 어떤 데이터(Model)이 변할 때 이벤트 리스너나 특정 함수를 조건에 맞춰 호출할 때 UI를 변경했던 방식과는 달리 JavaScript 객체의 값을 변경하면 그것이 바로바로 UI에 변화가 반영되게 할 수 있다는 얘기입니다!


이런 특징 말고도 Model, Controller, Service, Dependency Injection, Directive 등을 이용해서 Single Page App을 보다 효과적으로 개발할 수 있게 도와줍니다.


보시다시피 처음에 공부할 것이 많아서 학습곡선 (Learning Curve)가 높다는 것이 함정입니다 -_-;


일반적인 모든 사이트에 적용하면 무조건 좋다는 아닙니다.


렌더링해야하는 객체수가 너무 많지 않은 (Two-Way Data Binding) Web App 개발에 사용하길 권장합니다.

설치

설치는 간단하게 Google에서 제공하는 CDN을 이용해서 합니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

jQuery 1.x 버전을 먼저 로드하는 이유는, 익스플로러 (IE)와의 호환 문제 때문입니다.


AngularJS 자체에 이미 jqLite라고 하는 jQuery 스타일의 DOM 조작 API가 있지만

구버전의 IE브라우저까지 호환하려면 jQuery 1.x버전을 포함해야 합니다.


jQuery가 먼저 존재할경우 자체 내장한 jqLite대신 jQuery를 사용합니다.


참고로 말씀드리면, AngularJS 1.x 버전의 공식 지원하는 가장 하위버전의 IE는 8입니다.


아예 AngularJS 2.x 버전대에서는 모바일 브라우저나 크롬, 사파리, 파이어폭스 같은 개념찬(?) 브라우저들 중심으로 지원할 예정이라고 합니다.

간단한 예제

HTML
<!DOCTYPE html>
<html ng-app>
<head>
    <title>test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
    <div>
        <input type="text" ng-model="name">
        <div>안녕하세요, {{ name }} 님</div>
    </div>
</body>
</html>

소개에서 말씀 드린 Two-Way Data Binding을 잘 보여주는 예입니다.


예제 보기


예제 실행 후 나오는 텍스트 박스에 입력하는 동시에 바로바로 UI에 변동사항이 적용됩니다.


같은 일을 jQuery로만 해야한다면 훨씬 더 많은 코드가 필요했을 겁니다.

예제 (jQuery 버전)

HTML
<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
  <div id="container">
    <input type="text" id="name">
    <div id="screen">안녕하세요, 님</div>
  </div>
</body>
</html>
JavaScript
'use strict';

var $screen = $('#screen');

$('#name').keyup(function(e) {
  $screen.html('안녕하세요, ' + $(this).val() + ' 님');
});


예제 보기


보시다시피 Two-Way Binding을 이용해서 AJAX요청이나 Websocket을 통해 받은 변화한 데이터 값을


UI로 반영할 때 매우 편리합니다.


이렇게 적은 가독성 좋은 코드로도 가능합니다.

이거 써야돼?

AngularJS는 웹앱이나 웹사이트에 따라서 모든 기능을 사용하기에 성능이나 호환성에 문제가 있을 수 있지만


FrontEnd 코드도 BackEnd 코드처럼 좀 체계적인 맛(?)으로 개발할 수 있는 장점이 있습니다.


글로만 보면 그냥 그래요.


원래 다 그렇잖아요. 한번 써보세요 ^-^


AngularJS 공식 웹사이트

추가로…

제가 만든 어그로 끄는 이야기 라는 사이트입니다.


방금 소개한 AngularJS로 만든 사이트구요.


소스보기 해서 한번 둘러보세요~


검색엔진 최적화와 같은 몇 가지 이슈 때문에 라우팅이랑 몇가지 요소를 걷어내고

서버렌더링도 같이 하는 방식으로 바꾸긴 했지만 여전히 많이 사용하고 있습니다.




저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

티스토리 블로그에 구글 애드센스 깔끔하게 달기  (11) 2016.08.02
AngularJS의 Model이 바뀌었는데 UI가 바뀌지 않을 때  (0) 2014.04.22
CoffeeScript로 즐거운 JavaScript 코딩하기  (2) 2012.07.19
JavaScript 비동기 프로그래밍 소개 및 setTimeout 최소값  (0) 2012.03.21
JavaScript 에서 객체지향 프로그래밍(OOP) 하기  (0) 2012.03.09
공유하기 링크
'JavaScript' Related Articles more
Comments