MVC 패턴을 구현하는 자바스크립트 프레임워크 AngularJS 기초편

Transcription

1 Hanbit ebook Realtime 36 MVC 패턴을구현하는자바스크립트프레임워크 AngularJS 기초편 AngularJS 브래드그린, 샤이엄세샤드리지음 / 김지원옮김

2 이도서는 O REILLY 의 AngularJS 의번역서입니다.

3 MVC 패턴을구현하는자바스크립트프레임워크 AngularJS 기초편

4 MVC 패턴을구현하는자바스크립트프레임워크 AngularJS 기초편 초판발행 2013 년 7 월 31 일 지은이브래드그린, 샤이엄세샤드리 / 옮긴이김지원 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로 7길 83 한빛미디어 ( 주 ) IT출판부전화 / 팩스 등록 1999년 6월 24일제 호 ISBN / 정가 9,900원 책임편집배용석 / 기획김병희 / 편집이세진디자인표지여동일, 내지스튜디오 [ 밈 ], 조판김현미마케팅박상용, 박주훈 이책에대한의견이나오탈자및잘못된내용에대한수정정보는한빛미디어 ( 주 ) 의홈페이지나아래이메일로알려주십시오. 한빛미디어홈페이지 / 이메일 ask@hanb.co.kr Published by HANBIT Media, Inc. Printed in Korea Copyright c 2013 HANBIT Media, Inc. Authorized Korean translation of the English edition of AngularJS, ISBN c 2013 Brad Green, Shyam Seshadri. This translation is published and sold by permission of O Reilly Media, Inc., which owns or controls all rights to publish and sell the same. 이책의저작권은오라일리사와한빛미디어 ( 주 ) 에있습니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전재를금합니다. 지금하지않으면할수없는일이있습니다. 책으로펴내고싶은아이디어나원고를메일 (ebookwriter@hanb.co.kr) 로보내주세요. 한빛미디어 ( 주 ) 는여러분의소중한경험과지식을기다리고있습니다.

5 저자소개 지은이 _ 브래드그린Brad Green 구글 AngularJS 프로젝트팀에서엔지니어관리자를맡고있으며, 접근성과지원공학을총괄감독한다. 구글에입사하기전에는인터넷기업을만들어팔던 AvantGo 사에서초창기모바일웹개발자로근무하다가, 출장요식업에뛰어들어고단한몇년을보냈다. 대학을졸업하고 NeXT Computer 사에서스티브잡스밑에서데모소프트웨어를만들고잡스의슬라이드프레젠테이션을디자인했던것이브래드의첫직장경험이다. 브래드는아내와두자녀를데리고캘리포니아주마운틴뷰에살고있다. 지은이 _ 샤이엄세샤드리Shyam Seshadri Fundoo Solutions 사의사주이자 CEO다. AngularJS에관해컨설팅하고워크숍을개최한다. 인도시장을겨냥한혁신적제품개발에주력하며, AngularJS를주제로한워크숍을운영하고컨설팅한다. Fundoo Solutions 사를창립하기전에는하이데라바드에있는명문 Indian School of Business에서 MBA 과정을마쳤다. 샤이엄은대학졸업후첫직업으로구글에서다수의프로젝트를진행했다. 그중에는 AngularJS가처음으로사용된구글피드백 Google Feedback 프로젝트도있다. 그리고다양한내부도구도제작했다. 현재는인도나비뭄바이에서회사를운영하고있다.

6 역자소개 옮긴이 _ 김지원 웹기술뿐아니라온갖분야에발을뻗고싶어하는바람기를지녔지만역부족이다. 배워야할것이갈수록늘어나시간의결핍을느낀다. 워드프레스, 프라이드치킨, 꿀, 분재, 컴퓨터음악을좋아한다. 기술문서, 매뉴얼, 유비쿼터스관련논문을번역한바있고해외논문 DB 구축관련작업에도참여했다. 번역서로는 한권으로끝내는정규표현식 ( 한빛미디어, 2010), 웹표준가이드 : HTML5+CSS3 ( 한빛미디어, 2010), 프로젝트로배우는 HTML5+ 자바스크립트 ( 한빛미디어, 2012), 리팩토링 ( 한빛미디어, 2012), 엘리멘틀디자인패턴 ( 한빛미디어, 2013), HTML5+CSS3 디자인패턴 ( 한빛미디어, 2013), HTML5 웹소켓프로그래밍 ( 한빛미디어, 2013) 등이있다.

7 저자서문 Angular 프레임워크의기원은 2009 년의구글피드백 Google Feedback 이라는프로젝 트로거슬러올라간다. 필자는테스트가능한코드를작성하면서수개월간개발속 도와기능의문제로난관을겪었다. 6 개월여간작성한프론트엔드 front-end 코드가 대략 17,000줄이었다. 그런데당시프로젝트팀원이던미스코헤브리Misko Hevery 는자신이취미로작성한오픈소스라이브러리를사용하면 2 주도안걸려서우리 가작성한코드전체를새로작성할수있을거라고큰소리쳤다. 필자는프로젝트가 2주쯤지연돼도별문제는없을것이고설령미스코가장담한대로기한내에다시작성하지못하더라도기한에쫓겨허둥대는미스코의표정을보는재미라도있겠다는생각에그렇게해보라고했다. 예상대로미스코는기한을넘겨 3주만에완료했다. 그래도 6개월이걸렸던개발을 3주라는단시간에재현했다는점에우리팀전원은경악했는데, 더놀랍게도미스코가새로작성한애플리케이션의코드분량이원래의 17,000줄의 1/10도안되는 1,500줄에불과했다. 미스코가이뤄낸성과는추진해볼가치가있어보였다. 미스코가간단한선언문서로창안했던각종개념을중심으로해서, 미스코와나는웹개발자의경험을간소화할팀을만들기로했다. 이책의공동저자인샤이엄세샤드리 Shyam Seshadri 는구글피드백팀에서 Angular의첫출시애플리케이션개발을지휘했다. 그때부터우린구글의여러팀과수백명의오픈소스기부자의도움을받아 Angular 를개발했다. 많은개발자가일상적인작업에 Angular 프레임워크를이 용하며엄청난 Angular 지원망에기여한다. 우리는여러분이나눠주는지식을얻게되리란생각에감개무량하다.

