happygrammer

쉽고 빠르게 배우는 Angular 2 프로그래밍 출간 회고... 본문

쉽고 빠르게 배우는 Angular 2 프로그래밍 출간 회고...




쉽고 빠르게 배우는 Angular 2 프로그래밍 (위키북스) 출간 회고

(2016년 6월 ~ 11월)


Angular는 그 동안 여러번의 버전 변화가 있었습니다. 아시겠지만, Angular JS에서 Angular 2로 넘어오는 과정이 큰 변화가 있었습니다. 이 변화는 업데이트가 아닌 전면적인 변화였습니다. Angular 2는 기존에 접해 보지 않았던 타입스크립트라는 언어와 새로운 개발 환경으로 개발을 진행합니다. 또한, 프런트 엔드 개발 환경임에도 불구하고, 타입스크립트를 컴파일해야 한다는 낯선 경험을 마주하게 됩니다. 이러한 이유로Angular에 관심 있는 개발자들에게 Angular 2는 어려운 프레임워크라는 인식이 형성 되었습니다. 하지만 타입스크립트는 Angular를 위해 반드시 필요한 언어이며, 타입스크립트를 학습하는 과정은 최신의 ECMA 스크립트를 학습할 수 있는 기회를 가져다 줍니다. 또한, Angular의 개발 환경은 최신 프론트엔드 환경을 경험하는 학습 과정으로 프론트엔드 개발력이 높아지는 기회가 됩니다. Angular 2가 새롭기 때문에  이 책은 전반적으로 모든 것이 낯설 수 있다고 생각합니다.  저는 이 책을 쓰면서 가장 주안점으로 삼았던 것은 우선순위로 정리하면 다음 세가지 입니다.


- 첫번째로, Angular 2에 등장하는 개념들을 대체로 담아 Angular의 기본을 담는 것에 집중했습니다.

- 두 번째로, Angular 공식 가이드에서 안내해주지 못하거나, 장황한 내용들을 보다 쉽게 풀어서 설명하는 데 집중했습니다.

- 세 번째로, Angular의 철학이나 방향, 그리고 Angular의 방향성을 고려해 내용을 작성했습니다.


컴포넌트 중심의 개발을 해야 한다는 개념 전환이 필요합니다.  Angular 2는 컴포넌트 기반이기 때문에 하나의 예제의 작성 하더라도, 애플리케이션 개발의 기술이 생깁니다. Angular 2는 컴포넌트 중심으로 개발하고, 컴포넌트를 잘 조립함으로써 애플리케이션을 개발할 수 있습니다. 이 책은 컴포넌트를 중심으로 다른 구성 요소간에 관계를 맺으며 어떻게 애플리케이션이 개발 되는지를 담으려고 노력했습니다.


개념와 예제 위주의 책 서술 방식

책은 개념 위주로 서술 했습니다. Angular 2를 새롭게 접하셨다면, 다소 어렵게 느껴질 수 있습니다. 그리고 책 전개상 개념과 예제는 대체로 1:1로 맵핑되도록 했습니다. 아마도, 인터넷에 떠도는 많은 예제들 보다 상대적으로 책의 예제는 난이도가 쉽고 직관적인 예제라 생각합니다. 그리고 개념 위주로 예제를 작성해도 괜찮았던 이유는, 컴포넌트가 하나의 애플리케이션을 나타내므로, 컴포넌트 하나를 작성하고 나면 애플리케이션을 만드는 하나의 방법을 습득할 수 있다고 판단이 들어서 입니다.


