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

티스토리 뷰

Skill/Programming - Server & Client

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

gyulee0220 2019. 11. 14. 18:57

최근에는 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>
                <td style="width: 200px">Name</td>
                <td style="width: 300px">Player</td>
                <td style="width: 50px"></td>
            </tr>
            <tr ng-repeat="item in boardlist">
                <td style="width: 50px">{{$index+1}}</td>
                <td style="width: 200px">{{item.name}}</td>
                <td style="width: 300px">{{item.team}}</td>
                <td style="width: 50px"><button type="button" ng-click="remove(item.id)">delete</button></td>
            </tr>
        </table>
    </div>
</body>
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를 보게 된다.

저작자표시 동일조건

'Skill > Programming - Server & Client' 카테고리의 다른 글

6.[Vue.js] method, computed, watch (0)	2019.12.07
5. [Vue.js] 데이터 바인딩 응용 (0)	2019.12.01
4. Vue.js 인스턴스, 데이터 바인딩 (0)	2019.11.24
2. 클라이언트 구축 개요 (0)	2019.11.08
1. 서버사이드 렌더링(SSR), 클라이언트사이드 렌더링(CSR) (0)	2019.11.03

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

Adrian's Web Page

티스토리 뷰