본문 바로가기

전체 글301

[Chapter#1] Lesson 3. Operator 사용해보기 링크: https://www.yalco.kr/@rxjs/1-3/ 연산자의 종류는 크게 두 가지로 나뉜다. 1. Creation Operators - RxJS에서 제공하는 메서드(range, from, of...)로 observable을 생성하는 연산자. 2. Pipable Operators - RxJS.operator에서 로드된. - 현존하는 데이터를 수정하지 않는 "순수함수"로 observable을 가공. - pipe 함수에 하나 이상 넣어 연결 2023. 1. 12.
[Chapter#1] Lesson 2. Observer(구독자)에게 발행물 구독시키기 링크: https://www.yalco.kr/@rxjs/1-1/ observer는 사전적인 의미로 "관찰자"이다. 그리고 구독자는 영어로 "subscriber"이다. RxJS를 공부하면서 앞에 두 단어를 같이 사용하면서 설명하는 분들이 많아서 였다. 결론 부터 말하자면 두 개는 같다. ■ observer의 형태 const { from } = rxjs const observable$ = from([1, 2, 3, 4, 5]) const observer = { next: (x) => console.log(x), error: err => console.error('발행중 오류', err), complete: () => console.log('발행물 완결'), } // [1] observer를 객체로 선언하고 .. 2023. 1. 12.
[Chapter#1] Lesson 1. Observable(스트림 생성기) 만들기 (5가지) 링크: https://www.yalco.kr/@rxjs/1-1/ 1. 배열된 스트림 (of, from, range, generate) - 시간에 구애를 받지 않는 1차원적인, 평면적인 스트림. const obs1$ = of(1, 2, 3, 4, 5) // 인자 자체가 각각 값으로 출력된다. // 결과: 1, 2, 3, 4, 5 const obs2$ = from([6, 7, 8, 9, 10]) // 배열을 인자로 받아 배열에 들어있는 요소 하나하나가 출력된다.( ~부터) // 결과: 6, 7, 8, 9, 10 const obs3$ = range(11, 5) // 첫 번째 인자는 시작 위치, 두 번째 인자는 n번째 까지를 나타낸다. (범위) // 결과: 11, 12, 13, 14, 15 const obs4$.. 2023. 1. 12.
[Angular] 참조변수 또는 템플릿 변수 (feat. ViewChild) "템플릿 변수를 활용하면 템플릿 안에서 다른 영역에 있는 데이터를 참조할 수 있습니다. 그래서 템플릿 변수는 사용자가 입력한 내용에 반응하는 동작을 구현하거나, 애플리케이션 폼을 사용하기 좋게 튜닝할 때 주로 사용합니다." (공식문서) 사용법은 크게 두가지로 나뉜다. → 세 가지 1. HTML 태그 또는 컴포넌트 안에서 선언했을때 참조변수는 HTML 요소의 참조주소를 또는 컴포넌트 인스턴스의 참조주소를 가르킨다. 2. #variable ="디렉티브/컴포넌트" ← 와 같이 오른쪽에 값을 할당하는 형태인 경우, 첫 번째와 같이 참조변수는 디렉티브 또는 컴포넌트 인스턴스를 가르킨다. 3. (추가) 디렉티브 *ngTemplateOutlet 에 참조변수 templateRef 이름을 할당하면, templateRef.. 2023. 1. 11.
[Angular] 서버에서 데이터 받아오기 (HttpClient, Observable) 비동기 작업으로 서버에서 데이터 받아오기(공식문서) ■ HttpClient ■ Observable [1] Observable 심볼 로드하기 - RxJS에서 Observable을 import 한다. import { Observable } from 'rxjs'; [2] 데이터 바인딩 - 컴포넌트의 users$ 멤버변수를 만들고 비동기호출 코드를 constructor함수에서 호출한다. export class UsersComponent { users$: Observable; constructor( private apiService: ApiService ) { this.loadUsers(); } loadUsers(): void { this.users$ = this.apiService.req('users/list'.. 2023. 1. 10.
[Angular] 의존성 주입(Dependency Injection)과 서비스 객체(class) 의존성 등록하는 3가지 방법 1. @Injectable() "{ providedIn: 컴포넌트명 or 'root' }" [Singleton Services] - 의존성 주입 시 반드시 필요한 데코레이터. 인자에 provideIn필드를 가진 객체를 넣을 경우 한 개의 컴포넌트에만 의존성을 주입한다. 아무것도 넣지 않을 경우 모든 컴포넌트에서 사용할 수 있다. - provideIn의 값을 "root"로 지정할 경우 의존성 객체의 인스턴스를 한번만 생성하고, 의존성 객체를 요청하는 곳마다 모두 같은 인스턴스를 주입한다. "의존성 객체를 이렇게 등록하면 이 객체가 실제로 사용되지 않았을 때 최적화하는 작업을 수행하는데, 이 작업을 트리 셰이킹(tree-shaking)이라고 합니다." 2. @component().. 2023. 1. 6.

티스토리툴바