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

angularjs-large

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

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

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

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

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

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

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

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

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

이 코드가 무엇을 하는가?

ng-app 속성

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

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

angular.js 스크팁트 태그

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

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

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

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

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

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

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

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

부트스트래핑 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에 추가해보고 결과를 확인해 봅시다.

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