특히 Angular 2의 많은 외서들이 프로젝트 위주로 기술이 되었는데, 프로젝트 기반으로 책이 구성되어 있는 것은 의미가 있지만, 프로젝트 위주로 기술된 책의 특징은 책을 덥고 나면 나만의 프로젝트에 적용하려면 다시 프레임워크에 나왔던 개념을 찾기 위해 사이트를 검색해야 하는 일이 발생했던 저의 경험이 있었기 때입니다.  프로젝트에 기반한 개념 서술보다는 개념을 위한 예제 기반 서술이 적합하다고 생각했습니다. 그래야만 책을 덮고 나서도 나만의 프로젝트에 참고할 수 있는 레퍼런스 성격의 책이 되리라는 생각과 믿음이 있었기 때문입니다. 


책 출간 후, 아쉬웠던 점

책에는 튜토리얼이 포함되지 못했는데, 이는 Angular 개념 설명과 예제를 우선 적으로 고려했고 시간 관계상 블로그 만들기와 같은 튜토리얼 형식의 내용은 넣지 못했습니다. 많이 아쉬웠던 부분이고, 아마 이 부분은 차후 보완할 예정입니다. 그리고 독자의 의견을 받다 보니 책에 내용에 혼동이 올 수 있는 표현들이 있었습니다. 이러한 부분은 차후 그림이나 여러 방법을 동원해 명확하게 그리고 선후 관계가 잘 드러나게 개선할 예정입니다..


원어 번역 기준

Angular 2는 외국에서 만들어진 프레임워크이고 많은 역서들이 혼란을 방지해서 용어 그대로 쓰기도 하고 번역을 하기도 했습니다. 저는 책을 쓰면서용어의 번역 기준을 다음과 같이 정했습니다.


- 사례 1 : 한국어 이해가 편하고, 이미 번역 사례가 많은 경우는 용어를 번역했습니다.  예 : directives -> 지시자 

- 사례 2 : 원어 이해가 편하고, 번역 사례가 많지 않은 경우는 원어 그대로를 사용했습니다. 예 :  component -> 컴포넌트

- 사례 3 : 한국어로 이해가 잘 안되고, 원어도 이해하기 어려운 경우는 과감히 의역했습니다. 예 : interpolation -> 삽입식


용어 번역시 대부분 사례 1, 사례 2만을 사용했습니다. 예외적으로 사례 3은 interpolation이라는 용어에만 적용했습니다. 인터폴레이션은 템플릿의 {{ }} 와 표현식(expression)이 결합된 {{ expression }} 자체를 말합니다. 인터폴레이션(interpolation)을 사전에서 찾아보면 보간법이라고 나와있습니다. 보간법이라고 하면 수학의 보간법이 연상되는데, 수학의 보간법과 Angular 보간법은 다른 의미입니다. 따라서, 인터폴레이션이라는 단어는 원어 자체도 어렵고 번역어도 어렵고 의미상 맞지 않기 때문에 Angular에 맞게 몇달 간 고민 끝에 삽입식이라는 용어로 대체했습니다. 삽입식이라고 하면, 템플릿에 삽입된 식(삽입되어 해석 가능한 표현식)이라는 의미가 되므로 Angular에서 사용상의 의미와 맞아 떨어진다고 생각이 됩니다.


Angular 2에 보다 빠르게 접근하기

Angular 2를 가장 빠르게 학습 방법은 이미 검증된 AngularCLI와 같은 개발 도구를 이용해 개발 환경을 빠르게 구축하고, 예제를 직접 실행해 가며 진행하는 것이라 생각합니다. 책 텍스트는 간단 명료하게 쓰려고 노력했지만 만약, 텍스트가 어렵게 느껴지신다면, 우선 책의 예제를 실재로 충분히 돌려 본 후에, 책을 읽는 방법으로 접근하면 보다 Angular 2에 빠르게 접근할 수 있을것이라 생각합니다. 책은 어떻게 하면 가장 빨리 Angular 2를 학습할 수 있을까?의 물음에 답하기 위한 내용들로 구성되어 있습니다. 저는 Angular 2를 빠르게 접근하려면 관련 예제를 충분히 돌려본 후 책 혹은 관련 자료를 통해 개념 위주로 접근하는 것이 좋은 접근이라고 생각하고 있습니다. 개념에 우선 접근하고, API는 기억이 안나면 나중에 찾아 보면 된다고 생각합니다.


