AngularJS 기본
AngularJS 란?
AngularJS는 JavaScript 라이브러리이다. 이렇게 말하면 많은 사람들은 “아, 그렇구나 ……“라고 그냥 넘길 것이다. 그리고 바로 흥미를 잃는 사람도 많을지도 모른다.
“JavaScript 라이브러리? 아무튼 어떤 것인지 모르겠지만, 특별히 필요 없다. jQuery가 있고, 그것으로 만족하고 있다"라고 생각할 수도 있다.
많은 사람이 지금까지 알고 있는 JavaScript 라이브러리는 기본적으로 “JavaScript를 편리하게 하는 것” 이었다. jQuery와 같은 라이브러리 사용은 DOM을 얻거나 속성 조작을 훨씬 쉽게 할 수 있어서 이를 도입하는 경우가 많을 것이다.
이런 라이브러리는 프로그래머가 직접 만드는 프로그램을 작성하는데 있어서 편하게 해주는 것이었다. 작성하고자 하는 처리를 자신이 생각하여, 만드는 것이 편해진다는 그것이 지금까지의 라이브러리였다.
그럼 AngularJS는 어떤 것인가. 그것은 JavaScript에 “새로운 방법"을 제공하는 것이며, “MVC 아키텍처” 개념을 도입한 것이다.
MVC라는 것은 응용 프로그램의 구조를 Model(모델, 데이터를 처리하는 것), View(뷰, 화면 표시를 취급하는 것), Controller(컨트롤러, 전체 제어 및 처리의 구현을 실행하는 것)라는 구성으로 구축하는 개념이다. 서버 사이드 개발 분야에서는 이 개념을 기반으로 설계된 프레임워크가 많이 이용되고 있다.
MVC는 널리 사용되는 개념이지만, 이것은 클라이언트 사이드(Web 브라우저)에는 전혀 해당되지 않는다. JavaScript 코드는 정리되지 않은 일회성 처리로 가득하다. 하나의 함수로 서버에 액세스하고, 로직 처리를 수행하여 DOM을 조작한다. MVC의 분리 따위는 꿈이고, 그런 코딩에 파묻힌 사람이 분명 많을 것이다.
AnguarJS는 데이터 관리와 로직, 그리고 표시 관계를 깔끔하게 분리하여 원활하게 연결한다. 데이터베이스를 사용하는 CRUD(Create, Read, Update, Delete 데이터 액세스의 기본 조작)을 중심으로 한 응용 프로그램 생성에 특히 위력을 발휘한다.
이 AngularJS는 다음 사이트에서 공개되고 있다. 다만 여기에서 라이브러리를 다운로드는 필요가 없다. 그렇게 하지 않아도 AngularJS는 사용할 수 있기 때문이다.
예제를 만들어 보자!
여기에서는 AngularJS를 사용하여 간단한 예제를 만들어 보겠다.
일단은 설치 및 개발 환경은 필요 없다. JavaScript를 편집 할 수 있는 적당한 편집기를 사용한다. 작업 서버의 준비도 우선 없어도 된다. HTML 파일을 그대로 브라우저에서 열어도 동작한다. Ajax 이용으로 서버 액세스 필요하게 되면 그 때 생각하면 된다.
그럼 아래에 간단한 예제 코드를 올려 두었다. 텍스트 에디터를 열어서, 작성해서 .html 확장자로 적당한 위치에 저장한다.
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div>
<p>input:<input type="text" ng-model="msg"></p>
<p>you typed: {{msg}}.</p>
</div>
</body>
</html>
그리고 브라우저에서 열어본다.
이 예제에서는 입력 필드가 하나만 제공되고 있다. 여기에 텍스트를 입력하면 실시간으로 아래의 메시지에 표시가 된다. 아주 간단한 것이지만, AngularJS의 동작은 어떻게든 알 수 있을 것이다.
AngularJS을 사용하고 있다고 하는데 보면 알 수 있듯이 JavaScript 코드 같은 것은 전혀 없다. 사실 AngularJS의 큰 장점은 “JavaScript 만 확장하는 것은 아니다"라는 점이다. AngularJS는 HTML 자체를 확장한다. 그럼 어떻게 되어 있는지 자세히 살펴 보도록 하자.
AngularJS 로드
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
AngularJS는 일반적으로 Google에서 로드하여 사용한다. 위와 같이 <script> 태그를 사용하여 다른 AngularJS를 사용할 수 있다.
이 ajax.googleapis.com라는 사이트는 Google에서 제공하는 CDN 사이트이다. CDN은 “Code Delivery Network"의 약자로 널리 사용되고 있는 오픈 소스 JavaScript 코드를 배포하는 사이트이다. jQuery와 Prototype과 같은 주요 오픈 소스 JavaScript 라이브러리는 대부분 여기에서 배포되고 있다. 지정된 라이브러리의 주소를 src에 지정하기 만하면 언제든지 라이브러리를 사용할 수 있게 된다.
모델 및 마크업
앞에 예제에서 텍스트를 작성하고 실시간으로 표시가 업데이트되는 것은 “모델"과 “마크업"이라는 것의 작용에 의한 것이다. 그럼 예제에서 사용되고 있는 AngularJS의 기능에 대해 설명하겠다.
응용 프로그램 지정
<html ng-app>
먼저 <html> 태그에 ng-app라는 것이 지정되어 있다. 이것은 “이 태그의 내부가 AngularJS에 의해 동적으로 연결된다"라는 것을 의미하고, app는 응용 프로그램을 의미한다.쉽게 말하면, “이 태그가 AngularJS 애플리케이션이다"라는 것을 의미하는 것이다.
여기에서는 <html> 태그에 지정하였는데, 이것은 HTML 전체를 AngularJS 연결하는 대상으로 하고 있기 때문이다. <body>로 연결되면 그 안에만 대상이 된다. 혹은 더 나중에 설명하겠지만, ng-app는 이름을 붙여서 여러 설정할 수 있기에 <body> 안의 여러 태그에 다른 이름의 ng-app을 지정할 수도 있다.
아무튼, 지금은 “<html>이나 <body>에 ng-app를 지정해 놓으면 AngularJS를 사용할 수 있게 된다"라는 것만 기억하도록 한다.
모델의 설정
<input type="text" ng-model="msg">
페이지 본문에 나오는 첫번째 핵심은 이 부분이다. “ng-model"라는 것이 지정되어 있다. 이것은 “디렉티브(directive)“라는 것이다. 디렉티브는 AngularJS에 의해 새롭게 추가된 태그의 속성이라고 생각하면 된다.
이 ng-model이라는 디렉티브는 “모델"이라는 것을 설정한다. 모델은 Web 페이지에 표시되는 데이터를 나타내기 위한 것이다. 예를 들어, 여기에 지정된 ng-model="msg"은 <input type="text"> 값이 “msg"라는 모델과 연관된 것임을 나타낸다.
마크업 사용
이 모델의 값은 여러 곳에서 사용할 수 있다. 여기에서는 그 다음와 같은 형태로 작성되어 있다.
<p>you typed: {{msg}}.</p>
이 {{OO}}라고 작성 법은 AngularJS에 의해 새롭게 마련된 **마크업(markup)**이다. 이 마크업은 수식이나 값을 HTML에 넣기 위하여 이용한다. 여기에서는 {{msg}}라고 되어 있는데, 이는 msg 값이 여기에 표시되게 된다.
이 모델과 마크업에 의해 모델에 설정된 필드의 값을 입력하여 변경이 되면, 마크업 표시가 즉시 바뀌는 동작을 한다. 이 두 가지 요소는 AngularJS를 사용할 때의 가장 기초적인 것이므로, 꼭 기억해 두기로 한다.
초기화와 계산 및 실시간 조작
여기서는 좀 더 확장하여 좀 쓸만한 것을 만들어 보자.
초기화와 계산
아래에 소비세의 계산을 하는 예제이다.
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-init="num = 100">
<div>
<p>price:<input type="text" ng-model="num"></p>
<p style="font-weight:{{(num >= 10000) * 700}}">
you typed: {{num * 1.08}}.</p>
</div>
</body>
</html>
필드에 금액을 입력하면 세금(8% 세금)의 금액이 아래에 표시된다. 또한 금액이 1만원 이상이 되면, 금액 표시가 굵게 표시된다.
초기화 처리
이번에는 새로운 디렉티브 하나가 추가되어 있다. 그것은 아래와 같다.
<body ng-init="num = 100">
이 ng-init라는 디렉티브는 모델의 초기화를 위한 것이다. 이것을 지정해 두면, 모델 값이 지정된 값으로 초기화된다.
수식 사용
값을 표시하는 마크업 부분도 조금 바뀌었다. 이번에는 아래 같은 수식으로 값을 표시하고 있다.
you typed: {{num * 1.08}}.
이렇게 마크업에 수식을 설정할 수 있다. 이것으로 계산 결과가 자동으로 표시되도록 한다. 간단하다.
수식을 사용한 마크업은 잘 보면 다른 곳이 있다. 결과를 표시하고 있는 <p> 태그 부분이다.
<p style="font-weight:{{(num >= 10000) * 700}}">
num> 10000는 num의 값이 10000 이상이면 true, 미만이면 false가 된다. 이에 700을 곱하면 부울 값 (true 또는 false)은 정수 값(1 또는 0)에 캐스팅되어 1 * 700 또는 0 * 700이다. 그럼 “10000 이상이면 굵게 표시"가 되는 것이다.
단순히 간단한 계산만 하여도 이런 식으로 재미있는 것이 가능하다.
위치와 크기를 실시간 조작
그럼 모델과 마크업의 이용 예제로 표시되는 DOM의 위치나 크기를 실시간으로 조작하는 예제을 만들어 본다.
예제는 아래와 같다.
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
#rect {
background-color:red;
position:absolute;
}
</style>
</head>
<body ng-init="x = 100;y = 100; w = 100;h = 100">
<div>
x:<input type="number" min="0" max="300" ng-model="x" size="5">
y:<input type="number" min="0" max="300" ng-model="y" size="5">
w:<input type="number" min="0" max="300" ng-model="w" size="5">
h:<input type="number" min="0" max="300" ng-model="h" size="5">
</div>
<div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">
</div>
</body>
</html>
4개의 필드의 값을 조작하여 변경하면, 실시간으로 빨강 사각형의 위치와 크기가 달라진다.
여기에서는 먼저 <body> 부분에서 값의 초기화를 하고 있다.
<body ng-init="x = 100;y = 100; w = 100;h = 100">
여러 값을 초기화를 하려면, 이런 식으로 세미콜론(;)으로 구분하여 작성할 수 있다. 즉, JavaScript 코드를 작성할 뿐이다.
<input type="number">에 ng-model을 정의하는 것은 이미 알고 있을 것이다. 이는 각각의 입력된 값이 x, y, w, h라는 것에 보관된다. 그리고 이러한 값을 원래 사각형의 <div> 표시가 설정된다.
<div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">
{{}}에 의해 마크업은 이런 방식으로 style 속성 값에 넣을 수 있다. 마크업은 HTML 어디서나 쓸 수 있다. 그리고 그 값을 조작할 수 있다.
어떤가? 아직 JavaScript 코드는 거의 작성하지 않았는데(변수 초기화만 작성), 그래도 여러가지 재미있는 것을 할 수 있을 같지 않은가? 모델과 마크업을 사용하여 실제로 HTML의 다양한 값을 조작해 보도록 하자.