Angular
Angular는 SPA(Single Page Application) 개발을 위한 Google의 Open source JavaScript Framework.
Framework and Library
Library는 관련있는 함수를 모아놓아 개발자가 사용할 수 있는 도구이다. 즉, Library는 개발자에 의해 사용된다.
Framework는 클래스와 인터페이스의 집합으로 Application의 Flow를 쥐고 있다. 개발자가 Framework 틀 내부에서 작업하는 것이다.
전통적인 웹 개발에서 JavaScript는 HTML/CSS에 의존한다. 의존한다는 것은 HTML/CSS에 접근해서 조작하는 방식으로 JavaScript 코드가 작성되었다는 것을 뜻한다. 이는 HTML/CSS가 변경되면 JavaScript 코드도 영향을 받음을 의미한다.
Angular는 HTML/CSS가 JavaScript에 의존하도록, 즉 JavaScript 코드의 상태 데이터 (State)에 바인딩해서 상태가 변경될 때마다 Rendering되도록 한다. HTML/CSS를 JavaScript의 Rendering 함수 내부의 문자열로 관리하면 앞서 말한 동작이 가능하다.
Advantages of Angular
- 컴포넌트 기반 개발(CBD: Component Based Development) 로 생산성이 좋다. Web에서 컴포넌트 기반 개발이 어려운 이유는 CSS가 서로에게 영향을 주기 때문인데, Component 별로 CSS를 분리해내는 게 중요하다.
- TypeScript 사용으로 정적 타이핑, ES6과 ESNext의 기능을 지원한다.
- Angular는 대부분의 모던 브라우저를 지원한다. IE는 9 이상을 지원한다.
Angular Project
app.component
Application의 root Component로, 실행 기본 page. (index.html처럼)
app.component.spec.ts
test specification
ng build 후 map file
디버깅용
app.module
전체 모듈을 관리하므로 component 추가시 module에 추가됨
Component 생성 후 module file의 declarations에 추가해줘야함
Generate Component Shortcut
1 | ng g c service -s -t --skip-tests (-S) |
ng generate
| component | UI를 만들기 위해서 존재 |
|---|---|
| sercive | component와 직접적인 연관이 없는 state 관리 |
component가 활성화된다 => component가 메모리에 올라가면 view가 보임
1 | System.out.print('이거슨 java'); |