8 감사의글 Angular 프레임워크를탄생시킨미스코헤브리에게각별히고마움을전한다. 미스코덕택에웹애플리케이션작성법을기존과전혀다른방식으로생각하고실천할수있었다. 이고르미나 Igor Minar 는 Angular 프로젝트의안정화와체계화에기여했고활성화된지금의오픈소스커뮤니티의모체를만들었다. 보이타지나 Vojta Jina 는 Angular의많은부분을작성했으며덕분에우리는테스트를유례없이신속하게할수있었다. 나오미블랙 Naomi Black, 존린퀴스트 John Lindquist, 매사이어스마셔스니멜라 Mathias Matias Niemela 는숙련된솜씨로편집을도와주었다. 앞서나열한모든분들과더불어, 다방면에서도움을주고실시간애플리케이션제작과정에서피드백을통해우리에게 Angular의가치있는사용법을알려준 Angular 커뮤니티분들께감사의인사를남긴다. 브래드그린, 샤이엄세샤드리

9 역자서문 왜 AngularJS 인가? 개발자가구글의 AngularJS 플랫폼을선택할수밖에없는이 유는다음과같다. 양방향데이터바인딩이가능하다 - AngularJS로개발한애플리케이션은클라이언트에서서버로뿐만아니라서버에서클라이언트로도실시간변경감지가이뤄진다. 감시, 리스너, 캡처기능을통해개발한코드가실행되고모델을조작한후발생하는변경사항을감시한다. 모델, 뷰, 컨트롤러, 서비스등여러구성요소로분리된다 - 지시어, 필터, 모듈등의추상객체를이용해균형을맞출수있다. 이로써복잡도의감소와관심사의분리라는두마리토끼를얻을수있다. 편리하고친숙한패턴이많다 - MVC나종속물주입같은유명한패턴외에도종속물관리같은다수의패턴이들어있어서체계적인구성으로개발할수있다. 테스트용코드를쉽게작성할수있다 - AngularJS 공식온라인강좌페이지에도 Jasmine 문법을사용한단위테스트와클라이언트-서버테스트를코드로작성하는방법이예시돼있다. 모든프레임워크가그렇듯비록 AngularJS 역시완벽할순없지만, 사소한단점에 비해얻을수있는것이많다. AngularJS 에관한전반적인내용이이책의본문에 자세히설명돼있으니자세한얘기는본문을숙지하기바란다. AngularJS 를개발에사용하면길고복잡한코딩의분량을획기적으로줄일수 있다. 아주간단하고코딩길이가짧은프로젝트라면물론큰이득을얻지못할 수도있지만, 데이터수정시에빠른반응성이요구되는 UI 를구상하고있다면

10 AngularJS는개발에있어서반드시고려할만하다. 플랫폼에이미내장돼있는지시어말고도개발자가직접정의한지시어를템플릿에사용함으로써모델, 컨트롤러와바로연결이가능한점은강력한기능이다. 종속물주입또한상위의기능에필요한종속물 ( 종속객체, 종속함수, 종속모듈등 ) 을마치혈관으로연결된링거에주사기로항생제를주입하듯이손쉽게끼워넣음으로써매우직관적이며메서드체인형태로호출이가능하다. 이모든잡다한서론을뒤로하고지금당장본문의첫페이지로가서어떤놀라운 장점이있고어떤부분이자신의개발에필요한지살펴보자. 번역을마무리하며, 김지원

11 도움을주신분들 베타테스터 _ 원종필탁월함의갈망에빠져있는게임클라이언트프로그래머다. Unity를사용해서일을하고있으며, 업무의질을높이기위해고민중이다. 최근에는웹개발에관심을두고있다. 베타테스터 _ 이기동중3 때 ASP를시작으로 VB, C#, FLEX, MFC를거쳐, 현재는 JAVA와 JQM을이용하여전자지갑모바일웹을개발하고있는책읽기좋아하는프로그래머다. 튜닝이나해킹에관심이많으며, 요즘은먼가만들생각에아두이노에빠져있다. 제일사랑하는건아내고, 좋아하는건아내가해준밥이며, 설거지를무척이나싫어한다. 베타테스터 _ 이수한자신에게떨어지는일거리를코딩으로승화하고싶어하는평범한월급쟁이직장인이다. 게임공학이전공이만운좋게게임외에다양한프로젝트를수행하였다. 평소서버, 플랫폼쪽구현기술에관심이많으며언젠가는나만의플랫폼을설계및구현해보겠다는꿈을꾸고있는중이다. 베타테스터 _ 이아름 공대아름이와이름만같은코스모스졸업을앞둔취업준비생이다. 정보통신공학 전공으로현재프로그래머가되기위해밤낮없이코딩에매진하고있다.

12 대상독자및예제파일 초급초중급중급중고급고급 이도서는 AngularJS의핵심을빠르게확인하고싶은독자를대상으로한다. 도서의내용을보다잘이해하려면, HTML과자바스크립트를어느정도알고있어야한다. 다음과같은독자들에많은도움이될것이다. 규모있는웹애플리케이션프로젝트의실무개발자 프레임워크기반으로자바스크립트에익숙해지려는웹퍼블리셔 jquery 입문이상으로나아가려는자바스크립트개발자 이도서의예제소스코드는다음웹사이트에서다운받을수있다. ( 영문버전 ) ( 한글버전 ) 영문버전은 AngularJS 버전을사용하였으며, 한글버전은 AngularJS 을사용하였다. 이도서에있는예제는 AngularJS 을사용하여소스코 드를테스트하였다. 소스코드에는구글 AngularJS 프레임워크파일의 URL 로인클루딩되어있다. 하 지만소스코드의간결성을위해일부코드는 AngularJS 사용하였다. 이도서에서 사용한 AngularJS 프레임워크파일은다음웹사이트에서다운받을수있다.

