AngularJS PhoneCat 튜토리얼 앱 – 개요

이 문서는 AngularJS 공식 사이트의 PhoneCat Tutorial App 문서의 내용을 제 임의대로 번역한 글입니다. Mac 환경에서 작성되어 원문과는 차이가 있을 수 있습니다.


AngularJS를 소개할 수 있는 훌륭한 방법중에 하나는 이 튜토리얼을 통하여 Angular 웹 어플리케이션을 구축하는것을 안내하는 방법이라 생각합니다. 지금부터 만들어보려는 앱은 다양한 안드로이드 디바이스의 카탈로그를 보여주고 필터 기능을 사용하여 이중에 당신이 관심 있는 디바이스만을 볼 수 있고 그 디바이스의 상세 정보를 볼 수 있는 앱입니다.

angular-phonecat-start

이 튜토리얼을 따라가면 네이티브 익스텐션 혹은 플러그인을 사용하지 않고 Angular가 어떻게 브라우저를 더 멋지게 만들어 주는지를 볼 수 있습니다.

  • 클라이언트 사이드의 데이터 바인딩 기능을 사용하여 사용자의 액션에 즉시 변화하는 데이터의 동적 뷰를 만드는 방법을 예제를 통해서 확인합니다.
  • Angular가 DOM을 직접 조작할 필요 없이 당신의 데이터를 동기화 하는 방법으로 당신의 뷰를 유지하는것을 방법을 확인합니다.
  • Karma와 Protractor를 사용하여 당신의 웹 어플리케이션을 더욱 쉽고 나은 방법으로 테스트 하는 방법을 공부합니다.
  • 의존성 주입과 서비스를 사용하여 손쉽게 당신의 어플리케이션을 통해 데이터를 가져오는 일반적인 웹 작업을 수행하는 방법을 공부합니다.

당신이 이 튜토리얼을 완료할 때 당신은 다음과 같은 것이 가능해질것입니다.

  • 최근의 모든 브라우저에서 동작하는 동적인 어플리케이션을 만들 수 있습니다.
  • 데이터 바인딩을 사용하여 당신의 데이터 모델을 당신의 뷰에 연결합니다.
  • Karma를 이용하여 유닛 테스트를 만들고 실행할 수 있습니다.
  • Protractor를 사용하여 종단간 테스트(End-to-End Tests)를 만들고 실행할 수 있습니다.
  • 어플리케이션 로직을 템플릿으로부터 컴포넌트(Components)와 컨트롤러(Controller)로 이동시킬 수 있습니다.
  • Angular 서비스를 사용하여 서버로부터 데이터를 가져올 수 있습니다.
  • ngAnimate 모듈을 사용하여 당신의 어플리케이션에 애니메이션을 적용할 수 있습니다.
  • 더 큰 프로젝트에 적합한 모듈형 방식으로 당신의 Angular 어플리케이션을 설계할 수 있습니다.
  • 리소스를 확인하여 AngularJS에 대해 더 자세히 알아보십시오.

이 튜토리얼은 유닛 테스트 및 종단간 테스트를 포함한 간단한 어플리케이션을 개발하는 전체적인 과정을 안내하고 있습니다. 각 단계의 마지막에 있는 실험 부분은 당신이 AngularJS와 어플리케이션 개발에 대해 더 많은것을 배울 수 있도록 제안합니다.

당신은 여기서 안내하는 모든 튜토리얼을 단 몇시간만에 끝낼 수도 있고 자세히 파고 들어보며 정말 즐거운 하루를 보낼 수도 있을것이라 생각합니다. AngularJS에 대한 더욱 간단한 소개글을 보고 싶다면 Getting Started 문서를 확인해 보시기 바랍니다.

튜토리얼을 진행하기 위한 환경 설정하기

Git 설치하고 튜토리얼 받기

튜토리얼은 Github에 등록이 되어있으며 Git 명령을 통해 당신의 로컬 머신에 클론하여 실행해 보는 과정으로 진행됩니다. 이 문서에서는 Git을 설치하는 과정은 기술하지 않습니다. Git을 사용할 수 있는 환경이 되어있다면 다음과 같은 명령을 사용하여 angular-phonecat 저장소를 클론 받습니다.

$ git clone --depth=16 https://github.com/angular/angular-phonecat.git

이 명령을 실행하면 명령을 실행한 디렉토리에 angular-phonecat 디렉토리가 생성됩니다. 여기서 보여지는 –depth=16 명령을 가장 최근의 16개의 커밋만을 Pull 받도록 하는 명령입니다. 이 명령을 통해 다운로드 받아야 하는 커밋의 양을 줄이고 더욱 빨리 실행될 수 있도록 할 수 있습니다.