Angular 2, Angular 4 ... 새로운 변화?

Angular 2 에서 Angular 4로 버전 변화가 예고되는 뉴스가 나오고 있지만 변화란 환경 중심적인, 성능 중심적인, 그리고 점진적인 변화가 될 것 입니다. 그러나 Angular가 가고자 방향성만큼은 버전이 바뀌더라도 그대로일 것입니다. Angular의 방향성은 빠르고 모바일 중심적인, 컴포넌트 중심적인, 지시자 중심적인, 최신 ECMA 표준을 지원하고 따르는, 엔터프라이즈급의 애플리케이션 개발을 추구하는, 생산적인 개발환경을 제공하는.... 저는 이 책을 저술하면서, Angular가 버전 변화가 있지만, 현재 시점에서 Angular의 기본이 무엇인지, 그래서 버전이 변하더라도 Angular 가 가지는 철학이나, 흩어져 버릴 수 있는 중요한 개념들을 어떻게 하면 하나의 책으로 녹여낼 수 있을까? 를 고심했습니다. 


새로운 환경에 맞설 수 있다는 마음이 있다면, 지금이라도  Angular 2 개발에 도전 해 보신다면 프론트엔드의 최신 표준과 최신 개발 트렌드를 알게 될 것이며, 여러분의 프론트엔드 개발 안목은 지금 보다 몇 단계 발전 되리라 생각합니다. Angular 2와 함께 성공적인 개발을 응원합니다. 


PS : 지금까지 책 출간 후 이메일로, SNS로, 오프라인으로 많은 분들이 응원해 주시고, 그리고 책에 대해 좋은 피드백을 주신 독자 여러분들께 깊은 감사의 말씀을 드립니다. 특히 피드백을 받는 과정을 통해 저보다 세심한 관찰력을 가지고 있는 독자들이 많다는 것을 알게되었습니다. 이 피드백을 주고 받는 과정들은 저에게 새로운 경험이였으며, 새로운 도전 거리(내용을 보다 쉽게, 내용을 보다 정확하게 등)를 주었습니다.  끝으로 2017년 새해 에는, Angular에 대한 많은 사랑과 관심 부탁드립니다. Angular 생태계 확장이 되어 Angular가 더욱 잘 되기를 바랍니다. 정말 감사드립니다.