13 한빛 ebook 리얼타임 한빛 ebook 리얼타임은 IT 개발자를위한 ebook 입니다. 요즘 IT 업계에는하루가멀다하고수많은기술이나타나고사라져갑니다. 인터넷을아무리뒤져도조금이나마정리된정보를찾는것도쉽지않습니다. 또한잘정리되어책으로나오기까지는오랜시간이걸립니다. 어떻게하면조금이라도더유용한정보를빠르게얻을수있을까요? 어떻게하면남보다조금더빨리경험하고습득한지식을공유하고발전시켜나갈수있을까요? 세상에는수많은종이책이있습니다. 그리고그종이책을그대로옮긴전자책도많습니다. 전자책에는전자책에적합한콘텐츠와전자책의특성을살린형식이있다고생각합니다. 한빛이지금생각하고추구하는, 개발자를위한리얼타임전자책은이렇습니다. 1. ebook Only - 빠르게변화하는 IT 기술에대해핵심적인정보를신속하게제공합니다. 500페이지가까운분량의잘정리된도서 ( 종이책 ) 가아니라, 핵심적인내용을빠르게전달하기위해조금은거칠지만 100페이지내외의전자책전용으로개발한서비스입니다. 독자에게는새로운정보를빨리얻을수있는기회가되고, 자신이먼저경험한지식과정보를책으로펴내고싶지만너무바빠서엄두를못내는선배, 전문가, 고수분에게는보다쉽게집필할수있는기회가될수있으리라생각합니다. 또한새로운정보와지식을빠르게전달하기위해 O'Reilly의전자책번역서비스도하고있습니다. 2. 무료로업데이트되는, 전자책전용서비스입니다. 종이책으로는기술의변화속도를따라잡기가쉽지않습니다. 책이일정분량이상으로집필되고정리되어나오는동안기술은이미변해있습니다. 전자책으로출간된이후에도버전업을통해중요한기술적변화가있거나저자 ( 역자 ) 와독자가소통하면서보완하여발전된노하우가정리되면구매하신분께무료로업데이트해드립니다.

14 3. 독자의편의를위하여 DRM-Free로제공합니다. 구매한전자책을다양한 IT 기기에서자유롭게활용할수있도록 DRM-Free PDF 포맷으로제공합니다. 이는독자여러분과한빛이생각하고추구하는전자책을만들어나가기위해독자여러분이언제어디서어떤기기를사용하더라도편리하게전자책을볼수있도록하기위함입니다. 4. 전자책환경을고려한최적의형태와디자인에담고자노력했습니다. 종이책을그대로옮겨놓아가독성이떨어지고읽기힘든전자책이아니라, 전자책의환경에가능한한최적화하여쾌적한경험을드리고자합니다. 링크등의기능을적극적으로이용할수있음은물론이고글자크기나행간, 여백등을전자책에가장최적화된형태로새롭게디자인하였습니다. 앞으로도독자여러분의충고에귀기울이며지속해서발전시켜나가도록하겠습니다. 지금보시는전자책에소유권한을표시한문구가없거나타인의소유권한을표시한 문구가있다면위법하게사용하고있을가능성이높습니다. 이경우저작권법에의해 불이익을받으실수있습니다. 다양한기기에사용할수있습니다. 또한한빛미디어사이트에서구입하신후에는횟수에 관계없이다운받으실수있습니다. 한빛미디어전자책은인쇄, 검색, 복사하여붙이기가가능합니다. 전자책은오탈자교정이나내용의수정 보완이이뤄지면업데이트관련공지를이메일로 알려드리며, 구매하신전자책의수정본은무료로내려받으실수있습니다. 이런특별한권한은한빛미디어사이트에서구입하신독자에게만제공되며, 다른 사람에게양도나이전은허락되지않습니다.

15 차례 01 AngularJS 이해하기 AngularJS 를이해하는데필요한각종개념 장바구니예제 나머지장에서다룰내용 AngularJS 애플리케이션해부 Angular 호출 모델뷰컨트롤러 템플릿과데이터바인딩 모듈을사용해종속물체계화하기 필터를사용해데이터를형식화하기 라우트서비스와 $location을사용해뷰를변경하기 서버와통신하기 지시어로 DOM 수정하기 사용자입력이올바른지검사하기 다음장에서배울내용 AngularJS 프레임워크로개발하기 프로젝트의구성 작성한애플리케이션실행하기 AngularJS로테스트하기 단위테스트 종단간테스트와통합테스트 94

16 3.6 컴파일 그밖의유용한도구 개발흐름을최적화하는도구 Yeoman AngularJS와 RequireJS를통합하기 AngularJS 애플리케이션분석하기 애플리케이션 모델, 컨트롤러, 템플릿의관계 모델 서비스, 지시어, 컨트롤러 템플릿 테스트 153

17 1 AngularJS 이해하기 뛰어난웹기반애플리케이션을제작하는우리의능력이대단해진만큼, 개발과정도많이복잡해졌다. 필자는 Angular 팀에서 Ajax 애플리케이션을개발할때부딪히는난관을줄이고자했으며, 구글에있을때는지메일, 구글맵, 캘린더등대형웹애플리케이션의힘든제작과정을처음부터끝까지해냈다. 그리고이경험을활용해서많은사람에게도움을줄수있을것이라생각했다. 필자는두세줄의코드를작성했던맨처음과비슷하게웹애플리케이션을작성하고싶었고, 그렇게만든결과물은너무형편없어아연실색했다. 필자는코딩과정이웹브라우저의특이한내부동작원리에맞춰나가는게아니라창조한다는느낌이길바랬다. 그와동시에, 처음에어떤설계가애플리케이션을쉽게제작하고이해할수있을지 판단할수있으면서애플리케이션이발전해가는중간중간에용이한테스트 / 확장 / 유지보수를위해합리적선택을계속해나갈수있는환경을원했다. 이를위해서필자는 Angular 프레임워크를사용했는데, 얻어낸성과를생각하면아주기쁘다. 특히, Angular 관련오픈소스커뮤니티는필자에게많은지원과정보를제공해주었다. 여러분도커뮤니티에가입해서 Angular를훨씬더개선할수있는방법을공유했으면좋겠다. 이책의예제소스코드는 GitHub 01 에올려두었다. GitHub 페이지에서소스코드를직접볼수도있고다운받아실행해볼수있다 장 AngularJS 이해하기 1

