PhoneCat Tutorial App 1

자... 이제부터 AngularJS에 대한 공략을 시작해봅시다.
이번주는 PhoneCat Tutorial App에 대한 번역을 시작하겠습니다.
어설픈 번역이겠지만, 공부한다는 의미로 진행하는 것이니.. 잘 부탁드립니다. 시작!!

PhoneCat Tutorial App

AngularJS를 설명하는 가장 좋은 방법은 AngularJS로 기 제작한 웹 응용프로그램의 구성을 가지고 
튜토리얼을 진행하는 것입니다.
앞으로 여러분들이 만들 이 앱은 안드로이드 폰 목록을 볼 수 있는 카달로그 이며, 
관심이 있는 장비만 필터링 해서 세부사항까지 볼 수 있는 기능을 가지고 있습니다. 
네이브티 확장 혹은 플러그인의 추가 설치 없이 Angular를 브라우저를 보다 스마트하게 만들 수 있는 방법을 볼 수 있는
튜토리얼을 따라 해 보시길 바랍니다.

- 사용자의 액션에 대한 응답을 즉각적으로 변경해주는 다이나믹한 데이터 뷰를 구성하기 위해
         클라이언트 측 데이터 바인딩을 사용하는 방법에 대한 예제를 확인해보세요.

- Angular가 DOM 조작의 필요 없이, 여러분들의 데이터와 함께 당신의 뷰를 동적으로 유지하는 방법을 확인해 보세요.

- Karma 와 Protractor를 가지고 당신의 웹 어플리케이션을 보다 쉽고, 나은 방법으로 테스트하는 것을 배워보세요.

- 의존성 주입과 공통 웹 업무들, 예를 들면 여러분들의 어플리케이션 안에서의 데이터를 얻은 것을 보다 쉽게
        만들어 주는 서비스들을 배울 수 있습니다.

여러분들이 이 튜토리얼을 마쳤을 땐, 아래와 같은 것들을 할 수 있을 것입니다.

- 모든 최신 브라우저상에서 작동하는 동적인 어플리케이션을 만들 수 있습니다.

- 여러분들의 View들에 여러분들의 데이터를 묶는 데이터 결합을 사용 할 수 있습니다. 

- Karma 를 사용하여 유닛 테스트를 가동하고 만들수 있습니다.

- Protractor 를 사용하여 끝에서 끝까지 테스트를 가동하고 만들수 있습니다.

- 템플릿의 외부와 컨트롤러 안에 어플리케이션 로직을 이동 할 수 있습니다.

- Angular 서비스들을 이용하여 서버로부터 데이터를 얻을 수 있습니다.

- ngAnimate를 사용하여, 여러분들의 어플리케이션에 애니메이션을 적용할 수 있습니다.

- AngularJS에 관해 자세한 학습을 위해 리소스를 식별할 수 있습니다. 

이 튜토리얼은 글과 유닛의 동작 그리고 end-to-end 테스트를 포함하여 간단한 어플리케이션의 구축의 완벽한 단계를
통해 여러분들을 가이드 합니다.
 각 단계의 끝에서의 실행은 AngularJS 와 여러분들이 빌드하고 있는 어플리케이션에 관해서 
좀 더 배우고자 하는 당신을 위해 제안을 제공합니다. 
여러분들은 몇 시간 내에 전체 튜토리얼을 체험 할 수 있습니다. 
또는 여러분들은 정말로 그것에 파고 들어 행복한 날을 보내기를 원하고 있을지도 모릅니다.
AngularJS에 대한 보다 짧은 소개를 찾고 있다면, Getting Started 문서를 확인하세요.

Get Started.

이 페이지의 나머지는 개발을 위해 여러분들의 로컬 컴퓨터에 설치 할 수 있는 방법에 대해 설명합니다.
만약 당신이 튜토리얼을 읽기만 할 것이라면, 바로 첫 번째 단계로 이동하면 됩니다.

Working with the code.

여러분들은 이 튜토리얼을 가지고 따라 할 수 있거나, 
여러분들 본인의 컴퓨터의 편안함안에서 코드를 작성 할 수 있습니다..
이 방법은, 당신이 직접 AngularJS 코드를 작성하는 연습을 할 수 있고, 
또한 추천하는 테스트 툴들을 사용 할 수 있습니다.
이 튜토리얼은  소스 코드 관리를 위해 GIT 버전 관리 시스템의 사용에 의존하고 있습니다.
git의 몇몇의 명령어 동작 과 설치하는 방법 이외에 GIT에 관해서 당신은 어떤 것도 알 필요는 없습니다.

Install Git

