Web/Angular (5) 썸네일형 리스트형 Rxjs duplicated assign issue Observable을 구독하는 Subscription 변수에 한번 더 assign 한다면 어떤 일이 발생할까요? 아래 코드를 보고 상황을 살펴보겠습니다. class RxjsAssignment { constructor() { this.subscribeWindowScroll(); this.subscribeWindowScroll(); this.unsubscribeWindowScroll(); } private windowScrollSubscription: Subscription; subscribeWindowScroll(): void { this.windowScrollSubscription = fromEvent(window, 'scroll').subscribe((event) => { this.onS.. [Angular] Pipe view에 맞게 데이터를 변경할 때, 단순한? 방법은 component ts에서 view용 변수를 하나 선언하고 원하는대로 데이터를 변형해서 초기화하는 방법일 것입니다. 하지만 앵귤러에서의 Pipe를 이용하면 굳이 컴포넌트를 거치지 않고 바로 뷰에서 원하는대로 데이터를 변형시킬 수 있습니다. 아래 예시를 보면, 위에는 component에서 template용 변수를 생성한 경우고 아래는 pipe를 이용한 코드입니다. 엄청 간단해지는!! import { Component } from '@angular/core'; @Component({ selector: 'app-uppercase', template: `angular's uppercase is {{ angularUpper }}` }) export class .. [Angular] User Input - 사용자 입력 앵귤러의 사용자 입력에서 불필요한 코드를 제거하고 디펜던시를 제거할 수 있는 부분을 살펴보는 글입니다. 아래 코드들과 정보는 앵귤러 공식 문서를 참조했습니다. angular에서 사용자 입력(input, click 등)을 받을 때 아래 코드처럼 $event를 통째로 넘기고 그 이벤트에 맞게 타입을 정의해서 사용할 수 있습니다. 아래는 keyup이라는 이벤트가 발생했기에 onKey() 함수에서의 파라미터 타입을 KeyboardEvent로 명시하여 사용합니다. @Component({ selector: 'app-keyup', template: ` {{values}} ` }) export class KeyUpComponent_v1 { values = ''; onKey(event: KeyboardEvent) { /.. [Angular] Unsubscribe http request Observable을 unsubscribe 하는 것은 메모리 관리에 있어서 매우 중요한 이슈입니다. 그래서 저는 보통 rxjs 함수들로 자동으로 구독 해제하거나 (ex. take, takeUntil ... ) async pipe를 사용해서 필요한 경우가 아니라면 따로 unsubscribe를 해주지 않습니다. 하지만 이외에도 굳이 unsubscribe 해주지 않아도 되는 것이 있었는데..! 단발성 데이터에 대해서는 필요가 없는 것입니다. http request의 경우에도 서버에서 한번 받아오면 끝나는 작업이기에 바로 complete가 호출되버립니다. 코드로 한번 비교해보도록 하겠습니다. const test = this.testService.getData().subscribe( data => console... [Angular] Lazy-loading SPA의 대표적인 단점이 초기 구동시간이 오래걸린다는 점입니다. 이를 보완하기 위한 방법이 Lazy Loading입니다. 기능모듈들을 초기에 로드하지 않고 요청이 있을 때 로드하는 방법입니다. 아래는 앵귤러 공식 사이트에서의 예제를 작성한 코드입니다. https://github.com/steadev/angular-lazyloading-testing-app Lazy loading을 하는 방법은 라우팅 객체의 loadChildren 안에서 모듈을 import 합니다. app routing module에서 아래와 같이 customers, orders의 라우팅 설정을 해놓고 customer 버튼을 눌렀을 시, localhost:4200/customers로 라우팅이 되면서 customer 모듈을 import 하는.. 이전 1 다음
