Web Component 기반의 Polymer 한국어 영상

Web Component 기반의 Polymer 한국어 번역 영상입니다.
웹프로그램, 웹앱을 정말 간단히 작성할 수 있게 도와주는 고마운 놈이죠.
저도 AngularJS로 프로그램했던 APP을 Polymer를 이용해서 재작성 했는데, 정말 gorgeous~~~~ .
아래 유튜브 영상도 보시고, 참고해서 간단한 프로그램도 해보시기 바랍니다.
Polymer은 아직 해결해야 할 과제들이 많이 있지만 조만간 많은 개발자들이 사용하는 Front End Framework이 될 겁니다.
자 이제 도전해 보시죠~~

1. Polymer: Interacting with Google Services using nothing but HTML


2. Componentize the Web


3. Polymer: making Web Components accessible


4. Polymer: Creating responsive UIs

PhoneGap을 이용한 Hybrid App 개발하기

HTML + JavaScript + CSS로 만들어진 WebApp을 Market에 등록해서 Mobile이나 Pad에 Install한 다음 동작하게 하기 위해서 별도의 처리가 필요하다. 대표적인 방법은 Appspresso나 PhoneGap를 이용해서 WebApp을 감싸는 방법이 있다.

Appspresso는 국내 KTH라는 회사에서 개발 및 배포를 했지만 이제 더이상 상위 빌드를 배포하지 않는다고 한다. 개인적으로 잘 발전해 나가길 바라고 있었던지라 많이 아쉬움이 남는다.

PhoneGap는 Hybrid App에 대한 고민이 있는 사람이라면 누구나 알 수 있을만큼 국내외에 유명한 Moble Dev Framework다.  Adobe사에서 2011년 10월에 인수해서 Apache 라이센스 적용으로 Open Source 정책을 더욱 강화했고, 각종 추가 기능이 Plugin 형태로 개발되어 커뮤니티에 공유되고 있다.  더 상세한 설명을 PhoneGap 사이트에 방문해서 둘러보길 바란다.

그럼 PhoneGap(cordova)을 이용해서 어떻게 내가 만든 WebApp을 Mobile로 빌드할 수 있는지 Android를 기준으로 개발환경을 설정하고, 간단하게 Hello World를 출력하는 Hybrid App을 만들어 보도록 하겠다.

전체 과정에서 당연히 알고 있을 것으로 판단되는 부분은 설명하지 않았다. 혹 실행에 문제가 있거나 의문 사항이 있으면 질문하면 답변 드리도록 하겠다. 또한 명령어는 phonegap 대신 cordova 명령어를 사용해서 진행한다. 