책 소개 : http://wikibook.co.kr/angular-2

  • 프로필사진 codingkoo 2017.01.22 01:58 신고 책 출간 후, 아쉬웠던 점에서 블로그 만들기와 같은 튜토리얼을 넣지 못한 부분이 아쉽다고 하셨는데 독자인 저도 이 부분이 가장 아쉽습니다 ㅠㅠ 앞서 정립한 개념들을 한 번 정리하고, 실제 적용해보는 차원에서 하나의 프로젝트를 진행하는 예제가 있었다면 이해가 더욱 쉬웠을 것 같습니다. 저는 이 부분을 공식 튜토리얼인 Tour of Heores로 미약하게나마 해소하고 있습니다.
  • 프로필사진 happygrammer happygrammer 2017.01.24 12:40 신고 네. 튜티리얼이 많이 아쉬웠습니다. 그렇다 해서, 다시 내용을 구성한다해도 현재대로개념/주제 단위로 구성을 할것 같습니다. 튜터리얼 보다는 개념/주제 단위 구성이 참조하는데 유리할 수 있다는 판단입니다. (개인이 받아 들이는 것에 따라 다르게 느끼겠지만요)

    차 후 개정판이 나온다면 책 내용을 기반으로 핵심적인 내용들을 튜토리얼에 두루 담아서 곧 바로 진행해볼 수 있도로 실전 챕터를 별도로 분리해서 보완을 할 계획 입니다.

    좋은 피드백 감사드립니다.
  • 프로필사진 앵글리 2017.01.28 20:08 뉴비가 보기엔 조금 어려운것 같네요. 책산지 한달째 hello word도 못찍네요... 깃허브에서 예제 파일만 잔뜩 받아논상태구요.. angular JS는 프론트 엔드로 많이 써봐서 비슷한건 줄알고 만만하게 봤는데...
    깃허브에 나온 설명서 중....
    위 개발환경이 갖춰 줬다면 본 저장소의 /angular-cli/node_modules.zip를 /angular-cli/node_module 디렉터리에 압축을 풀고 ng serve 명령어로 angular-cli 프로젝트를 실행시킵니다.
    2번의 각 장의 소스코드가 들어 있는 디렉터리 위치를 참고해 "/각 장의 주제/src"의 폴더를 /angular-cli에 복사합니다.
    브라우저로 http://localhost:4200/ 에 접속한 뒤 실행 결과를 확인합니다.
    이게 무슨말인지 잘 모르겠어요.. /ts/src 복사 후 4200 접속해도 계속 app work! 만 뜨고...

    본문에 예제중 /ts/src/types/let/hoisting.ts 이렇게 되있는 제목을 보고 컴퓨터 루트 폴더 밑에 /ts 디렉토리를 만들란 말인가? 그럴리가? 이런거 가지고 씨름하다가 포기했습니다. 앵귤러의 입문도 하기전에 좌절이네요 ㅠㅠ 최소한 52 쪽에 있는 예제 하나 만큼 시작부터 실행결과를 출력 할때까지 과정을 보여주셨으면 좋았을 것같네요. 전 아직도 예제마다 아래 있는 실행결과가 비주얼스튜디오코드 출력창에 찍히는건지, 터미널에 찍히는건지, 브라우저에 찍히는건지, 실행결과를 보려면 브라우저 주소창에 패스를 입력해야하는건지... 이런거 가지고 씨름중 입니다.
    vscode 에서 ts파일 빌드하기우해 컨트롤시프트비 눌르면 error TS5042: Option 'project' cannot be mixed with source files on a command line.
    빌드 감시 작업이 완료되었습니다. 이런 오류나 뜨고 ㅠㅠ


    다른 기초강좌 동영상 부터 보고 와야겠습니다.
  • 프로필사진 happygrammer happygrammer 2017.01.29 15:47 신고 네. 올려주신 댓글을 보니까 제가 관과 했던 부분들에 대해서 다시 생각해 보게 됩니다. 아무래도 Angular 설정 과정이나 동작은 AngularCLI를 통해서 이루어지기 때문에 AngularCLI가 프로젝트 구성 요소를 대부분 처리해 주리라는 가정이 있었는데요, 우선 AngularCLI 기반 환경이 갖춰줬다면 구성 요소를 추가하거나 변경해 보는 것과 같은 실습을 해 보는게 좋을것 같습니다.

    /ts/src/types/let/hoisting.ts의 경우 책의 깃허브 예제 코드의 경로입니다. 깃허브 예제를 다운로드 받아서 hoisitng.ts를 실행하면 됩니다. hoisting.ts 파일을 어떻게 실행 해야 하는지에 대한 설명이 부족해 당황 하셨을 것이라 생각이드는데요. (2장 환경 구축에서 tsc 명령어를 설명하면서 이러한 설명이 되었다고 생각을 해서 3장에서는 설명을 안한것 같습니다.) 그렇다 해도, 이에 대한 추가 설명을 못드린점에 대해서 죄송하게 생각합니다.

    hoisiting.ts를 테스트 하기 위해, 브라우저가 아닌 터미널(콘솔 창)에서 tsc 명령어를 이용해 타입스크립트 hoisting.ts 파일을 hoisting.js 파일로 트랜스파일링 한 후 node test.js 와 같은 방식으로 실행해 콘솔 결과를 확인할 수 있습니다. 이러한 과정이 다소 번거로울 수 있기 때문에 ts-node와 같은 모듈을 이용하면 곧 바로 타입스크립트 컴파일 결과를 콘솔에서 확인할 수 있습니다. 아마 이러한 부분에 대한 설명이 부족했는데, 이 점에서 대해서 제가 보다 독자의 관점으로 생각하지 못했던 점에 대해서 반성중입니다. 타입스크립트 컴파일과 실행에 대한 추가 설명은 깃허브 https://github.com/wikibook/ng2-book/blob/master/README.md에 추가해 두었습니다.


    Angular에서 실행 결과가 출력을 보면 컴포넌트의 실행 결과의 경우 스크린샷을 출력해 놓았고, 내부 동작이 중요할 때는 console.log() 를 이용해 브라우저 로그 출력을 통해 결과를 확인할 수 있게 해 두었습니다.
  • 프로필사진 happygrammer happygrammer 2017.01.30 09:17 신고 예제 실행에 대해 추가 답변을 드리면 타입스크립트는 angular-cli 프로젝트가 아닌 타입스크립트 자체이기 때문에 angular cli와 무관한데요.

    "2번의 각 장의 소스코드가 들어 있는 디렉터리 위치를 참고해 "/각 장의 주제/src"의 폴더를 /angular-cli에 복사합니다."
    위와 같이 한 것은 angular-cli 프로젝트 환경과 angular-cli 프로젝트 위에 구성된 소스 코드 폴더(/src)를 프로젝트 환경의 중복의 이유로 분리해서 저장했기 때문입니다.
  • 프로필사진 질문자 2017.08.09 18:42 책을 보며 공부중인데 기본적인 실행방법등이 나와있지않아 초보자에게는 어려운것 같습니다.
    '4.3.3 Hello 컴포넌트 만들기'의 경우 실행결과를 보려면 어떻게 돌려야하는가요?
    답변 기다리겠습니다~
    -------------------
    아 확인하였습니다, 이거 정말 초보분들은 실행도 못해보겠는데요..
    책이 정말 친절하지 않네요. 글쓴이의 의도와 소스코드 구조를 분석해야하는 이런책은 처음입니다..
  • 프로필사진 질문자 2017.08.10 18:57 안녕하세요.
    1. 예제 6.23에서 오류가 있는것 같습니다.
    코드를 돌리면
    ERROR in Could not resolve "app/player/player.module" from "생략/angular-cli/src/app/app-routing.module.ts".
    이런식으로 뜨는데 확인부탁드립니다.

    2. p193 예제 7.15 코드도 오류가 있는것 같습니다.
    Class 'ChildrenResolve' incorrectly implements interface 'Resolve<Children>'
    확인부탁드립니다.
  • 프로필사진 jin 2017.08.22 18:48 저도 마찬가지네요 답답하네요. 오류 수정 코드 부탁드립니다.
  • 프로필사진 jin 2017.08.22 20:09 흠...걍 해보니까 됫네요.
    아래 부분에서 implements 부분 제거하시고 (저기에 왜 implements가 들어갓는지 몰겟내요 ;;;)
    루드 모듈(app.module.ts) 에 가셔서 auth 를 서비스 등록하니까 일단 되네요. 함 해보세요

    [children-resolve.service.ts]
    //export class ChildrenResolve implements Resolve<Children> {
    export class ChildrenResolve {

    [app.module.ts]
    // 서비스
    import { AuthService } from './login/auth.service';
    ..
    ...
    ...
    providers: [
    AuthService,

    // 라우팅 프로바이더
    appRoutingProviders
    ],
  • 프로필사진 스터디모집 2017.09.06 05:03 강남역 앵귤라 스터디를 모집합니다. 저는 현재 이책을 보며 공부중입니다.
    혹시 스터디 관심 있으신분은 네이버로 쪽지나 메일주세요~

    scka@naver.com
댓글쓰기 폼