All
7 posts
Collection processing with async

Operator 포스팅을 작성하면서 다음과 같은 코드에서 의 호출은 순차적으로 처리된다. 이전 순회에서 가 호출된 이후 500ms를 하는 것이 보장되는 상황이다. 하지만 기본적으로 는 의 사용, 너무 많은 일을 수행하는 중첩 루프 등 다분히 명령적(imperative)이라는 점에서 선언적(declarative) 프로그래밍을 추구하는 관점에서는 지양하는 것이 권장된다. 그렇다면 가장 먼저 떠올릴 수 있는 방식은 를 사용하는 방식으로 변경해보는 것이다. 하지만 의도와는 달리 이전 순회의 를 대기하지 않고 병렬적으로 을 수행한 이후 각각의 가 호출되는 것을 알 수 있는데, async/await 포스팅을 작성하면서 살펴본 …

August 20, 2021
자바스크립트
async/await

의 동작 원리를 살펴보기에 앞서 generator에 대한 이해를 위해 iterable, iterator, iteration result에 대한 개념을 정리해보자. Iterable: 메서드를 구현한 객체 Iterator : 메서드를 구현한 객체 IterationResult: , 이라는 프로퍼티를 갖고 있는 객체 Generator 제너레이터는 특수한 함수로써 일반 함수와는 다르게 호출 시 함수 몸체를 바로 실행하는 것이 아니라 IterableIterator(Iterable이면서 Iterator인) 객체를 반환한다. yield 는 제너레이터 함수 몸체 내부의 실행(execution)을 잠시 중단하고 호출자에게 결과를 전…

August 18, 2021
자바스크립트
Operators

RxJS에서 연산자(operator)는 현재 Observable을 기반으로 새로운 Observable을 생성하는 순수 함수이다. 이때 Observable은 불변 객체이므로 현재의 Observable 인스턴스는 변경되지 않고 항상 새로운 Observable을 만든다. map, filter, reduce 그렇다면 우선 대표적인 연산자인 , , 에 대한 구현을 살펴보자. 에 정의된 메서드와는 달리 이번에는 Observable에 대해서 적용할 수 있도록 해야한다. USE-CASE , , 연산자는 RxJS에서는 연산자로 구분되지만 반환하는 타입을 살펴보면 (Observable ⇒ Observable)인 것을 알 수 있다. 따…

August 17, 2021
RxJS
Observable

Observer Pattern 이 무엇인지 이해하기 위해서는 우선 옵서버 패턴(Observer Pattern)에 대한 이해가 필요하다. Loosely Coupling 옵서버 패턴에서는 시간이 경과함에 따라 상태가 변경되는 대상을 Subject라 한다. 또 이때 Subject의 상태 변화를 관찰 혹은 상태 변화에 대한 알림을 받는 대상을 Observer라 한다. Subject와 Observer는 느슨한 결합(Loosely Coupling) 상태로 이는 서로 상호작용은 하는 상태이지만 각자에 대해서는 잘 알지 못한다는 것을 의미한다. Subject가 Observer에 대해 알고 있는 사실은 Observer가 특정 인터페이…

August 15, 2021
RxJS
Promise

는 인스턴스를 생성할 때 라는 함수를 인수로 전달받는다. 여기서 함수는 , 라는 함수를 인수로 전달받게 된다. 따라서 와 동일한 인터페이스를 갖는 객체를 만드려면 와 라는 함수를 매개변수로 사용하는 를 전달받을 수 있도록 를 구성해야 할 것이다. 인스턴스를 생성한 이후 내부의 값을 소비(consume)하려면 크게 세 가지 방법을 사용할 수 있다. 가 거나 상태인 경우에 호출할 함수들을 전달받는다. 가 상태인 경우 호출할 함수를 전달받는다. 가 상태인지 상태인지 상관없이 호출할 함수를 전달받는데 이 함수는 과 에 전달한 함수들이 모두 실행된 이후에 호출된다. 그렇다면 객체를 구성하기 위한 많은 방법들이 …

August 13, 2021
자바스크립트
Transducing

위의 상황에서 코드는 문제없이 동작하지만 많은 요소를 갖는 배열에 대해서는 을 호출할 때마다 즉, 메서드 체이닝을 수행할 때마다 원본 배열과 동일한 크기의 중간 배열을 지속적으로 생성한다는 문제가 있다. 또한 이전 메서드의 호출 결과가 반환되기 이전에는 다음 메서드 호출이 수행되지 않으므로 각 메서드의 수행 시간을 모두 합친 만큼의 blocking이 발생하게 될 것이다. 그렇다면 중간 배열을 생성하지 않고, 최종 결과로 반환될 배열만 추가로 생성하게끔 구현하려면 어떻게 해야할까? 첫 번째 아이디어로는 인접한 함수들을 합성하는 방식을 떠올릴 수 있을 것이다. 그렇다면 이번에는 를 체이닝하여 사용하는 경우를 살펴보자. …

August 09, 2021
자바스크립트
보다 안전한 getter, setter 만들기

다음 코드의 결과는 무엇인지 확인해보자. 그렇다면 코드가 다음과 같이 수정되었을때 라는 배열의 첫 번째 요소는 이전과 동일하게 1일까? 이는 의 구현에 따라 달라진다. 만약 의 구현이 다음과 같다면 배열의 첫 번째 요소는 4가 될 것이다. 즉, 이는 코드의 순서에 따라 다른 결과를 만들어내게 된 상황인데, 이러한 현상이 발생하는 원인은 인수로 전달한 값이 “배열”이라는 객체 타입의 값이므로 해당 배열을 가리키는 참조 값이 복사되어 전달되었기 때문이다. 물론 이처럼 짧은 코드에서는 원본이 변경되지 않도록 코드의 순서에 유념해서 문(statement)들을 배치할 수 있을 것이다. 하지만 만약 해당 코드가 매우 복잡한 비즈…

August 03, 2021
자바스크립트