18 1.1 AngularJS 를이해하는데필요한각종개념 Angular 애플리케이션을제작할때활용하는핵심개념이몇가지있다. 필자가그개념들을만든것이아니라단지다양한개발환경에서효율성이높은문법을비중있게차용해서 HTML, 웹브라우저, 그밖의익숙한각종웹표준기술을포괄하는방식으로구현했을뿐이다 클라이언트측템플릿멀티페이지 multi-page 웹애플리케이션은서버에있는데이터를 HTML과조립하고연결한후, 완성된페이지를웹브라우저에보내는방법으로페이지를생성한다. Ajax 애플리케이션 ( 싱글페이지 single-page 애플리케이션 ) 대부분도이와같은방식으로 HTML을생성한다. Angular 애플리케이션은템플릿과데이터가웹브라우저로보내진후, 웹브라우저에서조립된다는점이다르다. 결국서버의역할은템플릿에사용될정적리소스를올려두고템플릿에필요한데이터를필요할때마다제공하는것뿐이다. 데이터와템플릿을웹브라우저에서조립하는작업을 Angular로작성하면소스코드 1-1과같다. 이번예제는프로그래밍의입문으로여겨지는 Hello World로, Hello, World 를하나의문자열로작성하는것이아니라 Hello 라는인사말을나중에수정할수있게끔데이터로구조화할것이다. hello.html 파일을열고소스코드 1-1 과같이템플릿을작성하자. 1 장 AngularJS 이해하기 2

19 소스코드 1-1 Hello World 애플리케이션의템플릿 (hello.html) <html ng-app> <head> <script src="angular.js"></script> <script src="controllers.js"></script> </head> <body> <div ng-controller='hellocontroller'> <p>{{greeting.text}}, World</p> </div> </body> </html> controllers.js 파일의로직은소스코드 1-2 와같다. 소스코드 1-2 Hello World 애플리케이션의컨트롤러 (controllers.js) function HelloController($scope) { $scope.greeting = { text : 'Hello' }; } 선호하는웹브라우저에서소스코드 1-1 의 hello.html 을로딩하면그림 1-1 과 같이나타난다. 그림 1-1 Hello World 애플리케이션 1 장 AngularJS 이해하기 3

20 위에서사용한 HelloController 메서드는흔히사용하는대부분의메서드와달리 다음과같은특징이있다. HTML 파일안에는이벤트리스너를붙일위치를식별할수있는클래스나 ID가전혀없다. HelloController 메서드가 greeting.text에 Hello를할당한다면이벤트리스너를등록하거나콜백 callback 을작성하지않아도된다. HelloController 메서드는일반자바스크립트클래스며 Angular에속한어느클래스도상속받지않는다. HelloController 메서드는필요한 $scope 객체를생성하지않고매개변수로받는다. HelloController의생성자를호출하는코드나생성시점을알아내는코드를작성하지않아도된다. 나중에더많은차이점을알아보겠지만, 이정도의차이점만보더라도 Angular 애 플리케이션의구조가기존애플리케이션과다르다는것만큼은확실히알수있다. 필자가왜 Angular 를이용한설계방식을택했고, Angular 는어떠한원리로돌아 가는지궁금할것이다. 이제 Angular 가다른곳에서차용해온유익한몇가지개 념을살펴보자 모델뷰컨트롤러 (MVC) MVC Model View Controller 애플리케이션구조는 1970년대에스몰토크 Smalltalk 의구성요소로서도입됐다. 스몰토크에속해있던초창기때부터 MVC는사용자인터페이스가필수인거의모든데스크톱개발환경에사용됐다. C++, 자바, Objective-C 중어느것을사용하더라도 MVC 구조를일부활용할수있다. 그러나최근까지 MVC는웹개발에거의사용되지않았다. 1 장 AngularJS 이해하기 4

21 MVC 는개발자가코드에서데이터 ( 모델 model ) 관리, 애플리케이션로직 ( 컨트롤러 controller ), 데이터표현 ( 뷰 view ) 를명확하게서로분리하는것이주된목적이다. 뷰는모델에서데이터를가져와사용자에게표시한다. 사용자가클릭이나타이핑등으로애플리케이션을조작하면, 컨트롤러는모델에있는데이터를변경하는식으로응답한다. 모델은변경이발생했음을뷰에알려서, 뷰가변경사항을현재표시중인내용에적용하게한다. Angular 애플리케이션에서뷰는 DOM Document Object Model, 문서객체모델이고, 컨트롤러는자바스크립트클래스며, 모델데이터는객체속성에저장된다. 필자가 MVC 를깔끔하다고생각하는이유는다음과같다. 첫째, MVC에는무엇을어디에넣어야할지에대한멘탈모델 mental model 이있어서, 개발자가매번멘틀모델을생각하지않아도된다. 둘째, 자신이작성한코드가 MVC 구조에따라구성되어있음을한눈에알수있어서프로젝트팀원들도무슨내용의코드인지를쉽게이해할수있다. 셋째, MVC는애플리케이션을보다쉽게확장하고유지하며테스트할수있는굉장한장점들이있다 데이터바인딩 Ajax 싱글페이지애플리케이션이보편화되기전에는, 전송된데이터를사용자에게보여주기전에 HTML의문자열을데이터와합치는방식으로사용자인터페이스를손쉽게작성할수있는레일스 Rails, PHP, JSP 같은플랫폼을이용했다. jquery 같은라이브러리는 MVC 모델을클라이언트로확장해서개발자가비슷한방식으로인터페이스를작성할수있으며, 페이지전체가아니라 DOM의일부분만을따로업데이트할수있다. 이책에서는템플릿 HTML 문자열을데이터와합친후, 플레이스홀더 placeholder 요소에있는 innerhtml 속성을설정하여합친데이 1 장 AngularJS 이해하기 5

