lecture 7~13검토

_includes/lecture-todomvc-angular-1-index.html

@@ -5,13 +5,11 @@
   <li><a href="{{ '/lectures/todomvc-angular/4'  | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] 투두 목록 출력하기</a></li>
   <li><a href="{{ '/lectures/todomvc-angular/5'  | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] 새로운 투두 추가하기</a></li>
   <li><a href="{{ '/lectures/todomvc-angular/6'  | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Bootstrap으로 꾸미기</a></li>
-
-  <li><a href="{{ '/lectures/todomvc-angular/9'  | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] $watch</a></li>
-  <li><a href="{{ '/lectures/todomvc-angular/10' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Clear Completed</a></li>
-  <li><a href="{{ '/lectures/todomvc-angular/11' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Directive</a></li>
-  <li><a href="{{ '/lectures/todomvc-angular/12' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Service</a></li>
-  <li><a href="{{ '/lectures/todomvc-angular/13' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Express.js</a></li>
-  <li><a href="{{ '/lectures/todomvc-angular/14' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Static file</a></li>
-  <li><a href="{{ '/lectures/todomvc-angular/15' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] APIs</a></li>
-  <li><a href="{{ '/lectures/todomvc-angular/16' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] $http</a></li>
+  <li><a href="{{ '/lectures/todomvc-angular/7'  | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] 투두 목록 필터링</a></li>
+  <li><a href="{{ '/lectures/todomvc-angular/8'  | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Directive</a></li>
+  <li><a href="{{ '/lectures/todomvc-angular/9'  | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Service</a></li>
+  <li><a href="{{ '/lectures/todomvc-angular/10' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Express.js로 웹서버 만들기</a></li>
+  <li><a href="{{ '/lectures/todomvc-angular/11' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] Static File</a></li>
+  <li><a href="{{ '/lectures/todomvc-angular/12' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] APIs</a></li>
+  <li><a href="{{ '/lectures/todomvc-angular/13' | prepend: site.baseurl }}">[앵귤러로 Todo앱 만들기] $http로 앵귤러 서비스 개선하기</a></li>
 </ol>

_posts/2016/2016-06-13-lecture-todomvc-angular-10.md → _posts/2016/2016-06-13-lecture-todomvc-angular-7.md

@@ -1,18 +1,109 @@
 ---
-title: '앵귤러로 Todo앱 만들기 10 - Clear Completed'
+title: '앵귤러로 Todo앱 만들기 7 - 투두 목록 필터링'
 layout: post
 tags:
   angularjs
-permalink: /lectures/todomvc-angular/10/
-date: 2016-06-13 10:00:00
+permalink: /lectures/todomvc-angular/7/
+date: 2016-06-13 09:00:00
 ---
 
