Web (24) 썸네일형 리스트형 [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... [Javascript] RxJS - Subscription https://rxjs.dev/guide/subscription 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. Subscription 구독이란? 구독은 일회용 자원, 일반적으로 Observable의 실행을 나타내는 객체입니다. 구독은 unsubscribe라는 중요한 메소드를 가지고 있습니다. 이는 인자를 갖지 않고, 구독이 잡고있던 자원을 처리합니다. RxJS 이전버전에서는, 구독이 "일회용"으로 불렸습니다. import { interval } from 'rxjs'; const observable = interval(1000); const subscription = observable.subscribe(x => console.log(x)); // Later: // This cancels th.. [Javascript] RxJS - Operators https://rxjs.dev/guide/operators 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. RxJS는 Observable이 기본이지만, 대부분 연산자에 유용합니다. 연산자는 복잡한 비동기코드를 선언적 방식으로 구성하는데 필수적인 부분입니다. 연산자란? 연산자는 함수입니다. 2종류의 연산자가 있습니다 : 파이프형 연산자들은 observableInstance.pipe(operator()) 구문을 사용해 Observable로 파이프 될 수 있습니다. 이는 filter(...)와 mergeMap(...)을 포함합니다. 호출되면 Observable 객체를 변경하지는 않습니다. 대신, 새로운 Observable을 반환합니다. 구독 로직은 첫번째 Observable에 기반합니다. 파이프형 .. [Javascript] RxJS - Observer https://rxjs.dev/guide/observer 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. Observer 관찰자(Observer)란 무엇인가? 관찰자는 Observable에서 전달된 값들의 소비자입니다. 관찰자들은 간단히 Observer에서 전달하는 각각의 알림 유형들(next, error, complete)의 콜백들의 모음입니다. 아래는 전형적인 Observer 객체입니다 : const observer = { next: x => console.log('Observer got a next value: ' + x), error: err => console.error('Observer got an error: ' + err), complete: () => console.log('O.. [Javascript] RxJS - Observable https://rxjs.dev/guide/observable 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. Observable Observable은 여러 값의 지연푸시 모음입니다. 그들은 다음 표에서 누락된 자리를 채웁니다. SINGLE MULTIPLE Pull Function Iterator Push Promise Observable 예제. 아래 예제는 구독(subscribe)됐을 때, 동기적으로 값 1,2,3을 즉시 넣고, 1초 뒤에 4를 넣고 끝내는 Observable입니다. import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(1); subscriber.nex.. [Javascript] RxJS - Overview 번역 Observable 객체를 다루는데 필수(?)적인 RxJS!! rxjs 공식사이트 번역을 해봤습니다. ( https://rxjs.dev/guide/overview ) 기분탓인지 모르겠지만 다른 개발문서들보다 어렵게(?) 쓰여있는거 같아서 의역도 좀 포함되어있습니다. 그렇지만.. 영어 실력이 부족해 오역이 있을 수 있습니다. (발견시, 알려주시면 감사하겠습니다.) 소개 RxJS는 Observable 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 작성하기위한 라이브러리입니다. Observable, 위성 타입(Observer, Scheduler, Subjects), 그리고 Array#extras (map, filter, reduce, every 등)의 연산자, 이 셋 중 하나의 핵심 유형을 제공하여 비동.. 이전 1 2 3 다음
