angular2 튜토리얼 Tour of heroes 구조 빠르게 파악

https://angular.io/guide/quickstart

앵귤러5가 튀어나오는 마당에 왜 이글을 쓰고있는지는 모르겠지만 어쨌든 필요해서 쓴다.

2는  1과는  상당히 많이 달라졌는데  컨트롤러가 사라지고 컴포넌트기반으로 변해버렸다.

이것조차 읽을시간이 없으면, 다음과 같은 구조만 파악하면 될듯하다.

https://embed.plnkr.co/?show=preview

라이브  예제를 참조하면, 다음과 같은 구조인것이 파악된다.

일단 npm  start  명령어를 통해 구동시킨다. 내부적으로  browser-sync가 작동하고 있기 때문에, 코드를  고치고  저장을 누르는 순간 바로  반영이 된다.

main.ts

일단, main.ts로 접근을 하면 앱모듈을  로딩하고 있는것을 확인할수있다.

app.module.ts

앱모듈에서는 필요한 컴포넌트들을 죄다 불러오고있는것을  확인할수있다.

dashboard.component.ts / hero-detail.component.ts / app.component.ts

이 컴포넌트들은 웹페이지 부분부분을 구성하는 하나의 구성품이라고 생각하면 된다. 단위별  기능이 돌아가고 있으며, 관심사에따라 나눠놓은 것이라고 보면 된다.

다만 여기서는 app이란 이름을 가진 녀석이 라우터링크를  가지고  있으면서 하위로 대시보드와 히어로디테일을 띄워주는 형식을 지닌다.

hero.ts

단순한 클래스

hero.service.ts

실제적으로 뒤에 백단과 통신을  하는 놈이라고 보면 된다. 컴포넌트가 화면 기능단위 하나를 컨트롤하는  놈이라면, 서비스는  컴포넌트에게 데이터등을 가져다주는 백조의 다리같은 녀석이라고 보면된다.

서비스를 눌러보면 죄다 Promise라는 놈으로 래핑되어있는것을 확인할수있는데, 비동기통신을 할때 콜백으로  구현하기가 쉽다. 실제적으로 다른 컴포넌트가 이 서비스를 이용할때 바로 메서드를 호출하는게 아니고 => 연산자로 콜백함수를 구현하고 있는것을  볼수있다.

Observable은 계속해서 서버를 쳐다보고있다가 업데이트되거나 서버로부터 뭔가 반응이 있을때 연속해서 참조를 해야하는 경우 구현하는 놈이라고 보면 될듯하다.

나머지 html과 css는 화면상 보이는  템플릿이고, in-memory-data.service.ts는 http통신시 테스트용으로는 뭔가 짜치니 내부디비를 일단 이용하는 개발용 디비이다