http://git-scm.com/download 에서 Git를 다운로드 와 설치를 할 수 있습니다.
한번 설치했으면, git 명령 라인 툴에 접속해 보는 것이 좋습니다.
여러분들이 Git을 사용하는데 필요로 한 명령어는 아래와 같습니다

git clone … : 원격저장소를 당신의 로컬 컴퓨터에 복제한다.
git checkout … : 특정 브런치 혹은 수정하기 위해 코드의 태그된 버전을 체크아웃한다.

*hack on : fix a computer program piecemeal until it works. 

Download angular-phonecat

Github에 위치한 angular-phonecat을 아래 명령을 작성함에 따라 복제 합니다.

Git clone –depth=14 https://github.com/angular/angular-phonecat.git

이 명령은 당신의 현재 디렉토리에 angular-phonecat 디렉토리를 생성하게 됩니다.
--depth=14 옵션은 Git에게 가장 최근 14 커맨트만 가져오라고 말하는 것입니다.
이것은 보다 작고 빠른 다운로드를 만들게 되겠지요.
여러분들의 현재 디렉토리에서 angular-phonecat으로 이동합니다.

cd angular-phonecat

튜토리얼 교육은, 지금부터, 당신은 모든 명령어를 angular-phonecat 디렉토리에서 동작하고 있다고 생각하면 됩니다.

Install Node.js

만일 미리 설정된 로컬 웹 서버와 테스트 툴을 돌리길 원한다면, 그땐 당신은 Node.js v0.10.27 이상 버전이
또한 필요할 것입니다.
http://node.org/download/ 에서 Node.js 설치 프로그램을 다운로드 받으시길 바랍니다.

   

아래 명령어를 통해 설치된 Node.js의 버전을 체크하시길 바랍니다. 

Node --version

Debian 기반의 배포판에서, node 라고 불리는 다른 유틸리티와 함께 이름 충돌이 있습니다. 
해결방법은 node에서 nodejs로 이름을 바꾸는 nodejs-legacy apt 패키지를 설치하는 것입니다.

apt-get install nodejs-legacy
nodejs –version

여러분의 로컬 환경에 다른 버전의 node.js를 동작하기를 원한다면 NVM (Nodejs Version Management)설치를 고려 해 보시길 바랍니다.
당신이 당신 컴퓨터에 Node.js를 설치했다면, 아래 명령어를 통해 툴 의존성을 다운로드 할 수 있습니다.

npm install

이 명령어는 아래 툴들을 node_modules 디렉토리에 다운로드 할 것입니다.

- Bower – client-side code package manager

- Http-server – simple local static web server

- Karma – unit test runner

- Protractor – end to end (E2E) test runner

  

npm install이 동작하면서 자동적으로 app/bower_components 디렉토리 안에 Angular framework를 다운로드 하기
위해 bower를 사용할 것입니다.
angular-phonecat 프로젝트는 npm 스크립트를 통해 이런 유틸리티를 설치하고 작동하는 설정이 라는 것을 기록해 두세요.
이건 튜토리얼을 따르기 위한 여러분들의 시스템 위에서 글로벌적으로 설치 되어진 이런 유틸리티들의 어떤 것을 갖지 않아야 한다는 것을 의미 한다. 
(더 많은 정보를 위해 아래 설치 도움 툴을 보시길 바랍니다.)
이 프로젝트는 아래 사항을 개발하는 동안 필요한 공통 업무를 쉽게 작동하기 위해 npm helper 스크립트 몇 개가 기 설정되어 있다.

- Npm start : 로컬 개발 웹서버 시작

- Npm test : Karma 유닛 테스트 런너 시작

- Npm run protractor : Protractor E2E 테스트 작동 

- Npm run update-webdriver : Protractor에 필요한 드라이버 설치

Install Helper Tools (optional)

Bower, 웹 서버, Karma 그리고 Protractor 모듈은 또한 범용적으로 설치 되어 질 수 있고 터미널이나 명령 프롬프트에서 바로 실행 할 수 있는 실행 파일들입니다.
 이 튜토리얼을 따르기 위해 이것을 할 필요는 없으나, 만약 이것들을 바로 동작하도록 원한다면, sudo npm install –g …를 사용해서 글로벌적으로 이 모듈들을 설치 할 수 있습니다.

Sudo npm install –g bower

(윈도우에서 작동할 경우 sudo를 생략한다.)

아래와 같이 bower를 바로 동작 할 수 있습니다.

bower install

Running Development Web Server