22 터를 DOM 내부의원하는위치에삽입하는방식을사용한다. 이방식은다른건다좋은데, UI 에업데이트된데이터를삽입하거나사용자입력 내용에따라데이터를변경할때, UI 와자바스크립트속성에데이터를할당하기 위해추가해야할작업이상당히많다. 그런데개발자가코딩하지않고도이모든작업이저절로처리된다면얼마나좋을까? 개발자는단지 UI의어느부분에어떤자바스크립트속성을할당할지선언만하고동기화는자동으로이뤄지게할수있다면얼마나좋을까? 이런식의프로그래밍을 데이터바인딩 이라고한다. 필자는 Angular에데이터바인딩기능을포함시켰다. 데이터바인딩을 MVC와연동하면, 코딩작업없이뷰와모델을작성할수있기때문이다. 데이터를한곳에서다른곳으로옮길때필요한작업대부분은자동으로이뤄진다. 이러한기능을눈으로확인하기위해소스코드 1-1의템플릿을동적으로수정해보자. 앞에서와같이 HelloController 메서드는 greeting.text 값을한번지정하고이후에는절대로변경하지않는다. 동적으로만들기위해사용자의입력내용에따라 greeting.text의값이변하는텍스트인풋을추가하자. 수정한템플릿은소스코드 1-3과같다. 소스코드 1-3 Hello World 애플리케이션의템플릿 1 차수정 (HelloDynamic.html) <html ng-app> <head> <script src="angular.js"></script> <script src="controllers.js"></script> </head> <body> <div ng-controller='hellocontroller'> <input ng-model='greeting.text'> 1 장 AngularJS 이해하기 6

23 <p>{{greeting.text}}, World</p> </div> </body> </html> HelloController 컨트롤러는그대로두면된다. 이파일을웹브라우저에서로딩 하면그림 1-2 와같은화면이나타난다. 그림 1-2 Hello World 애플리케이션의기본상태 인풋필드 input field 안에있는 Hello 를 ' 안녕 ' 으로수정하면화면이그림 1-3 과같 이변한다. 그림 1-3 Hello World 애플리케이션에서입력내용을수정한결과 인풋필드에 change 이벤트리스너 를붙이지않고도동적으로업데이트되는 UI 를작성했다. 서버에서변경된내용이 UI에동적으로업데이트될뿐만아니라, UI 에서변경된내용이서버에동적으로저장되기도한다. 앞서작성한컨트롤러에서서버로요청하고, 응답을받으며, scope.greeting.text 속성에반환되는값을지정할수도있다. Angular는인풋의내용과중괄호안의텍스트를반환되는값으로자동업데이트한다. 1 장 AngularJS 이해하기 7

