Tag Archives: Angular

AngularJS PhoneCat 튜토리얼 앱 – 부트스트래핑

angularjs-large

튜토리얼중에 이 단계에서는 AngularJS PhoneCat 어플리케이션의 가장 중요한 소스코드들에 대해 알아보게 됩니다. 또한 당신은 angular-seed 를 번들로 포함하고 있는 개발중인 서버를 시작하고 그것을 브라우저에서 실행해보는것을 배울 수 있게 됩니다.

이글을 계속해서 읽어보기전에 앞서 당신은 먼저 개발환경을 세팅하고 필요한 의존성 있는 모듈들을 설치해야 합니다. 이러한 내용은 이전에 작성한 글 [AngularJS PhoneCat 튜토리얼 앱 – 개요]를 확인하시기 바랍니다.

먼저 기존에 Github 저장소에서 클론 받은 angular-phonecat 디렉토리에서 다음의 명령을 실행합니다.

$ git checkout -f step-0

이 명령은 당신의 워크스페이스를 튜토리얼의 스텝 0 상태로 초기화 해줍니다.

앞으로 이 튜토리얼을 진행함에 따라 당신은 해당 튜토리얼의 순번에 맞는 숫자를 가진 태그로 변경하는 작업을 반복하게 될 것입니다. 이 과정은 당신이 이 로컬 저장소에서 작업한 내용이 사라지는 변화를 야기할 수 있습니다.

이전에 다음의 명령을 실행한 적이 없다면 다음의 명령을 실행하여 의존성 있는 모듈들을 설치하도록 합니다.

$ npm install

어플리케이션을 실행하여 브라우저에서 직접 확인해보고 싶다면 새로운 별개의 터미널/커맨드라인창을 실행하여 npm start 명령을 실행하여 웹서버를 구동하시기 바랍니다. 웹서버가 정상적으로 실행되었다면 새로운 브라우저 창을 열어 http://localhost:8000/index.html 를 열어서 확인해볼 수 있습니다.

만약에 이미 master 브랜치 상태에서 앱을 구동하여 웹브라우저에서 실행해 보았다면 이전의 마스터 버전이 캐시되어 계속해서 보여질 수 있습니다. 이 경우 웹브라우저에서 단지 새로고침을 하는것으로 변경된 웹페이지를 확인할 수 있습니다.

이제 웹브라우저에서 페이지의 내용을 확인할 수 있습니다만 별로 흥미를 끄는 결과는 아닐것입니다. 하지만 괜찮습니다(?). 이 HTML 페이지는 “Nothing here yet!” 를 출력할 것이며 아래와 같은 방법으로 페이지가 만들어지게 됩니다. 여기서 앞으로 우리가 진행하기 위해 알아야 하는 몇가지 핵심이 되는 Angular 엘리먼트를 확인할 수 있습니다.

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <script src="bower_components/angular/angular.js"></script>
  </head>
  <body>

    <p>Nothing here {{'yet' + '!'}}</p>

  </body>
</html>

이 코드가 무엇을 하는가?

ng-app 속성

<html ng-app>