+우리가 ngRepeat 디렉티브를 이용해 todos 배열 데이터를 출력해 봤다.
+이번에는 출력된 리스트를 필터링해 보겠다.
+
+필터링할 수 있는 기준은 아래와 같다.
+
+* completed: 완료된 투두 리스트
+* active: 미완료된 투두 리스트
+* all: 모든 투두 리스트
+
+ngRepeat는 기본적으로 필터기능을 지원한다.
+완료된 투두 리스트만 필터링 한다고 하면 아래와 같은 코드를 작성하면 된다.
+
+```html
+<ul ng-repeat="todo in todos | filter: {completed: true}">
+```
+
+반대로 미완료된 투두만 필터링 할경우에는 `filter: {completed: false}`로 할것이다.
+모든 투두 리스트를 보여줄 경우 즉 필터링하지 않을 경우에는 `filter: {}`처럼 빈 객체를 필터에 추가하면 된다.
+
+자 다시 생각해 보자.
+필터기능을 어떻게 UI랑 함께 구현할 수 있을까?
+
+
+## 필터 버튼 만들기
+
+completed, active, all 세개를 버튼을 만들어서 각각 클릭할때 마다 필터링 로직이 동작하도록 하자.
+
+```html
+<div class="btn-group" role="group" aria-label="...">
+  <button type="button" ng-click="status='completed'">Completed</button>
+  <button type="button" ng-click="status='active'">Active</button>
+  <button type="button" ng-click="status=''">All</button>
+</div>
+```
+
+![](/assets/imgs/2016/lecture-todomvc-angular-2-result9.png)
+
+
+## 상태정보: $scope.status
+
+필터에 관련된 정보를 스코프변수 `$scope.status`에 저장한다.
+버튼을 클릭할 때마다 이 값은 변경될 것이다.
+왜냐하면 각 필터버튼에 `ng-click` 핸들러를 추가했기 때문이다.
+
+```html
+<button ng-click="status='completed'">
+```
+
+`ng-click은` 함수뿐만이 아니라 자바스크립트 명령문도 올 수 있다.
+
+
+## 필터정보: $scope.statusFilter
+
+`ng-repeat`을 사용할때 `filter`에 적당한 필터 정보를 설정해야 하는데...
+이게 동적으로 동작해야한다.
+그럼 필터값에 변수를 할당하면 어떨까?
+
+```html
+<ul ng-repeat="todo in todos | filter:statusFilter">
+```
+
+사용자가 어던 필터 버튼을 클릭하느냐에 따라 필터에 설정된 변수 `statusFilter`의 값이 변경될 것이다.
+
+## $watch
+
+앵귤러에서 가장 많이 사용하지만 남용되어서는 안될 함수가 있는데 바로 `$watch` 함수다.
+이것은 스코프 변수의 변경을 감지하고 그때마다 사용자가 설정한 함수를 실행한다.
+물론 많이 사용하면 메모리 자원도 그만큼 많이 사용하 때문에 이점을 조심해야 한다.
+
+우리는 `$watch`변수를 통해 버튼클릭으로 변경되 `status` 변수를 감시하고
+그 값에 따라 `statusFilter` 값을 변경해 주면 필터가 동작할 것이다.
+
+TodomvcCtrl.js:
+
+```javascript
+// 필터버튼을 클릭하고 status 값이 변경되면 $watch()에 등록한 함수가 동작한다.
+$scope.$watch('status', function () {
+  if ($scope.status === 'completed') {        // Completed 클릭시
+    $scope.statusFilter = {completed: true};  // 필터를 설정한다.
+  } else if ($scope.status === 'active') {    // Active 클릭시
+    $scope.statusFilter = {completed: false}; // 필터를 설정한다.
+  } else {                                    // All 클릭시
+    $scope.statusFilter = {};                 // 필터를 해제한다.
+  }
+})
+```
+
+화면을 다시 리로딩하여 필터가 동작하는 것을 확인해 보자.
+
+
+## Clear All 버튼 추가하기
+
 거의 다왔다. 화면구성 마지막 단계다.
 버튼을 하나만 하나만 더 추가하자.
-투두를 하나씩 완료하면 완료된 투두 목록이 많아질 것이기 때문에 Clear Completed 버튼을 만들어야겠다.
-반드시 필요한 기능이다.
+투두를 하나씩 완료하면 완료된 투두 목록이 많아질 것이기 때문에 "Clear Completed" 버튼을 만들어야겠다.
 
-사실 이 부분은 별로 설명하지 않아도 잘 따라온 독자라면 혼자서도 구현할수 있어야한다.
+사실 이 부분은 별로 설명하지 않아도 잘 따라온 독자라면 혼자서도 구현할수 있어야 한다.
 총 정리하는 차원에 전체 코드를 실어놓겠다.
 
 index.html:
@@ -148,10 +239,9 @@ angular.module('todomvc')
 
       $scope.clearCompleted = function () {
         var incompleteTodos = $scope.todos.filter(function (todo) {
-					return !todo.completed;
-				});
-
-				angular.copy(incompleteTodos, $scope.todos);
+          return !todo.completed;
+        });
+        angular.copy(incompleteTodos, $scope.todos);
       }
 
     });
@@ -160,7 +250,6 @@ angular.module('todomvc')
 ![](/assets/imgs/2016/lecture-todomvc-angular-2-result10.png)
 
 
-
 관련글:
 
-{% include lecture-todomvc-angular-1-index.html %}
+{% include lecture-todomvc-angular-1-index.html %}

_posts/2016/2016-06-14-lecture-todomvc-angular-13.md → _posts/2016/2016-06-14-lecture-todomvc-angular-10.md

@@ -1,36 +1,36 @@
 ---
-title: '앵귤러로 Todo앱 만들기 13 - Express.js'
+title: '앵귤러로 Todo앱 만들기 10 - Express.js로 웹서버 만들기'
 layout: post
 tags:
   angularjs
