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 저장소를 클론 받습니다.

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

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

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

Node.js 설치하기

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

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

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

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

개발 웹서버 실행하기

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

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

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

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

유닛 테스트 실행하기

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

macOS Sierra 기준 Homebrew를 이용하여 APM 설치하기

macos-sierra-logo

이번에는 새로 출시된 macOS 시에라에서 Apache, PHP, MySQL을 설치하여 서비스로 구동하는 과정을 정리해보겠습니다. 이 모든작업들 역시 Homebrew를 사용하면 손쉽게 해낼 수 있습니다. 우선 이 글은 Homebrew가 정상적으로 설치되어있는 맥이 준비되어있다고 가정하고 작성되었습니다.

우선 설치할 것들에 대한 준비를 위해 tap 명령을 사용하여 별도의 저장소를 추가하도록 합니다. 이 명령은 Homebrew의 master 저장소에 없는 패키지들을 사용할 수 있도록 해줍니다.

MariaDB 설치

MySQL 대신에 제가 선호하는 MariaDB를 설치하도록 하겠습니다. 다음의 명령을 사용하여 매우 간단하게 설치할 수 있습니다.

설치가 완료되면 다음의 명령을 수행하여 초기에 필요한 기본 디비 구성을 할 수 있습니다.

이제 준비가 끝났으니 MariaDB를 서비스 형태로 구동해 보겠습니다.

여기까지만 진행하면 익명 상태로 mysql 명령을 사용하여 자유롭게 사용이 가능한 상태가 됩니다만 보안에 취약한 상태가 됩니다. 물론 개인 맥북에서 사용하고 계신 상태라면 크게 문제될 것은 없습니다만 mysql_secure_installation 명령을 사용하면 손쉽게 root 비밀번호를 포함한 보안 상태의 설정을 변경할 수 있습니다.

이제 mysql 명령을 사용하여 내가 결정한 비밀번호로 정상적으로 root 계정에 접속이 되는지 확인을 해봅시다.

Apache 설치하기

macOS 시에라에는 이미 아파치 2.4 버전이 기본 설치되어있습니다. 하지만 지금 설치하려는 Homebrew 패키지들에 의해서 관리하기에 복잡함이 생기므로 기본 설치된 아파치 2.4는 꺼두고 새로운 아파치를 설치해보도록 하겠습니다.

위와 같은 명령으로 기본 설치되어있는 아파치를 더이상 실행되지 않도록 변경할 수 있습니다. 이번에는 새로운 새로운 아파치 2.4 버전을 Homebrew를 이용하여 설치한 뒤 서비스로 구동하는 방법을 알아보겠습니다.

간단하게 설치가 완료되었습니다. 위에서 보여지는 –with-privileged-ports 옵션은 2014 이하의 낮은 숫자의 시스템 폰트를 사용하기 위해서 사용하는 옵션입니다. 이 옵션을 사용하여 80번 포트를 사용할 수 있으며 8080과 같은 포트를 사용하실 경우에는 굳이 이 옵션은 필요없습니다. 80번 포트를 사용하여 구동할 경우 보실 수 있듯이 brew services 명령 앞에 sudo를 붙이는것을 볼 수 있습니다.

아파치가 정상적으로 설치되었다면 사용하시는 브라우저에서 localhost로 접속하여 다음과 같은 화면이 뜨는것을 확인하실 수 있습니다.

install-apm-on-macos-sierra01

PHP 설치하기

이제 PHP를 설치해 보도록 하겠습니다. 선호하는 PHP 버전은 다양하게 있겠지만 저의 경우는 5.6을 설치해보도록 하겠습니다. brew search php 명령을 사용하여 사용가능한 PHP 버전을 검색해볼 수 있습니다. 이글을 쓰는 시점에 사용가능한 버전은 5.5 / 5.6 / 7.0 / 7.1 입니다.

조금 빌드 시간이 소요되겠지만 설치가 완료되면 바로 사용할 수 있는건 아니고 아파치에 몇가지 설정을 추가해 주어야 합니다.

Apache에 PHP 설정 추가하기

아파치 설정파일은 2.4 버전의 경우에는 /usr/local/etc/apache2/2.4 에서 찾을 수 있습니다. 본인이 선호하시는 텍스트 에디터를 사용하여 /usr/local/etc/apache2/2.4/httpd.conf 를 열어서 다음의 내용을 찾아봅니다.

위의 내용을 찾으셨다면 다음과 같이 변경을 해주시기 바랍니다. DirectoryIndex 에 값을 추가하였고 FilesMatch 항목을 추가하였습니다.

이제 아파치를 재시작 하겠습니다.

이제 PHP가 정상적으로 구동중인지 확인을 해봐야겠지요. 다음과 같이 PHP 테스트 결과를 출력하는 페이지를 만들어 줍니다. 여기서 알 수 있듯이 기본적으로 아파치 기본 도큐먼트 디렉토리는 /usr/local/var/www/htdocs 입니다.

이제 다시 한번 브라우저에서 localhost에 접속해보도록 하겠습니다.

install-apm-on-macos-sierra02

정상적으로 phpinfo가 실행된것을 볼 수 있습니다. 조금 밑으로 내려보시면 MySQL(MariaDB) 역시 정상적으로 연동이 되어있는것을 확인해 볼 수 있습니다.

install-apm-on-macos-sierra03

다 좋은데 date 쪽 항목에서 다음과 같은 경고가 뜨고 있는것을 볼 수 있습니다.

install-apm-on-macos-sierra04

시스템의 타임존 설정이 제대로 되어있지 않다는것인데요. 이렇게 된 김에 이부분의 설정도 해보도록 하겠습니다. php.ini 파일을 수정해야 하는데 /usr/local/etc/php/5.6 안에 있습니다. Date 항목을 찾아서 date.timezone의 내용이 주석처리 되어있는데 다음과 같이 수정해주시면 됩니다.

이제 준비는 완료되었고 마지막으로 한번 더 아파치를 재시작 해주시면 됩니다.