1. Node.js 설치하기
PhoneGap 최신 버전을 설치하기 위해서는 파일을 다운 받아서 설치하는 것이 아니라 npm을 이용해서 설치하는 방법으로 바뀌었기 때문에 Node.js(http://nodejs.org/) 설치가 먼저 되어야 한다.

2. cordova 설치하기
Node.js가 설치되었다면 npm을 이용해서 cordova(phonegap)을 설치한다.

C:\> npm install -g cordova

3. JDK 설치하기
Java 개발자라면 누구나 설치되어 있을 것으로 판된되지만 혹 설치가 안되신 분들은 Oracle JDK Download(http://www.oracle.com/technetwork/java/javase/downloads/index.html) 사이트에서 JDK를 다운 받아서 설치하고, JDK의 bin 경로를 환경 변수에 추가한다.

4. Android SDK 다운 및 Path 설정
Android SDK(http://developer.android.com/sdk/index.html)를 웹사이트에서 다운 받아서 특정 폴더에 압축을 풀고, sdk > tools, sdk > platform-tools를 환경 변수에 추가한다.

5. Ant 다운 및 Path 추가
Android platform을 사용하기 위해서는 cordova를 이용해서 설치를 해줘야 하는데, 이때 Ant가 있어야 문제없이 설치가 된다. Ant apache 사이트에서 Ant를 다운받고 bin경로를 Path 환경변수에 등록한다.

6. cordova를 이용해서 프로젝트 설정
project 생성을 원하는 특정 폴더에 workspace 폴더를 만들고 cmd창에서 workspace 위치로 이동한 다음 아래 명령어를 수행한다.
프로젝트명에 hello를 입력했다. 각자 원하는 프로젝트명을 입력하면 된다.

D:\workspace cordova create hello com.hans.hello HelloWorld

7. Android platform을 추가
Android나 IOS로 빌드를 하기 위해서는 platform을 추가해야 한다.CMD에서 다섯째에 프로젝트를 생성한 위치로 이동 후에 아래의 명령어를 입력해서 android platform을 추가한다.

D:\workspace\hello cordova platform add android

혹 실행 후에 아래와 같은 에러가 발생하면 Android SDK Manager를 이용해서 새로운 android 버젼을 추가한다.

8. cordova를 이용해서 빌드

D:\workspace\hello cordova build

9. eclipse에서 Project 생성
cordova를 통해서 생성했던 hello 프로젝트를 선택해서 Project 를 구성한다.

10. Virtual Device 등록
Android Virtual Device가 등록이 안되어 있는 분들은 자신이 테스트할 단말을 별도 등록한다.

 11. Project 설정
 Exclude all:아래에 있는 두개의 설정을 삭제한다.

12. Index.html 편집 및 Project 실행
 assets > www > index.html 파일을 열어서 적절해 편집한 다음 Project를 실행한다.
 

이상으로 PhoneGap를 설정하는 방식과 간단히 Hello World를 감싸사 Hybrid App을 만들어 보았다. 필자는 간단히 index.html안에 Hello World를 출력하는 Hybrid App을 만들었지만 index.html 시작점으로 본인들이 원하는 App을 만들어 나가면 되겠다.

WebApp Local 실행을 위한 HTML Include 방식

WebApp을 만드는 목적은 우선 Web상에서의 서비스가 첫번째 목적일 것이고, 더불어 Web 뿐만이 아니라 Local환경에서도 동일하게 동작하길 원할 것이다. WebServer없이 Local 환경에서 동작할 때, 서버에 특정 내용을 저장해야 한다면 인터넷이 연결되어 있지 않아도 정상적으로 동작하다가 인터넷이 연결되면 데이터를 동기화 시켜주는 방식으로도  만들어 질 수 있을 것이다.

또한 모바일에서도 동작하도록 WebApp을 PhoneGap등으로 감싸서 배포하는 형식으로도 고민하고 있을지도 모르며, 모바일로 배포된 앱은 인터넷이 연결되어 있지 않아도 정상적으로 동작해야 할 것이다.

이렇게 Web상에서 뿐만이 아니라 인터넷이 연결되어 있지 않은 다양한 환경에서도 내가 만든 WebApp이 정상 동작되어야 하는데, 이 때 한 가지 고민이 필요한 부분이 있다. 바로 브라우져 보안 때문에 발생될 수 있는 에러인데, 지금부터 이 부분을 함께 고민해 보았으면 좋겠다.

WebApp을 만들면서 보통 server를 구성해서 server 상에서만 실행해보다가 local의 특정 디렉토리에서 index.html파일을 실행 시키면, Web Server에서는 정상적으로 동작하던 WebApp이 에러가 발생하며 정상적으로 동작하지 않는 경우가 발생한다.
물론 모든 Browser가 동작하지 않는 것은 아니고, 사파리 같은 경우에는 로컬에서도 정상적으로 동작한다.

에러의 직접적인 원인은 Local에서 html에서 다른 html파일을 include하는 경우에 Browser의 보안 때문에 File를 읽지 못해서 발생하는 Error다. 크롬도 실행시에 특정 옵션을 주면 보안을 우회할 수도 있지만 서비스를 받는 모든 사용자에게 옵션을 주어서 브라우져를 실행하도록 강제할 수는 없는 일이다.

html에서 다른 html을 include 시키는 방식은 여러 가지 방식이 있는데, AngularJS, JQuery, HTML5, Polymer 등등 많은 방식이 존재한다. 각각의 방식은 웹서버 상에서는 모두 정상적으로 동작하지만 로컬에서 실행할 때는 역시 에러를 발생시킨다.

결국 다른 방식을 찾아보아야 했는데, 직접적인 include방식은 아니지만 AngularJS의 ng-template을 이용하면 include와 비슷하게 구현이 가능하다.

보통 우리는 Layout를 잡고 각각의 영역에 해당하는 파일을 include해서 사용하는데, 아래의 그림처럼 표현하기 위해서는 AngularJS에서 "ng-include='test.html'" , "templateUrl:test.html" 이런 식으로 Coding를 하는데, 이 부분을 아래의 코딩 방식으로 바꿔서 사용하면 비록 직접 include하는 방식은 아니지만 흡사하게 흉내내서 사용이 가능하다.

Plunker Edit

Index.html에서 우선 ng-template에 id를 선언하고 안에 구현할 HTML Code를 넣은 다음, 필요한 곳에서 id를 include하는 방식으로 사용하면 된다. 여기서는 Layout를 잡고 각 Layout에서 include하고 있다.
Script에서는 templates를 선언하고, 그 안에 include를 하길 원하는 ID를 url에 저장해서 가지고 있다.

AngularJS Skeleton (Seed)

첨부파일 : Hans-Angular-Skeleton.zip
GitHub : Hans-Angular-Skeleton

AngularJS로 처음 프로젝트를 진행하다보면 간단하게 구조를 잡는 것도 많은 시행착오를 겪게된다. 디렉토리 구조는 어떻게 잡아야 할지?? 선언한 js파일들의 include는 어떤 방식으로 해야 할지? controller 선언, directive 정의, filter, service 등등 고민해야 할 것들이 한 두 가지가 아니다.

오늘은 AngularJS를 이용해서 처음 프로젝트를 구성하는 분들을 위해서 필자가 직접 만들었던 소스를 이용해서 사용하기 쉽게 단순화해서 프로젝트를 구성해 보았다. 이 소스를 내려 받아서 자신이 필요한 부분을 추가해 가면서 AngularJS에 대해 이해도가 좀 더 깊어지길 바래본다.

소스에는 AngularJS에서 가장 많이 작업이 필요한 부분인 Controller, Directive, Service, Filter를 쉽게 추가해 가면서 진행할 수 있도록 뼈대를 만들어 놓았다. 필요한 부분의 js파일을 만든 후에 각 폴더에 index.js 파일에 추가해서 새로 만든 파일을 추가해서 사용하면 되는 구조이므로, 간단히 추가해서 사용할 수 있을 것이다.

또한 프로젝트 소스 안에는 Controller, Directive, Service, Filter에 간단한 예제를 만들어 놓았으므로, 참고해보면 좀 더 쉽게 이해가 가능하리라 생각한다.

내려 받은 소스를 실행하는 방식은 간단히 웹서버를 구성하고, URL에 localhost:port와 소스의 index.html이 포함된 경로를 입력해서 실행하면 된다. 웹서버를 구성하는 방식은 여러 가지가 존재하므로 별도 설명은 하지 않도록 하겠다.

처음 프로젝트를 실행시키면 아래의 4개의 이미지와 같은 화면이 출력되며, 간략한 설명을 보여지는 화면에 출력해 놓았다. 대표적인 개념인 Filter, Directive, Service와 Data Binding에 대한 메뉴로 구성되어 있다. Controller은 주로 Data를 조작하는 역할을 하므로 별도 메뉴는 구성하지 않았지만 각각의 메뉴에 모두 포함되어 있다.

프로젝트 폴더 구성은 아래의 이미지와 같으며, 사용하는 lib는 여러가지가 있지만 핵심 4가지 lib가 사용되고 있음을 인지하고 있으면 되겠다. 각각의 lib에 대해서는 하나하나가 유명한 lib로 깊이있게 다루길 원한다면 AngularJS를 포함해서 스터디하길 권한다.
1. AngularJS
2. requareJS
3. jQuery
4. bootstrap
프로젝트 js폴더 하위 구성은 크게 controller, directive, filter, service로 구성해서 필요한 파일들을 관련 폴더에 만들어서 사용할 수 있게 구성했지만 만약 프로젝트가 규모가 크다면 특정 묶음 단위로 폴더를 구성해고, 그 하위에 controller, directive, filter, service등을 구성하는 것도 좋은 방법이라 생각된다. 아래 폴더의 구성은 하나의 예일뿐 개인의 입맛에 맞게 구성하면 된다.

프로젝트 각각에 대한 설명을 이곳에 다 하기에는 공간이 부족하므로, 소스에 대한 설명을 각각의 파일에 간략히 적어 놓았다. 설명이 부족한 부분이 많이 존재하지만 적어놓은 설명을 참고하고 자신이 직접 소스를 바꿔가면서 실행해보면 쉽게 소스에 대해서 이해할 수 있으리라 생각한다.

[Tip] WebStrom8 에서 AngularJS Code Completion

오늘 WebStrom 최신 버젼인 8.0.1을 받아서 설치를 했다.
그런데 7 버젼에서는 잘되던 AngularJS Code Completion 기능이 동작하지 않는 것이다.
다시 WebStrom의 AngularJS Plugin을 재설치해도 역시 마찬가지..
잠시 삽질을 한 후에 AngularJS lib를 다운로드해서 프로젝트 폴더에 넣어주니 정상적으로 동작한다.

Yeoman으로 AngularJS 프로젝트 구성하기

WebApp을 개발하기 시작하면 수작업으로 프로젝트 구성, 빌드 및 배포 환경 구성, 테스트 환경 구성 등을 하나하나 직접 만들어 주어야 한다. 또한 프로젝트에 필요한 라이브러리가 있다면 해당 라이브러리 배포 사이트에서 직접 다운 받아서 소스에 코딩해 주어야만 한다. 이 글에서는 이런 일련의 작업들을 편하게 구성할 수 있는 Yeoman에 대해서 알아보고, 직접 Yeoman을 사용해서 프로젝트를 구성하는 방법에 대해서 알아 본다.

Yeoman은 개발자가 직접 처리하는 일명 노가다 작업을 간단히 몇 줄의 명령만으로 알아서 척척 진행해 준다. 참 고마운 놈이다^^. 폴더를 직접 만들어 주기도 하고, 라이브러리를 웹에서 찾아서 직접 다운로드 해준다. 더불어 소스 코드에도 다운 받은 lib의 정보를 추가해 준다. 즉 Yeoman은 스케폴딩이라는 프로젝트의 뼈대를 알아서 잡아 주는 역할을 한다. 또한 라이브러리의 의존성을 관리 해주고, 테스트를 쉽게 할 수 있도록 지원하며, 빌드를 자동화 시켜 준다.

처음 AngularJS로 프로젝트를 진행할 때 프로젝트 구성 및 폴더 구조를 어떻게 잡아야 할까를 많이 고심하게 되는데, 이 글에서 소개하는 방식으로 설정을 잡고, 설치된 폴더의 구조를 분석 해보면 어떻게 프로젝트 구조를 가져가야 할지 감을 잡을 수 있을 것이다.

위에서 간략하게 설명한 역할을 수행하기 위해서 Yeoman이 스스로 모든 일들을 처리하는 것은 아니다. Yeoman 사이트에서 가져온 아래 이미지처럼 3개의 라이브러리가 각각의 역할을 담당하고 있다.

yeoman은 webapp을 만들 때, 뼈대 및 발판 역할을 담당하고, bower은 라이브러리 설치 및 의존성을 관리해 주며, grunt는 미리보기, 테스트, 빌드를 담당해서 전체적으로 프로젝트를 구성하고 빌드하기 까지의 프로젝트 생명주기를 관리한다.

이제 아래 순서에 따라서 AngularJS 프로젝트를 구성하고, 확인해 보도록 하겠다.

1. node.js, git 설치

yo, bower, grunt를 설치하기 위해서는 node.js를 설치해서 npm(Node Package Manager)이 사용 가능해야 하며, git을 사용하는 경우를 위해서 git도 받아서 설치해 준다. 아래 사이트에서 다운 받아서 기본으로 설치해 주면 된다. 참고로 git은 시스템 환경 설정에서 Path를 잡아 주도록 한다.
- node.js (http://nodejs.org/)
- git (http://git-scm.com/)

2. Yeoman, Bower, Grunt 설치

설치는 간단하다 아래의 명령어를 순서대로 실행한다.

npm install -g yo
npm install -g bower
npm install -g grunt-cli

3. angular generator 설치

yeoman을 이용해서 angular 프로젝트 구성을 하려면, angular generator가 먼저 설치되어 있어야 한다. 아래 명령어를 실행한다.

npm install -g generator-angular

4. Project 생성

- 원하는 위치에 프로젝트 폴더를 만들고, 해당 폴더로 이동한다.
- 프로젝트명을 아래와 같이 입력한다.

yo angular first  : first라는 프로젝트 생성
     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

[?] Would you like to use Sass (with Compass)? n
[?] Would you like to include Twitter Bootstrap? y
[?] Which modules would you like to include? (Press to select)
 ⬢ angular-resource.js
 ⬢ angular-cookies.js
 ⬢ angular-sanitize.js
 ⬢ angular-route.js

5. 프로젝트 폴더 확인

- app 폴더 하위에 필요한 파일들을 생성시켜서 프로젝트를 진행하면 된다.

- test 폴더에 테스트할 파일과 설정을 하고 테스트를 진행하면 된다.

6. Grunt를 이용해서 확인하기

grunt test : 테스트
grunt build : 빌드
grunt serve : 프리뷰

마지막 명령어를 실행해서 아래처럼 화면이 출력되면 최종 설정이 완료된 것이다.

이제부터는 이렇게 구성된 프로젝트를 이용해서 controller를 추가하고, directive를 정의하고, view를 추가해 가면서 프로젝트를 풍성하게 만들어 가면 되겠다. 이렇게 프로젝트를 구성해 보았지만 사실 아직 갈 길이 멀고도 멀다. 여기에 간략하게 풀어놓은 각각의 도구들을 잘 활용할 수 있도록 계속 연습하고 학습해서 익혀야 하고, 또한 AngularJS도 자유자재로 다룰 수 있도록 많은 학습이 필요하다.

[Sublime Text] 유용한 10가지 플러그인

Sublime Text는 그 자체로도 가볍고 쓸만한 편집기지만 다양한 Plugin을 설치해주면 더욱 막강한 편집기로 재탄생 시킬 수 있다. 또한 관심을 조금 더 기울인다면 나에게 딱 알맞은 편집기를 만들 수가 있다. 다른 사용자에게 맞는 Plugin이 나에게는 맞지 않거나 불필요한 경우도 많기 때문에 사용자는 능동적으로 자신의 개발 환경에 맞는 Plugin을 찾아서 설치하면 된다.

이 글에 필자가 사용하는 Sublime Text의 Plugin을 설명할 것이고, 앞으로도 틈틈히 쓸만한 Plugin의 설명을 추가할 예정이니, 참고해서 자신의 Sublime을 intelligence하게 만들어 보길 권한다.

먼저 Plugin을 설치하기 위해서는 Sublime Text, Package Control이 설치되어 있어야 하며, 혹시 설치가 아직 안되어 있는 분들은 이전 글 "Sublime Text3 설치 및 설정"을 참고하거나 검색해서 설치하면 되겠다.

설치하는 방법은 아래의 순서대로 명령어를 입력하고, 팝업이 뜨면 원하는 Plugin을 입력해서 선택하면 설치가 시작된다.
ctrl + shift + p > Package Control : Install Package > Enter

1. AngularJS
- link : https://github.com/angular-ui/AngularJS-sublime-package
필자가 요즘 주로 사용하는 Javascript MVC Framework가 AngularJS여서 소개를 해본다. AngularJS로 프로젝트를 진행하는 개발자라면 필수 Plugin이 되겠다. 설치가 완료되면 아래처럼 AnglarJS 관련 지시어나 서비스들이 팝업되면서 코딩에 많은 도움을 받을 수 있다.

2. Sublime CodeIntel
- link : https://github.com/SublimeCodeIntel/SublimeCodeIntel
웹 개발에 쓰이는 거의 모든 언어(JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP)를 지원하고, 개발 시에 코드에서 변수명을 ALT+Click, CTRL+F3 누르면 변수가 지정된 파일로 자동 이동하며, 그 외에 다양한 많은 기능들을 제공하고 있다.

3. SideBar Enhancements
- link : https://github.com/titoBouzout/SideBarEnhancements
최초 Sublime text를 설치하고 Sidebar의 File, Folder에서 팝업을 띄우면 간단한 메뉴가 몇 개 나타난다. 이 Plugin을 설치하면 유용한 메뉴들이 추가 된다. 설치가 완료되어 오른쪽 팝업을 띄우면 아래처럼 다양한 메뉴가 나온다.

4. Sublime Linter
- link : https://github.com/SublimeLinter/SublimeLinter
개발을 하다보면 타이핑을 잘못하거나, 코딩에 오류가 발생되는 경우가 있는데, 이런 상황에서 유용한 plugin이로서 자동으로 잘못된 코딩을 알려준다.
해당 기능을 사용하기 위해서는 먼저 node.js가 설치되어 있어야 한다.

5. JSLint
- link : https://github.com/fbzhong/sublime-jslint
JSLint는 컴파일러 검증을 받지 못하는 언어의 단점을 어느 정도 극복해 준다. JSLint은 분석을 수행하여 개발자로부터 배포 또는 디버깅 전에 매번 수작업하는 수고를 줄여 준다.

6. DocBlockr
- link : https://github.com/spadgos/sublime-jsdocs
Java로 프로젝트를 하면, 정해진 규칙에 의해서 철저히 주석을 다는 반면에, javascript에서는 소홀하게 생각하는 경우가 많다. javascript로 점점 복잡하게 프로그램을 작성하는 경우가 많아지고 있는 상황에서, 이 plugin을 이용하면 효율적인 주석을 달 수 있다.
/** 입력하고 Enter를 치면 아래처럼 자동 주석이 달린다.

7. Git
- link : https://github.com/kemayo/sublime-text-git/wiki
Sublime에서 작성한 Source를 다른 사람과 협업하기 위해서 또는 다른 장비나 다른 편집기에서도 동일한 Source를 보기 위해서 필요한 Plugin이다. 요즘은 Source를 머지하기 위해서 SVN 말고도 Git를 많이 사용하기 때문에 이것도 꼭 필요한 Plugin이 되시겠다.
공개, 비공개 git를 사용하려면 이전 글 "Github로 소스 관리하기", "Bitbucket 무료 비공개 저장소 만들기" 참고하시고, 먼저 원격 소스 저장소를 만저 만들어야 한다.
설치를 완료하면 기존에는 없던 메뉴들이 곳곳에서 보이게 된다.

8. Emmet
- link : https://github.com/sergeche/emmet-sublime
이전의 ZenCoding이 HTML뿐만 아니라 CSS 지원, 더 많은 단축키를 제공하며 emmet으로 이름을 바꾸었다. copy&paste 신공도 좋지만 emmet을 손에 익히면 순식간에 많은 양의 코딩을 진행하면서 효율적으로 프로그램을 할 수 있다.

9. Prefixr
- link : http://wbond.net/sublime_packages/prefixr
CSS cross browser 지원을 위한 plugin이다. 하나의 CSS를 작성하면 자동으로 cross browser에 맞게 css를 생성해 준다.

10. Bracket Highlighter
- link : https://github.com/facelessuser/BracketHighlighter
{},[],<>,"",'',() 와 같이 열리고 닫히는 기호가 쌍으로 존재해야 하는 코드를 하이라이트 처리해주는 확장 기능이다.
아래처럼 하이라이트 된다.

AngularJS 이해하기

요즘은 Javascript로 다양한 Web Application을 제작하는 경우가 많은 것 같다. 그 중에는 훌륭한 프로그램들이 많이 있는데, 그 만큼 개발의 복잡도도 많이 증가하고 있다. 순수하게 Javascript만을 이용해서 객체지향적으로 Web Application을 작성해도 되겠지만, 생각처럼 작성하기 쉽지 않고, 더불어 테스트, 유지보수, 확장성 등을 고려한다면 더더욱 Javascript만을 가지고 프로그램을 하기가 만만치 않다.

개인적으로 Web Application 작성을 위해서 Spine, Backbone를 더 많이 접해 보았지만, 이번에는 Google이 만들고 있는 AgnularJS에 대해서 알아보려고 한다. AngularJS 는 아래와 같은 특징들이 있다.

1. MVC Pattern
최근까지 Client측 프로그램을 위해서 MVC을 잘 사용하지는 않았다. 점점 더 요구 사항이 다양화되고, 프로그램이 복잡해 지면서 자연스럽게 Client측 프로그램도 MVC 패턴이 필요하게 되었다. 기존 응용프로그램 개발에 많이 이용되던 언어인 Java, C++은 기본적으로 MVC 패턴을 이용해서 프로그램이 가능하고, 그렇게 해야만 프로그램의 유지보수 및 확장이 용이하기 때문이다.

MVC는 데이터(model) 관리, 애플리케이션 로직(controller)관리, 데이터 표현(view)를 명확하게 분리하는 것이 주된 목적이다. View는 Model에서 데이터를 가져와 사용자에게 표시하고, Controller는 사용자가 어떤 동작을 취하면 Model의 데이터를 변경한다. 또 Model이 변경되면 다시 View가 그 변경사항을 화면에 표시하게 된다. AngularJS에서는 View는 DOM(Document Object Model), Controller는 Javascript Class며, Model 데이터는 객체 속성에 저장된다.

2. Client Side Templage
보통 Web Page, Web Application은 Server에서 데이터와 HTML을 합쳐서 결과를 Client에 보내고, 그 보내진 결과가 바로 화면에 표시된다.

AngularJS는 화면에 표시되는 방식이야 동일하지만 Template와 Data가 함께 Client로 보내져서, 그 보내진 결과를 Client에서 조합해서 화면에 뿌려지는 것이 차이점이라고 하겠다.

3. Dependency Injection
특정 컨트롤러에서 특정 작업을 처리하기 위해서 직접 그 해당 기능을 구현하는 것도 가능하지만, 그렇게 처리하기 시작하면 스파게티 코드를 회피할 방법을 찾기 어려워질 것이다. AngularJS가 기본 제공하는 것들을 그냥 처리하기 원하는 곳에 넣어주고, 처리할 곳에서는 인자로 넘어온 도구를 가지고 처리를 요청하면 되는 것이다.

종속물 주입을 이용하면 개발자는 종속물을 작성하지 않아도 되며 작성한 클래스가 직접 필요한 것을 요청하는 개발 방식을 따르면 된다.

4. Auto Data Binding
Web Application에서 데이터의 변경이 발생되면, 보통 그 발생된 Event를 체크해서 데이터를 가져온 다음, 모델에 직접 반영하고, 변경된 모델을 화면에 표시하기 위해서 화면을 업데이트 한다. 이 전체 과정이 경우에 따라서는 하나하나 개발자가 직접 구현해 주어야만 동작이 된다. 이렇듯 개발자가 작업해 주어야 할 일들이 상당히 많은 편이다.

AngularJS는 위의 Data Binding 과정을 개발자가 직접 처리해 주지 않아도 자동으로 알아서 처리해 준다. 물론 모든 것을 다 자동화해서 작성할 필요는 없지만, 자동으로 처리해 주는데 추가적으로 불필요한 코드를 작성하는 것 또한 낭비라고 생각된다. 아래의 코드를 실행하면 Input박스의 수정된 내용을 화면에 표시하기 위해서 {{hello.text}} 라고 간단히 적기만 하면 개발자는 별도의 작업이 필요 없이 변경사항이 화면에 표시된다.


5. Directive
4번의 예제에서 ng-app, ng-controller등 기존에 보지 못했던 새로운 속성들이 보이는데, 이러한 HTML 확장 문법을 Directive라고 한다. AngularJS는 더 많은 지시어들을 가지고 있다. http://angualrsjs.org 에 방문하면 다양한 지시어를 만날 수 있다.

AngularJS의 지시어 뿐만이 아니라 개발자가 직접 지시어를 정의해서 사용하는 것도 가능하다.

마치며
위에 정의한 5가지의 특징 외에도 더 많은 특징들이 존재한다. 앞으로 Angular를 다양한 측면에서 바라보고, 실제 프로젝트에 적용해 보려고 한다. 직접 몇가지 예제를 가지고 테스트를 해본 필자의 느낌은 몹시 쓸만한 놈이다란 생각이 들었다.
전체적인 구조를 이해하고, 전체 뼈대를 만들어 놓는다면 어떤 JS framework보다 생산성과 재미를 제공할 것이다.