이제 다운받은 프로젝트의 디렉토리 안으로 진입하여 보도록 하겠습니다.

$ cd angular-phonecat

이제 튜토리얼을 진행할 모든 준비가 완료되었으며 앞으로 사용해보게될 모든 명령들이 이 angular-phonecat 디렉토리에서 실행하게 됩니다.

Node.js 설치하기

미리 설정된 로컬에서 구동가능한 웹서버와 테스트 툴을 실행하기 위해서는 버전4 이상의 Node.js가 필요합니다. 역시 설치과정은 생략하도록 하겠습니다. Homebrew를 사용하시면 간단하게 설치가 가능합니다.

당신의 머신에 Node.js 가 정상적으로 설치가 되었다면 이제 다음과 같은 간단한 명령으로 모든 의존성 있는 툴들을 다운로드 할 수 있습니다.

$ npm install

이 명령은 angular-phonecat 디렉토리 안의 package.json 파일을 읽고 그 안에 적혀 있는 다음과 같은 툴들을 node_modules 디렉토리에 다운받습니다.

  • Bower : 클라이언트 사이드 코드 패키지 관리자
  • Http-Server : 심플 로컬 정적 웹서버
  • Karma : 유닛 테스트 러너
  • Protractor : 종단간 테스트 러너

npm install 명령을 실행함으로써 Bower를 이용하여 자동으로 AngularJS 프레임워크를 app/bower_components 디렉토리 안에 다운받게 됩니다. 이러한 과정을 통해 알 수 있듯이 angular-phonecat 튜토리얼 프로젝트는 프로젝트를 셋업하고 관련된 유틸리티를 다운받는데 npm 스크립트를 사용합니다. 이 말은 즉 이 프로젝트를 구동하기 위해 이러한 유틸리티가 당신의 시스템에 미리 설치되어있을 필요가 없음을 의미합니다.

이 프로젝트는 개발을 진행하는 동안에 일반적으로 실행해야 하는 작업들을 손쉽게 수행할 수 있도록 도와주는 헬퍼 스크립트를 제공하고 있습니다.

  • npm start : 로컬 개발 웹서버를 시작합니다.
  • npm test : Karma 유닛 테스트 러너를 시작합니다.
  • npm run protractor : Protractor 종단간 테스트를 시작합니다.
  • npm run update-webdriver : Protractor가 필요로 하는 드라이버들을 설치합니다.

헬퍼 툴 설치하기 (선택사항)

Bower, Http-Server, Karma 그리고 Protractor와 같은 모듈들은 스스로 실행가능한 모듈들입니다. 당신의 로컬 시스템에 글로벌하게 설치할 수 있으며 이경우 터미널, 커맨드 프롬프트에서 즉시 실행이 가능해집니다. 이 튜토리얼을 진행함에 있어 이러한 명령들을 글로벌하게 설치할 필요는 없지만 당신이 이러한 명령들을 즉시 실행해야 할 필요가 있다면 다음과 같은 형태로 글로벌하게 설치할 수 있습니다.

$ sudo npm install -g bower

설치가 정상적으로 되었다면 다음과 같이 설치한 모듈을 바로 실행할 수 있습니다.

$ bower install

개발 웹서버 실행하기

Angular 어플리케이션은 순수하게 클라이언트 사이드의 코드이기 때문에 웹브라우저에서 파일을 직접 열어 실행해보는것도 가능합니다만 HTTP 웹서버를 통해서 실행해 보는것이 좋습니다. 특히 보안상의 이유로 대부분의 요즘의 브라우저들은 파일시스템에서 직접 로드된 경우 자바스크립트의 실행을 허용하지 않습니다.

이 angular-phonecat 프로젝트는 심플한 정적 웹서버가 포함되어있으며 어플리케이션을 개발하는 동안에 호스팅을 할 수 있습니다. 웹서버를 실행하기 위해서는 다음의 명령을 사용하면 됩니다.

$ npm start

이것은 로컬의 웹서버가 구동되며 8000 번 포트를 리슨하도록 합니다. 이제 당신은 http://localhost:8000/index.html 로 접속하여 어플리케이션에 접속해 볼 수 있습니다.

만약 웹 어플리케이션을 다른 아이피 혹은 포트로 구동하고 싶다면 package.json 파일의 start 항목에 있는 -a 및 -p 옵션의 설정을 변경하면 됩니다. 이 값을 변경하였다면 e2e-tests/protractor.conf.js 파일의 내용중에 baseUrl도 수정하여야 합니다.

