RxJS - 공부 환경 셋업

개요

• 미뤄왔던 Reactive stream 관련을 공부해두려고 한다.
• 현재 node 기반으로 진행 중이니, RXJS를 통해서 한 번 익혀보도록 하자.
• 무작정 읽기만 하다간 진도가 안나갈 것 같아서 operator별로 살펴보고, 실습을 먼저 해보는 형태로 진행하려고 한다.

환경

우선 내가 설정한 개발 환경은 다음과 같다.

Dependencies

// package.json 일부
"dependencies": {
  "rxjs": "6.6.3"
},
"devDependencies": {
  "@types/jest": "26.0.20",
  "@types/node": "14.14.31",
  "jest": "26.6.3",
  "ts-jest": "26.5.2",
  "ts-node": "9.1.1",
  "typescript": "4.2.2"
}

Config

jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleFileExtensions: [
    "js",
    "json",
    "ts"
  ],
  rootDir: "src",
  testRegex: ".spec.ts$",
  transform: {
    "^.+\\.(t|j)s$": "ts-jest"
  }
};

ts.config.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "noUnusedLocals": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "dist",
    "lib": ["es7"]
  },
  "include": ["packages/**/*", "integration/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Test

다음은 1~10까지 더하는 부분을 tc로 작성해보았다.

//test.spec.ts
it('base stream test',  async (done) => {
    interval(10)
        .pipe(skip(1))
        .pipe(take(10))
        .pipe(reduce((acc: number, cur: number) => acc + cur, 0))
        .subscribe({
            next(item) { expect(item).toEqual(55); },
            complete() { done(); }
        })
});

interval(10).pipe(skip(1)).pipe(take(10))까지 하게 되면 다음과 같다.

즉, 10ms 간격으로 1~10까지의 숫자를 생성한다. (skip의 경우는 0부터 시작하기 때문에 제외시켰다. )
그리고 reduce를 하게 될 경우 생성된 내용을 모두 더해준다.

이를 셋업된 jest를 통해서 tc를 수행하게 될 경우 아래의 결과가 나오는 것을 확인할 수 있다.

참고자료

• Getting Started
• Online marble diagram visualize