Angular CodeLab 두번째
•
0 likes•189 views
Angular CodeLab 두번째 https://medium.com/frontend-developers/angular-codelab-%EB%91%90%EB%B2%88%EC%A7%B8-61240e077c25
Recommended
More Related Content
What's hot
What's hot (13)
Similar to Angular CodeLab 두번째
Similar to Angular CodeLab 두번째 (20)
More from SangHun Lee
More from SangHun Lee (20)
Angular CodeLab 두번째
- 1. Angular CodeLab Angular CodeLab 20 Oct, 2018 이상훈
- 2. Angular CodeLab Contents 학습 가이드 개발 도구 서비스 옵저버 패턴 라우팅 HTTP Rxjs
- 4. Angular CodeLab 1.키워드 익히기 •Angular는 다른 라이브러리나 프레임워크에 비해 러닝 커브가 높다. •첫 진입을 어떻게 하느냐에 따라 흥미가 붙어 지속적으로 하거나 포기하거나 할 수 있다고 생각하기 때문에 처음에는 잘 정리된 서적을 보고 이해하고 따라하면 서 익히는 것을 추천 •angular.io을 읽고 따라하는 것은 가장 좋은 방법 2.프로젝트 개발! 개발! 개발! •키워드를 익혔기 때문에 어떤 기능을 구현할 때 “어떻게 검색해보면 되겠다” 가 됨 3.실력을 올려보자 •어느정도 흥미가 붙고 익숙해진다면 중상급자들의 컨텐츠(유튜브나 블로그 등) 를 보면서 효율적으로 처리하는 방법이 있는 것을 깨닫는다. •컨퍼런스, 세미나 등에 참여해서 아키텍처적인 문제나 막히는 부분 등을 알아간다 4.업데이트 시 change log는 필수 확인(18-10-18 Angular 7 공식 릴리즈!) 학습 가이드
- 5. Angular CodeLab 사이트 인프런: https://www.inflearn.com/?post_type=course&s=angular DesignCourse: https://www.youtube.com/user/DesignCourse/featured Academind: https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w yamoo: http://slides.com/yamoo9/angular#/ 서적 Angular Essentials: http://www.yes24.com/24/Goods/62063090?Acode=101 학습 가이드
- 6. Angular CodeLab 1. IDE •Jetbrains Intellij, Webstorm •VS code •Atom •Sublime text •StackBlitz: VS code 기반의 online IDE 2.VS Code 플러그인 •Angular Language Service •ESLint •Typescript Toolbox 개발 도구
- 7. Angular CodeLab 내장 Directive(*ngFor, *ngIf)를 이용하여 엘리먼트 전시 관리 Component의 개념 이해와 생성 read-only 데이터를 위한 단방향 데이터 바인딩 양방향 데이터 바인딩을 통한 편집 가능한 필드 추가 키보드나 마우스 이벤트 등을 컴포넌트 메소드와 바인딩 부모 - 자식 간의 컴포넌트 통신 Pipe를 통해 데이터 포맷을 바꾸기 히어로 데이터를 Service를 통해 공유 각각의 Component와 뷰들 사이를 라우팅 지난 내용
- 8. Angular CodeLab 컴포넌트의 관심사와 어플리케이션 전역의 관심사를 분리하는 것에서 시작 로깅 기능이나 서버 통신 기능 등은 서비스에 선언하고 컴포넌트 는 뷰를 전시하는데 초점을 맞춤 이를 통해 코드의 재사용성은 높이고 복잡도는 낮춤 서비스(Service)
- 9. Angular CodeLab 의존성 주입(DI, Dependency Injection): 느슨한 결합을 위해 구성 요소 간의 의존 관계를 코드로 정의 하는 것이 아니라 외부 설정을 통해 정의하는 디자인 패턴 뭔가 필요한게 있으면 내가 가서 찾아 오던지 직접 만드는 대신 무 엇이 필요하다고 선언만 하면 외부에서 알아서 제공해주겠다는 것 서비스(Service)
- 10. Angular CodeLab 인젝터(Injector): 의존성 주입을 요청 받으면 서비스 인스턴 스들을 모아둔 인스턴스 풀(pool)에서 이를 검색하고 주입하 는 역할을 한다. 인스턴스 풀에 존재하지 않는다면 새롭게 인스턴스를 생성하 지만 존재한다면 새롭게 생성하지 않고 이미 생성된 인스턴 스를 주입한다.
- 11. Angular CodeLab @Injectable 데코레이터: 클래스를 의존성 주입이 가 능하도록 한다. providedIn: ‘root’로 설정 시 어플리케이션 전역에 서비스를 주입 가능 서비스(Service)
- 12. Angular CodeLab 옵저버 패턴(Observer Pattern) https://www.slideshare.net/ancror/design-patterns-observer-pattern
- 13. Angular CodeLab 옵저버 패턴(Observer Pattern) https://github.com/iirvine/principles-of-reactive-programming/blob/master/notes/week-4/003-subscriptions.md Observable: 구독할 상대 subscribe: 구독하는 행위
- 14. Angular CodeLab SPA(Single Page Application)을 위해 한 페이지 내 에서 컴포넌트를 변경해가며 전시 클라이언트 사이드 내비게이션 구현 방식 요청 URL 경로와 컴포넌트를 쌍으로 구성하여 처리 라우팅(Routing)
- 16. Angular CodeLab <router-outlet></router-outlet> router에 등록된 컴포넌트가 전시되는 장소 routerLink 네비게이션 링크 사용자 클릭을 라우터 탐색으로 바꾸는 디렉티브 라우팅(Routing)
- 19. Angular CodeLab HTTP 히어로 관리 서비스 getHeroes() getHero() addHero() deleteHero() updateHero() 메시지 관리 서비스 add() clear()
- 20. Angular CodeLab HTTP angular-in-memory-web-api 임시로 mock 서버를 구축하여 확인해보기 위한 모듈 Http Request를 가로채서(interceptor) 대신 응답 해줌 HTTP 관습에 맞게(Restful하게) 요청한다면 기본적인 HTTP 메소드 기능이 가능 •목록 조회: GET “api/heroes” •아이디로 조회: GET “api/heroes/:id” •이름으로 검색: GET “api/heroes/?name=‘검색어’” •추가: POST “api/heroes”, body: 추가할 데이터 •아이디로 삭제: DELETE “api/heroes/:id” •수정: PUT “api/heroes/“, body: 수정할 데이터
- 21. Angular CodeLab HttpClientModule Angular에서 HTTP 통신 시 쓰이는 모듈 get, post, put, delete 등 HTTP 메소드 포함 모든 반환형은 Observable
- 22. Angular CodeLab Rxjs 앞서 설명한 옵저버블 패턴의 구현체 pipe(): 연산자들을 파이프 안에서 나열 연산자(operators) Observable을 생성, 변환, 필터링, 에러 처리 등의 기능을 하는 함수 tap: 사이드이팩트 없이 그대로 Observable 전달 catchError: 오류 발생 시 catchError의 핸들러 실행, 오 류가 발생하지 않는다면 bypass! 그 외에도 유용하게 쓰일 수 있는 많은 연산자가 존재
- 23. Angular CodeLab Rxjs 앞서 설명한 옵저버블 패턴의 구현체 pipe(): 연산자들을 파이프 안에서 나열 연산자(operators) Observable을 생성, 변환, 필터링, 에러 처리 등의 기능을 하는 함수 tap: 사이드이팩트 없이 그대로 Observable 전달 catchError: 오류 발생 시 catchError의 핸들러 실행, 오 류가 발생하지 않는다면 bypass! 그 외에도 유용하게 쓰일 수 있는 많은 연산자가 존재