유닛 테스트 실행하기

우리는 유닛 테스트를 통해 우리의 어플리케이션안에 있는 자바스크립트 코드가 정상적으로 수행되는데에 문제가 없는지 확인할 수 있습니다. 유닛테스트는 어플리케이션을 작은 격리된 부분으로 나누어 테스트를 수행하는데에 초점을 맞춥니다. 이 유닛 테스트가 정의 되어있는 파일(스펙)은 어플리케이션 코드와 함께 나란히 정의되어 있습니다. 이러한 방법은 이 파일들을 찾기 쉽고 코드들의 변경 사항을 따라갈 수 있도록 해줍니다. 이는 리펙토링 작업등을 통해 우리의 어플리케이션의 구조가 개선될 때 소스코드와 함께 테스트도 함께 이동될 수 있도록 도움을 줍니다.

angular-phonecat 프로젝트에는 어플리케이션의 유닛 테스트를 위해 Karma가 미리 설정되어있습니다. 간단하게 다음과 같은 명령으로 테스트를 수행할 수 있습니다.

$ npm test

위의 명령은 Karma 유닛 테스트 러너를 시작하게 합니다. Karma는 프로젝트 루트 디렉토리에 위치한 karma.conf.js 파일을 읽어들입니다. 이 설정 파일의 내용을 보면 다음과 같은 내용을 확인할 수 있습니다.

  • 크롬과 파이어폭스 브라우저를 실행하여 Karma에 연결하게 됩니다.
  • 이 브라우저들을 통해 모든 유닛 테스트를 실행합니다.
  • 이 테스트들의 결과를 실행한 터미널/커맨드 라인 창에 출력합니다.
  • 프로젝트의 모든 자바스크립트 파일들을 감시하며 변경이 발생할 경우 테스트를 재실행합니다.

이 유닛 테스트를 백그라운드에 항상 켜둔채로 놔두어도 좋습니다. 당신이 작업중인 코드가 유닛 테스트를 통과하였는지 즉각적으로 피드백을 줄것입니다.

종단간(End-to-End) 테스트 실행하기

우리는 종단간 테스트를 통해 우리의 어플리케이션의 모든 기능이 기대한대로 정상 동작하는것을 확인할 수 있습니다. 종단간 테스트는 모든 클라이언트 어플리케이션, 특히 뷰가 정상적으로 보여지고 동작하는것을 테스트하기 위해 만들어졌습니다.

이것은 실제 사용자가 브라우저에서 실제로 구동되는 어플리케이션과 상호작용 하는것을 시뮬레이션 함으로써 이루어집니다. 이러한 종단간 테스트는 e2e-tests 디렉토리 안에 정의되어있습니다.

이 angular-phonecat 프로젝트는 Protractor 를 사용하여 어플리케이션의 종단간 테스트를 수행하도록 정의되어있습니다. Protractor는 드라이버 셋에 의존하여 브라우저와 상호작용을 하게 됩니다. 다음의 명령을 사용하여 이러한 드라이버들을 설치할 수 있습니다.

$ npm run update-webdriver

하지만 이 명령을 직접 실행할 필요는 없습니다. 튜토리얼에서 제공하는 프로젝트에 종단간 테스트를 실행할 때 자동으로 실행이 되도록 설정이 되어있습니다.

Protractor는 실행중인 어플리케이션과 상호작용을 함으로써 동작하므로 웹 서버를 시작할 필요가 있습니다.

$ npm start

이렇게 웹서버가 정상적으로 실행이 되었다면 터미널/커맨드라인 창에서 다음의 명령을 사용하여 Protractor 테스트 스크립트를 실행할 수 있습니다.

$ npm run protractor

Protractor는 e2e-tests/protractor.conf.js 파일로부터 설정을 읽어들이게 됩니다. 이 설정파일의 내용을 보면 다음의 내용을 알 수 있습니다.

  • 크롬 브라우저를 실행하고 그 어플리케이션에 연결합니다.
  • 종단간 테스트를 이 브라우저를 통해 실행합니다.
  • 이러한 테스트의 결과를 터미널/커맨드라인 창으로 출력합니다.
  • 브라우저를 닫고 종료합니다.

이러한 종단간 테스트는 당신이 HTML 뷰를 변경하였거나 어플리케이션이 전체적으로 정상적으로 동작하고 있는지 확인하고 싶을 때 유용하게 사용할 수 있습니다. 이 테스트는 새로운 커밋을 원격지 저장소에 Push 하기 전에 실행하는것이 일반적입니다.

참고 : https://docs.angularjs.org/tutorial