-permalink: /lectures/todomvc-angular/13/
+permalink: /lectures/todomvc-angular/10/
 date: 2016-06-14 17:42:00
 ---
 
 이제부터 서버를 만들어 보자.
-서버 기능은 두 가지라고 앞서 얘기했다.
+서버 기능은 두 가지라고 앞서 얘기했다. (참고: [앵귤러로 Todo앱 만들기 1 - 노드 설치노드 설치](/lectures/todomvc-angular/1/))
 
 1. 정적파일 호스팅
 2. API 기능
 
-이것을 쉽게 구현할수 있는 것이 Express.js라고 하는 웹프레임워크다.
-
-설치
+이것을 쉽게 구현할수 있는 것이 [Express.js](http://expressjs.com)라고 하는 웹프레임워크다.
+npm으로 익스프레스 엔진을 프로젝트에 추가해보자.
 
 ```bash
 $ npm install express --save
 ```
 
 package.json에 express 모듈이 추가 되었을 것이다.
-현재 버전으로는  4.13.4 버전이 설치 되었다.
+현재 버전으로는 v4.13.4 버전이 설치 되었다.
 
-이제 서버폴더 서버 코드를 작성해 보자.
-express.js 공식 사이트에서 [hello world 샘플 코드](http://expressjs.com/en/starter/hello-world.html)를 사용해서 결과를 확인하자.
+앞으로 server 폴더 서버 코드를 작성해 하겠다.
+express.js 공식 사이트에 있는 [hello world 샘플 코드](http://expressjs.com/en/starter/hello-world.html)를 사용해보자.
 
 server/app.js:
 
 ```javascript
-var express = require('express'); // part 1
+// part 1
+var express = require('express');
 var app = express();
 
 // part 2
@@ -44,19 +44,19 @@ app.listen(3000, function () {
 });
 ```
 
- 설명을 위해 코드을 세 부분으로 주석달았다.
+ 설명을 위해 코드을 세 부분으로 나눠서 주석을 달았다.
 
  part 1에서 express 모듈을 로딩한다.
- 그리고 인스턴스를 하나 생성해서 app 변수에 저장한다.
- 뒤에 app 변수를 가지고 서버를 세팅하고 구동시킬 것이다.
+ 그리고 인스턴스를 하나 생성해서 `app` 변수에 저장한다.
+ 뒤에 `app` 변수를 가지고 서버를 세팅하고 구동시킬 것이다.
 
  part 2에서는 기본 라우팅 설정을 했다.
- 도메인에 접속하면 Hello World! 문자열을 출력하도록 했다
+ 도메인에 접속하면 "Hello World!" 문자열을 출력하도록 했다
 
- part3에서는 listen() 함수로 서버를 구동한다.
+ part3에서는 `listen()` 함수로 서버를 구동한다.
  3000번 포트를 사용할 것이며 서버가 구동되는 동시에 "Express app listeing ..." 문구가 서버측 콘솔에 찍힐 것이다.
 
- 서버 구동을 위해 아래 명령어로 노드 어플리케이션을 실행시키자.
+명령어로 노드 어플리케이션을 실행 시켜보자.
 
 ```bash
 $ node server/app
@@ -65,11 +65,14 @@ Example app listening on port 3000!
 
 웹브라우져를 열고 localhost:3000 주소로 접속해 보자.
 
-## npm 으로 간단히 서버 구동하기
+![](/assets/imgs/2016/lecture-todomvc-angular-13-result1.png)
+
+
+## NPM으로 간단히 서버 구동하기
 
 이전에 npm의 기능중 서버 구동기능을 언급했다.
 package.json에 npm 명령어를 설정할 수 있다.
-아래 처럼 start 스크립트를 추가해보자.
+아래처럼 start 스크립트를 추가해보자.
 
 ```json
 {
@@ -82,12 +85,6 @@ package.json에 npm 명령어를 설정할 수 있다.
 그리고 터미널에 `npm start`를 실행하면 동일하게 노드 서버가 구동된다.
 앞으로는 npm start으로 서버를 구동시키자.
 
-![](/assets/imgs/2016/lecture-todomvc-angular-13-result1.png)
-
-
-
-
-
 
 관련글: