Icednut's Note

앵귤러 첫걸음 저자 세미나 노트

2017-07-22

커리큘럼

  1. 프론트엔드 개발환경의 변화와 앵귤러 맛보기
  2. 앵귤러 아키텍처
  3. 앵귤러 프레임워크 활용 예시
  4. 질의응답 및 마무리



시작하기 전에..

  • Angular Framework 전체 구조를 알아보고 Angular CLI, Spring-boot를 사용하여 데모 프로젝트 개발 과정 소개할 예정
  • Angular로 Server Side Rendering을 하기 위해 Angular preboot 프로젝트가 진행되고 있다고 함 (세미나에서는 다루지 않음)
  • 저자는 프론트엔드 전문 개발자는 아니며 백엔드 개발자이지만 운영툴을 만들면서 Angular를 접하게 되었다고 함.



프론트엔드 개발환경의 변화와 앵귤러 맛보기

  • Javascript, jQuery의 탄생 (Javascript는 Brendan Erich가 2주만에 만들었다고 함. 만들 당시 Prototype 프로그래밍과 스크립트에 심취해 있어 Javascript에 해당 철학들이 녹아들어졌다고 함)
  • 브라우저 별 ES6 지원 현황: http://kangax.github.io/compat-table/es6
  • JS가 2015년도에 왜 갑자기 관심을 받기 시작했을까? 저자 생각으로는 node.js 때문이 아닐까라고 생각..
  • Node.js 덕분에 Javascrit를 브라우저에서 벗어나 서버 웹어플 개발에도 사용할 수 있게 됨 -> 그래서 JS가 발전하게 되었다고 생각함.

프론트엔드의 주요 3대 도구 분류

  • 패키지 관리 도구
    • Bower
    • NPM
    • Yarn
  • 자동화 및 Task 도구
    • Grunt
    • Gulp
    • Yeoman
    • NPM
  • Compiler (Preprocessor)
    • CoffeeScript
    • Babel
    • Typescript

Module화를 향한 노력

  • CommonJS, AMD(RequireJS)
  • Webpack, Module in ES6



Angular Framework 이해하기

  • Angular is a framework.
  • Angular는 Client application(Web, Mobile Web, Native Mobile, Native Desktop)을 좀 더 만들기 쉽게 하기 위해 나왔으며 Typescript로 개발할 수 있다.
  • 앵귤러는 매주 마다 뭘 개발할건지 그리고 뭘 배포할 것인지 공유를 한다고 함 (올해 말에는 구글 내부에서 사용하는 빌드 툴도 개발할 계획이라고 함)
  • 구글은 Angular를 이용한 웹 어플리케이션의 정석 결과물을 오픈 소스로 공개했다.
  • Angular는 왜 Typescript를 차용했을까? 이걸 참조할 것 (http://www.notforme.kr/archives/1809)
  • ngrx (Angular Redux)

주요개념1. Component

  • 모든 View는 Component로 통한다. (컴포넌트는 앵귤러에서 처음 나온 개념은 아니고 웹 컴포넌트라고 이미 있었음. ex: polymer)
  • 컴포넌트 기반으로 웹어플 개발을 할 때는 컴포넌트들은 트리 구조로 관리 된다는 것을 기억하자.
  • 컴포넌트 트리의 최상위 루트 컴포넌트는 관례적으로 AppComponent이다.

주요개념2. Template

  • Template? View를 구성하는 Angular-style의 마크업
  • Component와 짝꿍

주요개념3. Component Lifecycle

  • 어플리케이션이 컴포넌트가 언제 생성되고 관리 되는지에 대한 라이프사이클을 알고 있어야 됨.
  • 라이프사이클에 따른 컴포넌트 관리는 Angular Framework가 해줌
  • 컴포넌트 라이프사이클에 대한 Hooking은 ngOnChanges, ngOnInit, ngDoCheck, …, ngOnDestory를 구현하여 할 수 있음.
  • Angular를 처음 써본사람들의 실수가 constructor와 ngOnInit의 차이를 잘 몰라서 constructor에 뭔가 초기화 코드를 작성하려고 한다는 점.
    • constructor에서 구현하면 안되고 ngOnInit을 사용하자.
  • ngDoCheck() -> 컴포넌트를 쫙 스캔할 때 호출되는 메소드(? 뭔지 좀 더 알 필요가 있음)

주요개념4. Directive & Pipe

  • Directive와 Pipe는 Template에서 사용하는 개념
  • Directive: View를 동적으로 제어하기 위한 요소
  • Structural Directive
    • NgIf, NgFor, NgSwitch, …
  • Attribute Directives
    • NgStyle, NgClass, …
  • Angular에서는 document를 통해서 DOM 셀렉팅 및 변경하는 것을 죄악시 함. Angular가 그런 부분들을 다 하려고 노력.
  • Pipe: View에 노출하는 데이터를 변형할 때 사용
    • ex: \{\{ now | date:'YYYY-MM-dd' \}\}
    • ex: json beauty pipe

주요개념5. Data Binding

  • View와 컴포넌트를 따로 테스트 할 수 없을까? 테스트하려면 셀레니움을 통한 통합 테스트를 해야되는데 그거 말고 view만 테스트하고 싶을 때는? Data Binding을 통해 View와 컴포넌트의 종속성을 제거
  • Component(+Template)과 View 사이의 연결 고리
  • Angular에 제공하는 3가지 바인딩: Property(In), Event(Out), 2-way Binding
  • Attribute와 Property의 차이점
    • Html DOM을 브라우저에 로딩하기 전에는 Attribute지만 로딩하여 메모리에 올라간 것이 Property
    • Angular는 여기서 Property를 변경해준다. (Attribute 변경이 아님)

주요개념6. Service & Dependency Injection

  • 단일책임원칙, 의존성 주입
  • Angular는 constructor의 파라미터로 의존성을 주입받는다.
  • 컴포넌트마다 providers를 쓰는 것은 지양하긴 한다. 왜냐 DI 받으려고 하는 정보가 바뀔 때마다 모든 컴포넌트를 다 찾아가서 고쳐야되기 때문.
    • AppModule의 providers에 정의하면 모든 컴포넌트의 constructor에서 DI 받을 수 있다.

주요개념7. Module

  • 여기서 말하는 모듈은 ES6에서 말하는 모듈은 아님
  • 앞의 주요 개념에 대한 Angular 요소들을 하나로 담은 컨테이너라고 보면 됨.
  • ex: FormsModule, RouterModule, …
  • AppModule는 Angular로 개발할 때 딱 1번만 작성하면 됨.



Angular CLI & Spring-boot를 이용한 데모 시연

  • Google 내부에서는 Angular-cli를 쓰진 않는다고 함.
  • Google에서는 추후 Bazel(https://bazel.build/) + CLouser 기반의 빌드 도구를 내놓을 수도 있다고 함.
  • 저자 말로는 현재까지 Angular 개발 시 Angular-cli가 제일 좋다고 함. (저자의 의견일 뿐)
  • 저자는 nginx의 gzip 옵션을 붙여서 쓴다고 함
  • 데모는 Todo App을 라이브코딩 했는데 시간에 쫓겨서 Todo 등록, 조회만 구현
Tags: Angular