Angular applications가 순수하게 클라이언트 사이트 코드 일 경우, 파일시스템으로부터 바로 웹 브라우저안에서 열리는 것이 가능하다. 그건 HTTP 웹 서버로부터 제공되는 것보다 훨씬 낫다고 합니다.)
특히, 보안상의 이유로, 대부분의 최근 브라우저들은 자바스크립트의 서버 요청을 만드는 것을 허락하지 않을 것이다, 만약 페이지가 파일시스템으로부터 바로 로드 되어진다면.. angular-phonecat 프로젝트는 개발하는 동안 어플리케이션을 호스팅하기 위해 단순한 정적 웹 서버로 구성되어 있다. 자~ 웹서버를 가동해보자.

npm start

 

이건 여러분의 로컬 컴퓨터에 8000번 포트로 리스닝하고 있는 로컬 웹 서버를 만들 것입니다. 
(다른 아이피와 포트로 서비스하고자 한다면, package.json 안에 있는 start 스크립트를 수정해요.
-a 에 주소를 그리고 –p에 포트를 세팅 할 수 있습니다.)

 

Running Unit Tests

우리는 우리의 어플리케이션안의 자바스크립트 코드가 정확하게 작동하고 있는지 확실하게 하기 유닛 테스트를 사용합니다.
유닛 테스트는 어플리케이션의 작은 독립적인 부분에 대한 테스트에 집중합니다.
유닛 테스트는 test/unit 디렉토리에서 유지되어 집니다.
Angular-phonecat 프로젝트는 어플리케이션에 유닛테스트를 작동하기 위해 Karma를 사용하는 것으로 설정되어져 있습니다.
Karma를 아래 명령으로 시작해봅시다.

Npm test 

이건 Karma 유닛 테스트 러너를 시작할 것입니다.
Karma 는 test/karma.conf.js 안에 설정 파일을 읽을 겁니다.
설정 파일은 Karma에게 아래와 같은 내용을 알려줍니다.

- 크롬 브라우저를 열고, 카르마에게 연결합니다.

- 이 브라우저 안에 모든 유닛 테스트를 실행 합니다.)

- 윈도우 터미널 혹은 커맨드 창안에 이 테스트들의 결과를 리포트 합니다.

- 모든 프로젝트의 자바스크립트 파일을 감시하고, 이 파일들 중에 어떤 것이든 변경되면, 
        언제라도 테스트는 재가동합니다.

여러분에게 여러분들이 코드상에서의 작업을 하는 동안 여러분들의 소스변경이 유닛 테스트를 지나가든지 아닌지에 관련한 즉각적인 피드백을 줄 것이므로, 백그라운드 상에서 항상 이 것이 작동되도록 놔두는 것이 좋습니다.

 

Running End to End Tests

우린 예상대로 어플리케이션이 동작하는지 확인하기 위해 E2E 테스트를 사용한다.
 E2E 테스트는 전체 클라이언트 측 어플리케이션, 특히 뷰 들이 보여지고 있는 것과 정확하게 작동하는지에 대한 테스트를
하기 위해 디자인되었습니다. 
브라우저상에서 진짜 어플리케이션이 작동하는 것과 함께 진짜 사용자 인터렉션을 시뮬레이션 하는 것에 의합니다.
test/e2e 디렉토리 안에 E2E 테스트가 유지 됩니다. 
Angular-phonecat 프로젝트는 어플리케이션을 위한 E2E 테스트를 작동시키기 위해 Protractor를 사용하기 위해
설정 되어 있습니다.
Protractor는 브라우저와 함께 상호작용하기 위한 그것을 허락하기 위한 드라이버들의 세트에 의존되어 있다. 
아래 명령어를 통해 이 드라이버들을 설치 할 수 있습니다. : 

Npm run update-webdriver

(여러분들은 이걸 딱 한번 하는 것이 필요로 하는 것이 좋습니다.)
Protractor가 동작하는 어플리케이션과 함께 상호작용하는 것에 의해 동작한 이후, 우리는 우리 웹서버를 시작하는 것이
필요합니다.

npm run protractor

Protractor는 test/protractor-conf.js 에서 설정 파일을 읽을 것입니다.
설정 파일은 아래와 같이 Protractor에게 요청합니다. 

- 크롬 브라우저를 열고, 어플리케이션에 연결합니다. 

- 이 브라우저에서 End to End 테스트를 실행 합니다.

- 이 테스트 결과 리포트를 터미널,커맨드 창에 보여준다.

- 브라우저를 닫고 나간다. 

여러분이 HTML view들에 변화를 만드는 때 혹은 모두가 정상적으로 동작하는 어플리케이션으로 체크하기를 원하는 언제라도 End To End 테스트를 작동하는 것이 좋다.
원격 저장소에서 변경에 대한 새로운 커밋이 푸쉬하기 전에 End to End 테스트 동작하는 것은 매우 일반적입니다.