Author Archives: 아이

AngularJS PhoneCat 튜토리얼 앱 – 개요

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

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

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

2 Replies

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

$ brew tap homebrew/dupes
$ brew tap homebrew/php
$ brew tap homebrew/apache
$ brew update

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

MariaDB 설치

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

$ brew install mariadb

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

$ mysql_install_db

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

$ brew services start mariadb

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

$ mysql_secure_installation
Enter current password for root (enter for none): 
OK, successfully used password, moving on...

Set root password? [Y/n] Y
New password: 
Re-enter new password: 
Password updated successfully!
Reloading privilege tables..
 ... Success!

Remove anonymous users? [Y/n] Y
 ... Success!

Disallow root login remotely? [Y/n] Y
 ... Success!

Remove test database and access to it? [Y/n] Y
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Reload privilege tables now? [Y/n] Y
 ... Success!

Cleaning up...

All done!  If you've completed all of the above steps, your MariaDB
installation should now be secure.

Thanks for using MariaDB!

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

$ mysql -uroot -p
Enter password: 
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 19
Server version: 10.1.18-MariaDB Homebrew

Copyright (c) 2000, 2016, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]>

Apache 설치하기

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

$ sudo apachectl stop
$ sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist

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

$ brew install httpd24 --with-privileged-ports --with-http2
$ sudo brew services start httpd24

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

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

PHP 설치하기

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

$ brew install php56 --with-apache

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

Apache에 PHP 설정 추가하기

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

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

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

<IfModule dir_module>
    DirectoryIndex index.php index.html
</IfModule>

<FilesMatch \.php

gt; SetHandler application/x-httpd-php </FilesMatch>

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

$ sudo brew services restart httpd24
Password:
Stopping `httpd24`... (might take a while)
==> Successfully stopped `httpd24` (label: homebrew.mxcl.httpd24)
==> Successfully started `httpd24` (label: homebrew.mxcl.httpd24)

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

$ echo "<?php phpinfo();" > /usr/local/var/www/htdocs/index.php

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

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

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

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

[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
date.timezone = Asia/Seoul

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

$ sudo brew services restart httpd24
Password:
Stopping `httpd24`... (might take a while)
==> Successfully stopped `httpd24` (label: homebrew.mxcl.httpd24)
==> Successfully started `httpd24` (label: homebrew.mxcl.httpd24)

아이군의 블로그

배움에 망설이는 그순간 당신은 2류