3. Angular.js를 이용한 웹 사이트

최근에는 Vue.js의 인기가 높아졌지만 기존의 클라이언트사이드 렌더링 방식의 지배자는 Angular.js이다. 따라서, 우린 클라이언트 구축에 필요한 기초 지식들을 Angular.js와 Vue.js를 통해 배워 볼 것이다. 이번 시간에는 Angular,js에서 MVC 패턴이 어떻게 적용 되고 이를 통해 기초적인 클라이언트가 어떻게 만들어지는지 알아보자.

1. Angular.js와 MVC/MVVM

앞서 알아봤듯이 Angular.js로 MVC 패턴의 적용이 가능하다. 그리고 Angular.js에서는 MVVM 패턴도 적용가능하다.

- MVVM 패턴

Model-View-ViewModel의 약자로 컨트롤러가 뷰모델로 교체된 형태이다. 기존 모델이 뷰를 위한 뷰모델이 존재하여 뷰를 바인딩 할때 강력한 강점을 보인다.

사용자는 View를 통해서 데이터의 수정과 조회를 요청한다. 그리고 이를 View-Model이 듣고 Model에게 데이터를 요청한다. 모델은 작업을 진행한 답변을 다시 VIew-Model에 전달하고 이를 View에 전달해 사용가자 원하는 결과를 볼 수 있도록 한다.

2. Angular,.js에서 MVC 모델 구축

1) 모델 (Model)

Angular.js에서 모델을 사용하기 위해서는 Json 형태로 데이터를 저장한다. NBA 선수들에 대한 관리를 하는 웹 사이트의 모델을 작성한다고 가정해보자. 우선 모델 구조의 설계를 진행해보자. 아래 두명의 선수에 대한 데이터를 만들어야 한다.

Player 1: 르브론 제임스 (LA 레이커스) Player 2: 야니스 아데토쿤보 (밀워키 벅스)

일반적인 테이블로 만든다면 Player라는 테이블이 있고, 이름에 필드와 팀 필드를 만들고 각각에 엔트리를 집어 넣으면된다. 이때, 키로는 name 필드가 사용 될 것이다.

1 2 3 4 5 6 7 8 9 { "players" : [{ "name" : "LeBorn James" , "team" : "LA Lakers" },{ "name" : "Giannis Antetokounmpo" , "id" : "Milwaukee Bucks" }] } Colored by Color Scripter cs

위와 같은 구조로 서버와 클라이언트가 데이터를 주고 받게 되는데 이 마크업 언어를 Json(JavaScript Object Notation)이라고 한다. javascript가 발전하고 클라이언트 언어가 다양해짐에 따라 클라이언트의 언어에 따라 데이터 송수신 방식이 제약을 받지 않게 하기 위해서 위와 같은 방식이 구현되었다.

2) 뷰 (View)

뷰는 모델에 존재하는 HTML로 렌더링 된 결과를 보는 것을 의미한다. 위의 정보를 볼 수 있는 간단한 사이트를 만들어보자 결과를 우선 보여드리면 아래와 같은 구조가 된다.

만약에 사용자가 자신의 화면에서 선수 한명을 지우고 싶다면 옆에 'delete'키를 눌러 지울 수 있어야 한다. 저 delete 버튼에 대한 정의는 뷰에 존재해야 하고. 기능에 대한 정의는 컨트롤러에 있어야 할 것이다.

이 게시판에 대한 HTML 코드는 아래와 같다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 < body > < div ng-app = "myApp" ng-controller = "myCtrl" > < table border = "1" > < tr > < td style = "width: 50px" >No. < td style = "width: 200px" >Name < td style = "width: 300px" >Player < td style = "width: 50px" > < tr ng-repeat = "item in boardlist" > < td style = "width: 50px" >{{$index+1}} < td style = "width: 200px" >{{item.name}} < td style = "width: 300px" >{{item.team}} < td style = "width: 50px" >< button type = "button" ng-click = "remove(item.id)" >delete Colored by Color Scripter cs

뷰에서는 우리가 보게 될 웹 사이트 언어에 대한 정의를 내리게 된다.

