본문 바로가기
반응형

패스트캠퍼스/수업내용정리29

2019-07-01 Angular Http Angular http getTodos() { this.http.get('http://localhost:3000/todos') .subscribe(todos => this.todos = todos); // 인수로 옵저버이다. 옵저버가 url을 관측 // 옵저버블 (관측대상) 데이터스트림을 방출할 수 있다. 옵저버가 있으면 방출하겠다. 옵저버가 옵저버블을 관측할거야라는 // 관계를 맺어주는게 subscirbe 이다. observable은 객체, observer는 함수 이다. // 옵저버 => 데이터가 왔을때 할일을 적어준다. 결론적으로 promist then과 비슷. } if (error.error instanceof ErrorEvent) { // 에러타입을 구분한다. // 클라이언트 측의 에러 conso.. 2019. 7. 1.
2019-06-25 Angular Lifecycle Hooks, Service, RxJS Lifecycle Hooks 생명주기 : 컴포넌트와 디렉티브가 생성하고 소멸되기까지의 여러과정 훅 메소드들 ngOnChanges : 입력 프로퍼티로 바인딩한 값이 초기화 또는 변경되었을때 실행 ngOnInit : constructor와 비슷하게 한번만 동작. 프로퍼티의 초기화가 완료된 시점에 한번만 호출 ngDoCheck : 변화감지 로직이 실행될 때 호출 ( 가급적 사용하지 않고, 변화감지가 잘 될 수있도록 코딩 한다.) 등등.. 콘텐트 프로젝션 // 부모의 component Single-slot content projection // 자식의 component // 이부분이 바꿔치기가 된다. 서비스 (Service) 자신의 주요 관심사 이외의 부가적인 기능은 애플리케이션 전역의 관심사인 경우가 많다. .. 2019. 6. 25.
2019-06-24 Angular 디렉티브 Angular 디렉티브 디렉티브는 애플리케이션 전역에서 사용할 수 있는 공통 관심사를 컴포넌트에서 분리하여 구현한 것으로 컴포넌트의 복잡도를 낮추고 가독성을 향상시킨다. 컴포넌트도 뷰를 생성하고 이벤트를 처리하는 등 DOM을 관리하기 때문에 큰 의미에서 디렉티브로 볼 수 있다. // test directive import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appTextBlue]' }) export class TextBlueDirective { constructor(public el: ElementRef) { // 의존성 주입 , public을 사용한 el은 TextBlueDirective클래스안 클래스필드 어.. 2019. 6. 24.
2019-06-17 typescript generic / Angular template, Data binding [ 1 , 2, 3 ] 앞쪽에 집어 넣는 것은 unshift / 앞쪽에서 뺴내는 것은 shift 뒤에 집어 넣는 것은 push / 뒤에서 뺴내는 것은 pop [...todos, {....}] = push (같은의미 todos.concat({....}) ) [[{....}], ...todos] = unshift ( 같은의미 [{....}].concat(todos) ) arr[arr.length-1] = pop arr[0] = shift protected는 클래스 내부와 , 상속받는 클래스 내부에서 참조 가능 자바스크립트의 배열은 연결리스트로 되어있다. 다른언어의 배열은 int arr[4]를 했을때 int형태의 배열공간을 연속되게 4개를 가진다. 하지만, 자바스크립트의 배열은 여러가지 타입들이 올 수 있기 .. 2019. 6. 17.
반응형

티스토리툴바