24 1.1.4 종속물주입앞에서도언급했지만 HelloController를통해이뤄지는작업대부분을개발자가작성할필요가없음은수백번강조해도지나치지않다. 예컨대데이터바인딩을수행하는 $scope 객체는자동으로넘어오기때문에, 함수를호출해서객체를생성하지않아도된다. 단지 HelloController 생성자안에 $scope를넣기만하면요청이이뤄진다. 뒤에나올장들에서살펴보겠지만, 요청할수있는것은 $scope 객체만이아니다. 예를들어사용자웹브라우저에표시된현재 URL에데이터를바인딩하려면, 소스코드 1-4와같이 HelloController 생성자메서드에 $location 매개변수도추가로전달해서이를관리하는객체를요청할수있다. 소스코드 1-4 Hello World 애플리케이션의컨트롤러에위치를추가 (controllers.js) function HelloController($scope, $location) { $scope.greeting = { text : 'Hello' }; // 여기에 $location을사용해유용한기능을구현 } 이놀라운결과를가능케한것은 Angular의 종속물주입시스템Dependency Injection System 이다. 종속물주입을이용하면개발자는종속물을작성하지않아도되며작 성한클래스가직접필요한것을요청하는개발방식을따르면된다. 이런개발방식은 디미터의법칙 Law of Demeter 02 이라는디자인패턴을따른다. 디미 02 역자주 _ 디미터의법칙패턴이란객체간의약결합을요구하는객체지향프로그램을개발하기위한소프트웨어설계패턴으로다음과같은원칙을지닌다. 각객체는자신에게밀접히관련된객체들에대한정보만을지니되, 한정된정보만지녀야한다. 각객체는밀접히관련된객체끼리만소통해야하며, 관련없는객체와소통해선안된다. 직접적으로관련된객체끼리만소통해야한다. 1 장 AngularJS 이해하기 8

25 터의법칙을다른말로 최소지식의원칙 the principle of least knowledge 이라고한다. HelloController의역할은 greeting 모델의초기상태를설정하는것으로, 디미터의법칙패턴에따라 HelloController는 $scope 객체가생성되는원리나 $scope 객체가있는위치같은불필요한정보에는관여하지말아야한다. 이특징은 Angular 프레임워크로생성된객체에만적용되는것이아니다. 소스코 드 1-4 의미완성된부분을직접작성해보자 지시어 Angular의가장큰장점중하나는템플릿을 HTML 파일로작성할수있다는것이다. 이것이가능한이유는프레임워크코어에강력한 DOM 변환엔진을넣어두었기때문이다. DOM 변환엔진을통해개발자는 HTML 문법을확장할수있다. 앞에서템플릿예제를통해 HTML 명세에는나와있지않은새로운속성몇가지를이미살펴보았다. 예제는데이터바인딩을위한이중중괄호표기, 컨트롤러가뷰의어느부분을감독할지를지정하는 ng-controller, 인풋을해당모델의구성물에바인딩하는 ng-model을사용한다. 이러한 HTML 확장문법을 지시어 directive 라고한다. Angular에는애플리케이션의뷰를쉽게정의할수있는여러지시어가있다 ( 나중에더많은지시어를살펴볼것이다 ). 이런지시어는템플릿을정의할수있다. 지시어를선언해서애플리케이션의구동원리를지정할수도있고, 재사용가능한구성요소를생성할수도있다. 그리고 Angular 에내장된지시어를사용할수도있지만, 자신만의지시어를작성 해서 HTML 템플릿기능을자유롭게확장할수도있다. 1 장 AngularJS 이해하기 9

26 1.2 장바구니예제 조금복잡한예제를통해 Angular의더많은기능을알아보자. 쇼핑몰애플리케이션을제작한다고생각해보자. 쇼핑몰애플리케이션의어딘가에는사용자의장바구니를표시하고사용자가수정할수있게해야한다. 다음장바구니부분의코드를살펴보자. 소스코드 1-5 장바구니애플리케이션 (order-form.html) <!doctype html> <html lang='ko' ng-app> <head> <title> 장바구니 </title> </head> <body ng-controller="cartcontroller"> <h1> 내장바구니 </h1> <div ng-repeat="item in items"> <span>{{item.title}}</span> <input ng-model="item.quantity"> <span>{{item.price currency}}</span> <span>{{item.price * item.quantity currency}}</span> <button ng-click="remove($index)"> 삭제 </button> </div> <script src="angular.js"></script> <script> function CartController($scope) { $scope.items = [ { title : ' 페인트그릇 ', quantity : 8, price : 3.95 }, { title : ' 땡땡이리본 ', 1 장 AngularJS 이해하기 10

27 quantity : 17, price : }, { title : ' 공깃돌 ', quantity : 5, price : 6.95 } ]; $scope.remove = function(index) { $scope.items.splice(index, 1); } } </script> </body> </html> 웹브라우저에서소스코드 1-5 를로딩하면그림 1-4 와같은 UI 를볼수있다. 그림 1-4 장바구니 UI 여기서는소스코드 1-5 를간단히분석해보자. 더자세한내용은이책의나머지 장을참고하기바란다. 맨위의코드부터차근차근살펴보자. <html lang='ko' ng-app> 1 장 AngularJS 이해하기 11

28 어떤요소에 ng-app 지시어를지정하면, 페이지에서그요소에해당하는부분을 Angular가관리하게된다. 앞의코드에서 ng-app 지시어를지정한요소가 <html> 이므로, Angular는페이지전체를관리하게된다. 이렇게 Angular가페이지전체를관리하게지정하는것이목적에대부분맞지만, 다른메서드를사용해페이지를관리하는기존애플리케이션에 Angular를통합할때는애플리케이션의 <div> 요소에지정하기도한다. <body ng-controller="cartcontroller"> Angular 에서개발자는 컨트롤러 라고하는자바스크립트클래스로구성된페이 지영역을관리한다. CartController 가 <body> 와 </body> 사이의모든것을관 리하도록선언하려면, 앞의코드처럼 body 태그에컨트롤러를삽입하면된다. <div ng-repeat="item in items"> 앞의코드에서 ng-repeat 지시어는지정된 <div> 요소내부의 DOM을 items 배열의모든원소에한번씩복사하라고명령한다. 그리고 <div> 의모든사본에서현재요소 03 에 item이라는속성을지정해서템플릿안에사용할수있게한다. 보다시피이것은제품명, 수량, 단가, 총액, 항목삭제버튼이들어있는 <div> 를 3개생성한다. <span>{{item.title}}</span> 03 역자주 _ ng-repeat는프로그램루프같은개념이다. 이지시어가지정된요소안에포함된요소는계속반복된다. c 언어같으면 i=0; i<5; i++ 라는 for문조건절하위에서 i가가리키는것이현재가된다. 1 장 AngularJS 이해하기 12

29 Hello World 예제에서보았다시피이중중괄호 {{ }} 를사용해데이터바인딩하면, 변수의값을페이지안에삽입하고동기화를유지할수있다. 표현식 {{item.title}} 은반복문안에현재 item을가져와서, item의 title 속성에할당돼있는내용을 DOM에삽입한다. <input ng-model="item.quantity"> 앞의코드처럼 ng-model 지시어를지정하면인풋필드와 item.quantity 의값사 이에데이터바인딩이이뤄진다. <span> 요소로감싸인 {{ }} 표기법은 값을여기에삽입해라 는일방적인관계를설정한다. 사용자입장에서는이기능으로충분하지만, 장바구니애플리케이션에서는사용자가인풋의수량을변경하는시점을알아야실시간으로표시되는총액을변경할수있다. ng-model 지시어를지정했으므로변경사항이계속모델에반영된다. ng-model 지시어의선언으로인해 item.quantity 의값이텍스트필드에삽입될뿐만아니 라, 사용자가새값을입력할때마다 item.quantity 를자동으로업데이트한다. <span>{{item.price currency}}</span> <span>{{item.price * item.quantity currency}}</span> 단가와총액을달러단위로표시하고자한다. Angular에있는 필터 기능을이용하면텍스트를변환할수있다. 값을화폐단위로형식화하는 currency라는내장필터가있는데, 이필터를이용하면값을달러단위의형식으로변환할수있다. 필터에대한상세한내용은다음장을참고하자. 1 장 AngularJS 이해하기 13

30 <button ng-click="remove($index)"> 삭제 </button> 앞의코드로인해, 제품옆에는장바구니항목삭제를위해사용자가클릭할수있는 [ 삭제 ] 버튼이생긴다. [ 삭제 ] 버튼을클릭하면 remove( ) 함수가호출된다. 삭제할항목을알려주기위해 remove( ) 함수의인자로 ng-repeat 반복횟수가저장되어있는 $index를전달했다. function CartController($scope) { CartController 메서드는장바구니로직을관리한다. 컨트롤러에 $scope 가필요 하다는것을 Angular 에알리기위해 $scope 를매개변수로전달했다. $scope 를 통해 UI 를구성하는요소들의데이터바인딩이이뤄진다. $scope.items = [ { title : ' 페인트그릇 ', quantity : 8, price : 3.95 }, { title : ' 땡땡이리본 ', quantity : 17, price : }, { title : ' 공깃돌 ', quantity : 5, price : 6.95 } ]; $scope.items 를정의해서사용자장바구니에든항목들의집합을나타내는더미 데이터해시 dummy data hash 를생성했다. UI 와데이터바인딩이가능해야하므로, 사 용자장바구니에든항목을 $scope 에추가한다. 당연한이야기지만, 장바구니가메모리에서만구동될수는없으므로서버와통신 해서데이터를데이터베이스같은영구저장소에적절히저장하게해야한다. 데이 터의영구저장에대해서는뒤에나오는장들에서다루겠다. 1 장 AngularJS 이해하기 14

31 $scope.remove = function(index) { $scope.items.splice(index, 1); } UI에바인딩하려면 remove( ) 함수가필요하므로 $scope에도 remove( ) 함수를추가했다. 메모리에서만구동되는장바구니애플리케이션은 remove( ) 함수가배열에있는항목을삭제하는것만가능하다. ng-repeat 지시어로생성된 <div> 목록은데이터바인딩에의해실시간반영되므로, 항목을삭제하면해당항목의행이사라지면서자동으로아래항목이그행으로올라온다. 이 remove( ) 함수는사용자가항목의 [ 삭제 ] 버튼을클릭할때마다 UI에서호출됨을명심하자. 1.3 나머지장에서다룰내용 이장에서는 Angular 의가장기본적인문법과아주간단한예제만을살펴보았다. 나머지장에서는 Angular 프레임워크의필수기능에대해서알아볼것이다. 1 장 AngularJS 이해하기 15

32 2 AngularJS 애플리케이션해부 필요한함수만골라사용하는일반라이브러리와달리, Angular 프레임워크의모든구성요소는협업솔루션으로사용하게끔설계되어있다. 이장에서는 Angular 의기본구성요소를간결하게설명하겠다. 이를통해각요소의연동방법을이해할수있을것이다. 구성요소대부분에대한상세한설명은나머지장에서다룬다. 2.1 Angular 호출 Angular 를시작하기위해모든애플리케이션에반드시다음두가지작업을해야 한다. 1. angular.js 라이브러리파일을로딩해야한다. 2. ng-app 지시어를지정해서 DOM 의어느부분을관리할지 Angular 에전달해 야한다 스크립트로딩 angular.js 라이브러리로딩은간단하며일반자바스크립트라이브러리를로딩하는것과방법이같다. 구글의 CDN Content Delivery Network, 콘텐츠전송네트워크에올려져있는스크립트파일을로딩하는방법은다음과같다. <script src=" </script> 구글의 CDN 을이용하는것은여러모로좋다. 구글서버는빠른데다가어떤애플 2 장 AngularJS 애플리케이션해부 16

33 리케이션이든캐시에스크립트를저장하는기능이있기때문이다. 따라서사용자는 Angular 플랫폼기반의애플리케이션을여러개사용할때 Angular 스크립트파일을한번만받으면된다. 게다가사용자가구글 CDN의 Angular 링크를이용한웹사이트를방문한적이있으면, 다른웹사이트를방문할때 Angular 스크립트파일을다시받지않아도된다. Angular 스크립트파일을로컬이나다른위치에두고사용하고싶다면, 구글 Angular 스크립트파일을받아서자신이원하는위치에두고 src 속성에정확한 파일경로를지정하면된다 ng-app 지시어로 Angular의경계선언 ng-app 지시어를이용하면페이지의어느부분을관리할지 Angular에명령할수있다. 순수 Angular 애플리케이션을제작할때는 ng-app 지시어를다음과같이 <html> 태그에넣는다. <html ng-app>... </html> 앞의코드는페이지안의모든 DOM 요소를관리하라고 Angular 에명령한다. 기존애플리케이션이있는데, 그애플리케이션이자바나레일스같은타기술을 이용해 DOM 을관리하게돼있다면, 다음과같이 Angular 가관리하게할부분을 <div> 같은요소로묶은후 ng-app 지시어를그요소에넣으면된다. 자바나레일스같은기술을이용해 DOM 을관리하는애플리케이션이있다면, 다 음과같이 Angular 가관리하게할부분을 <div> 같은요소로묶은후 ng-app 지 시어를그요소에넣으면된다. 2 장 AngularJS 애플리케이션해부 17

34 <html>... <div ng-app>... </div>... </html> 2.2 모델뷰컨트롤러 Angular가모델뷰컨트롤러애플리케이션설계방식을지원한다고 1장에서설명했다. Angular 애플리케이션은설계가아주유연하지만, 다음과같은기본적으로지켜야할규칙이있다. 모델에는애플리케이션의현상태를나타내는데이터가들어간다. 뷰는현상태를나타내는데이터를표시한다. 컨트롤러는모델과뷰의관계를관리한다. 모델은객체속성을사용하거나데이터가담긴기본타입만을사용해작성한다. 모 델변수는특별할것이없다. 사용자에게어떤텍스트를표시하려면문자열을다음 과같이지정하면된다. var sometext = ' 지금여러분의여정은시작됐습니다.'; 뷰는 HTML 페이지로템플릿을작성하고거기에모델에서전달받은데이터를합 쳐서생성한다. 앞에서보았다시피 DOM 안에플레이스홀더 placeholder 를삽입하고, 플레이스홀더의텍스트를다음과같이지정하면된다. 2 장 AngularJS 애플리케이션해부 18

35 <p>{{sometext}}</p> 이중중괄호문법은기존템플릿에새로운내용을삽입한다는뜻에서인터폴레이 션 interpolation 이라고한다. 컨트롤러는클래스또는타입이며, 다음과같이모델을구성할객체나기본타입을 전달받은 $scope 객체에할당해서 Angular 에알리는것이목적이다. function TextController($scope) { $scope.sometext = sometext; } 이제까지설명한코드를조합하면다음과같다. 소스코드 dataBinding.html <html ng-app> <body ng-controller="textcontroller"> <p>{{sometext}}</p> <script src=" angular.min.js"> </script> <script> function TextController($scope) { $scope.sometext = ' 지금여러분의여정은시작됐습니다.'; } </script> 2 장 AngularJS 애플리케이션해부 19

36 </body> </html> 앞의코드를웹브라우저에서로딩하면다음과같이출력되는것을볼수있다. 지금여러분의여정은시작됐습니다. 이기본스타일모델은단순한경우에나사용할수있다. 애플리케이션대부분은 데이터를보관할모델객체를작성해야한다. 메시지모델객체를작성하고그객 체를통해 sometext 를저장해보자. var sometext = ' 지금여러분의여정은시작됐습니다.'; 그러기위해서는앞의코드를다음과같이수정한다. var messages = {}; messages.sometext = ' 지금여러분의여정은시작됐습니다.'; function TextController($scope) { $scope.messages = messages; } 그리고이것을템플릿파일에서다음과같이적용하자. <p>{{messages.sometext}}</p> 나중에 $scope 객체를설명할때보겠지만, 이런식으로모델객체를작성하면프 로토타입상속 prototypal inheritance 으로인해 $scope 객체에서발생할수있는예기 치못한동작을막을수있다. 2 장 AngularJS 애플리케이션해부 20

37 장기적으로바람직한습관을이야기하면서도, 앞의예제는 TextController를전역스코프에작성했다. 예제니까그래도되지만, 원래컨트롤러는애플리케이션의관련부분들을나타내는네임스페이스를사용하는모듈안에정의하는것이올바른방법이다. 01 수정한코드는다음과같다. 소스코드 dataBinding.html <html ng-app='myapp'> <body ng-controller="textcontroller"> <p>{{sometext.message}}</p> <script rc=" angular.min.js"> </script> <script> var myappmodule = angular.module('myapp', []); myappmodule.controller('textcontroller', function TextController($scope) { var sometext = {}; sometext.message = ' 지금여러분의여정은시작됐습니다.'; $scope.sometext = sometext; }); </script> </body> </html> 01 역자주 _ 'myapp' 은애플리케이션관련부분을나타내는네임스페이스고 myappmodule은네임스페이스 myapp을사용하는모듈이다. 2 장 AngularJS 애플리케이션해부 21

38 수정한코드를살펴보자. 먼저 ng-app 지시어에모듈명 myapp을지정했다. 이후에스크립트에서 Angular 객체를호출해서 myapp이라는모듈을생성한후, 생성한모듈의컨트롤러함수를호출하여작성한컨트롤러함수를매개변수로전달했다. 뒤에서모듈에대해보다자세히살펴볼것이다. 지금은전역네임스페이스를제쳐 두고생각하는것이좋은데, 그러기위한방법으로모듈을사용한다. 2.3 템플릿과데이터바인딩 Angular 애플리케이션에서템플릿은다른정적리소스처럼서버에서로딩되거나, <script> 태그안에정의하는 HTML 문서에불과하다. 템플릿안에 UI를정의할때는표준 HTML과 Angular 지시어를사용한다. Angular 지시어를사용하려면 UI 컴포넌트가필요하다. Angular 는우선웹브라우저에서템플릿을데이터와합쳐완전한애플리케이션을 만든다. 이렇게템플릿과데이터를합치는코드는 1 장에서장바구니에든품목들 을표시하는예제를통해살펴보았다. <div ng-repeat="item in items"> <span>{{item.title}}</span>... </div> 앞의코드는바깥의 <div> 를한번표시한후, items 배열의원소마다 <div> 안의 내용을반복해서표시한다. 그럼이데이터는어디에서왔을까? 장바구니예제에서는데이터를코드의배열 안에정의했다. 이런방식은 UI 를제작하면서어떤식으로돌아가는지테스트할 2 장 AngularJS 애플리케이션해부 22

39 때적합하다. 그러나애플리케이션대부분은서버에저장되어있는데이터를사용 한다. 웹브라우저에서띄운애플리케이션이서버에접속해서사용자가로딩한페 이지에필요한데이터를요청하면, Angular 는그데이터를템플릿에결합시킨다. 기본적인시작단계는다음과같다. 1. 사용자가애플리케이션의첫페이지를요청한다. 2. 사용자의웹브라우저가서버로 HTTP 접속을하고템플릿이든 index.html 페이지를로딩한다. 3. Angular가 index.html 페이지안에로딩되고, 페이지로딩이완료될때까지기다렸다가 ng-app 지시어를찾아서템플릿경계를인식한다. 4. Angular는템플릿을살피면서지시어와바인딩을찾아리스너등록과 DOM 조작을수행하고서버에서초기데이터를가져온다. 마침내애플리케이션의부트스트랩이완료되고템플릿은 DOM을통해뷰로변환된다. 5. 애플리케이션은서버에접속해서필요한경우사용자에게보여줄추가데이터를로딩한다. 1단계부터 3단계까지는모든 Angular 애플리케이션에공통적으로적용된다. 개발자는 4단계와 5단계를선택할수있다. 두단계는동시에이뤄질수도있고순차적으로이뤄질수도있다. 맨처음에뜨는뷰에는요청횟수를줄여성능을높이기위해표시할데이터를 HTML 템플릿과함께수신하는방법도있다. Angular를이용해애플리케이션을구조화하면, 애플리케이션의템플릿과그안에채워질데이터를따로유지할수있다. 그래서템플릿을캐시에저장할수있다. 최초로딩후에는새데이터만웹브라우저로수신되면된다. 자바스크립트, 이미지, CSS를비롯한리소스와마찬가지로, 이렇게독립된템플릿을캐시에저장하면애플리케이션의성능이훨씬더좋아진다. 2 장 AngularJS 애플리케이션해부 23

40 2.3.1 텍스트표시 ng-bind 지시어를사용하면 UI 내부의어느위치에서든텍스트를표시하고업데이트할수있다. ng-bind 지시어의문법은두가지다. 다음과같은이중중괄호문법은앞서살펴보았다. <p>{{greeting}}</p> 또다른문법은다음과같이 ng-bind 지시어를속성으로지정하는것이다. <p ng-bind="greeting"></p> 앞의두방법중어느것을사용하든결과는같다. 만약 greeting 모델변수에 "Hi there" 값이지정돼있다면 Angular 는다음과같은 HTML 을생성한다. <p>hi there</p> 이 HTML 은웹브라우저에 "Hi there" 이라는문자열을표시한다. 그런데왜한문법이다른형태의문법보다더많이사용될까? 필자가이중중괄호를사용하는인터폴레이션문법을만든이유는보다읽기편하고코딩을위한타이핑분량을줄이기위해서다. 두문법모두결과는같지만, 이중중괄호문법을사용하면애플리케이션의최초페이지인 index.html을로딩할때 Angular가중괄호문법을데이터로치환하기전에사용자가렌더링중인템플릿을보게될가능성이있다. 단, 로딩된이후에는뷰에이런문제가생기지않는다. 이렇게되는이유는웹브라우저가 HTML 페이지를로딩한후, 그페이지를렌더 2 장 AngularJS 애플리케이션해부 24