ng-app="myApp"으로 뷰와 컨트롤러가 연결이 된다. 그리고 HTML으로 정리된 표의 필드가 들어가는 곳을 { }안에 집어 넣어서 연결 시켜준다.

3) 컨트롤러 (Controller)

이제 컨트롤러를 만들어보자 컨트롤러에는 크게 2가지 동작이 들어가야 한다.

모델의 데이터를 뷰에서 조회 할 수 있도록 뷰의 필드에 값을 넣어준다. 뷰에 존재하는 삭제 버튼이 작동할 수 있게 삭제 기능에 대한 정의를 내려주어야 한다.

JavaScirpt의 Angular.js 프레임워크를 적용해서 개발하게 된다면 컨트롤러는 아래와 같이 만들 수 있다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var app = angular.module( "myApp" , []); app.controller( "myCtrl" , function ($scope) { $scope.boardlist = [ {id: 1 , name : 'LeBorn James' , team: 'LA Lakers' }, {id: 2 , name : 'Giannis Antetokounmpo' , team: 'Milwaukee Bucks' } ]; $scope.remove = function (id) { if ( ! id) return ; var idx = - 1 ; for ( var i = 0 ; i < $scope.boardlist. length ; i + + ) { if ($scope.boardlist[i].id = = = id) { idx = i; break ; } } if (idx = = = - 1 ) return ; $scope.boardlist.splice(idx, 1 ); } }); Colored by Color Scripter cs

보다시피, Angular.js 모듈에 대한 이름을 "myApp"으로 설정했다. 그리고 이를 app으로 정의한 객체에 집어 넣었다.

두번째로, 컨트롤러를 "myCtrl"으로 정의했다. 이 컨트롤러는 뷰에서 ng-controller="myCtrl" 으로 정의 되었다. 위 키워드는 HTML 태그에 컨트롤러를 연결 시켜준다. 그리고$scope.remove = function (id) 으로 삭제 함수를 만들었다. 뷰의 삭제버튼을 누르게 되면 컨트롤러의 remove function이 작동하여 데이터 삭제가 진행된다.

- 주의 사항

컨트롤러 개발에 있어서 중요한 것중 하나가 클라이언트에 필요한 기능 들을 모두 컨트롤러에 담아야 하는 것이다. 즉 하나의 객체에 모든 컨트롤러가 담기게 되고, 그 안에 컨트롤러가 존재하게 된다.

.

<옳은 방식>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var app = angular.module( "myApp" , []); app.controller( "myCtrl" , function ($scope) { $scope.remove = function (id) { if ( ! id) return ; var idx = - 1 ; for ( var i = 0 ; i < $scope.boardlist. length ; i + + ) { if ($scope.boardlist[i].id = = = id) { idx = i; break ; } } if (idx = = = - 1 ) return ; $scope.boardlist.splice(idx, 1 ); } }); Colored by Color Scripter cs

위 처럼 app.controller안에 모든 기능을 집어 넣어야 한다.

<잘못된 방식>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var app = angular.module( "myApp" , []); function remove(id) { if ( ! id) return ; var idx = - 1 ; for ( var i = 0 ; i < $scope.boardlist. length ; i + + ) { if ($scope.boardlist[i].id = = = id) { idx = i; break ; } } if (idx = = = - 1 ) return ; $scope.boardlist.splice(idx, 1 ); } } Colored by Color Scripter cs

기능을 function 키워드로 새로 만들어서는 안된다. JavaScript 문법 상 문제가 없을 지는 몰라도 이 방식은 MVC 모델을 위반하는 방식이다.

이를 막기 위해 Angular,js에서는 $scope 기능을 사용하고 있다. 해당 변수는 뷰에 연결된 필드를 읽을 수 있도록 살펴보는 기능을 한다. 즉, 뷰에 존재하는 필드는 $scope와 연결 되는 것이다. 뷰에서 {{ }} 안에 담겨 있는 변수들이 $scope를 보게 된다.

from http://adrian0220.tistory.com/171 by ccl(S)