이 ng-app 속성은 ngApp 이라는 이름의 Angular 지시자를 나타냅니다. (Angular는 이러한 속성의 표기법으로 케밥케이스(kebab-case, 중간에 하이픈-을 사용하는 방법)를 사용하며 여기에 대응하는 구현부의 지시자는 카멜케이스(camelCase, 중간에 대문자를 사용하는 방법)를 사용합니다. 이 지시자는 HTML 앨리먼트가 Angular 로 하여금 우리의 어플리케이션의 루트 어플리케이션으로 인식하도록 해줍니다. 이 지시자는 개발자로 하여금 Angular가 HTML 페이지 전체 혹은 그 일부분만을 AngularJS 어플리케이션으로 다룰지를 알려주는 역할을 합니다.

ngApp 지시자에 대해 서 많은것을 알아보고 싶다면 API 레퍼런스문서를 참고하시기 바랍니다.

angular.js 스크팁트 태그

<script src="bower_components/angular/angular.js"></script>

이 코드는 이 지시자가 포함된 HTML 페이지가 모두 다운로드 되었을 때 실행되어야 하는 콜백을 등록하는 작업을 수행하는 angular.js 스크립트를 다운로드 하도록 하는 코드입니다. 이 콜백이 실행되면 Angular는 ngApp 지시자를 검색합니다. Angular가 이 지시자를 찾는다면 이 ngApp 지시자가 정의된 DOM 엘리먼트를 루트로 하는 어플리케이션을 초기 구동(Bootstrap) 하게 됩니다.

어플리케이션을 부트스트래핑 하는 과정에 대해 더 많은것을 알아보고 싶다면 개발자 가이드의 Bootstrap 섹션을 참고하시기 바랍니다.

중복 중괄호 사용을 통한 표현식 바인딩

Nothing here {{'yet' + '!'}}

이 데모에서 Angular 템플릿에서 사용가능한 두가지 핵심 기능을 알 수 있습니다.

  • 중복 중괄호 사용을 통한 바인딩: {{ }}
  • 이 바인딩 내부에서 사용가능한 간단한 표현식: ‘yet’ + ‘!’

이 바인딩은 Angular가 내부의 표현식을 해석하고 그 결과를 바인딩이 위치한 DOM 의 일부에 삽입하는 역할을 합니다. 이 튜토리얼을 계속 진행하면서 알 수 있겠지만 한번의 삽입뿐만 아니라 이 표현식의 결과값이 바뀔때마다 바인딩은 효율적이고 지속적으로 그 결과를 반영합니다.

Angular 표현식은 Angular에 의해 해석 가능한 형태의 자바스크립트 코드와 같은 형태를 가지고 있으며 이때에 Angular는 글로벌 컨텍스트(window) 스코프 안이 아닌 현재의 모델 스코프의 컨텍스트안에서 동작을 하게 됩니다.

기대했듯이 이 템플릿이 Angular에 의해서 처리되면 다음과 같은 텍스트를 가진 HTML 페이지가 만들어집니다.

Nothing here yet!

부트스트래핑 Angular 어플리케이션

ngApp 지시자를 사용함으로 써 Angular 어플리케이션이 초기 구동하는것을 자동으로 실행되도록 하는것은 매우 쉽고 대부분의 상황에 적절합니다. 하지만 스크립트 로더를 사용하는 경우등의 고급 사용의 경우 명령형/수작업 을 통해 어플리케이션을 초기 구동할 수 있습니다.

부트스트랩 페이즈가 진행되는 동안 발생하는 중요한 3가지가 있습니다.

  • 의존성 주입을 위한 인젝터(Injector) 가 생성됩니다.
  • 이 인젝터는 우리 어플리케이션의 모델의 컨텍스트가 되어줄 루트 스코프를 생성합니다.
  • Angular는 ngApp 루트 앨리먼트로부터 시작하는 DOM을 “컴파일”하며 이 과정에서 발견된 지시자들과 바인딩을 처리합니다.

어플리케이션이 구동되면, 이후는 브라우저로부터 모델을 변화를 야기할 이벤트(마우스 클릭, 키 입력, HTTP 응답)를 기다리게 됩니다. 이러한 이벤트가 발생하면 Angular는 이 이벤트가 모델들중에 어떤 변화를 일으키는지를 찾아보고 변화를 찾았다면 Angular는 모든 영향을 끼칠 바인딩을 갱신함으로 써 뷰에 변화를 발생시킵니다.

우리 어플리케이션의 구조는 매우 단순합니다. 템플릿은 하나의 지시자와 하나의 정적 바인딩을 포함하고 있고 우리의 모델은 비어있습니다. 이제 이것을 변경해 봅시다!

angularjs-phonecat-tutorial-01

작업 디렉토리안의 이 모든 파일들은 무엇인가요?

당신의 작업 디렉토리 안의 대부분의 파일들은 일반적으로 새로운 AngularJS 프로젝트를 시작할때 일반적으로 사용되는 angular-seed 프로젝트로부터 온 것입니다. 이 기초 프로젝트는 AngularJS 프레임워크가 기본적으로 설정 되어있으며(Bower를 통해 app/bower_components/ 안에 생성) 일반적인 웹 어플리케이션을 개발을 하거나 테스트하는데에 필요로 하는 툴들을 포함하고 있습니다. (npm을 통해 실행)

이 프로젝트에서는 튜토리얼의 목적을 위해 angular-seed 프로젝트로부터 몇가지 수정이 있었습니다.

  • 예제 앱 삭제
  • 사용하지 않는 의존 모듈들 삭제
  • 스마트폰 이미지들을 /app/img/phones 디렉토리 안에 추가
  • 스마트폰 데이터 파일들을 /app/phones/ 디렉토리 안에 추가
  • Twitter Bootstrap 의존성을 bower.json 파일에 추가

실험

다음의 수학적 연산을 하는 새로운 표현식을 index.html에 추가해보고 결과를 확인해 봅시다.

<p>1 + 2 = {{1 + 2}}</p>

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

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