반응형

Karma를 사용해 브라우저 테스트를 진행하다보니 메모리가 부족해서 중간에 테스팅이 멈추는 현상이 발생했다.

브라우저에서 테스팅이 종료되기 전까지는 메모리를 해제하지 않고 계속 잡고 있다보니 테스트 종료까지 6MB 정도의 메모리가 점유되었는데 개발 환경에서 굉장한 부담이 되었다.

 

브라우저 내에서 테스트가 종료되면 메모리가 해제된다는 점으로 볼 때 테스팅을 여러 브라우저 윈도우로 분할해 실행하면 순간 최대 메모리 점유율을 낮출 수 있다.

 

karma-parallel 패키지를 사용하면 테스팅을 다중 브라우저 윈도우에서 분할해 실행할 수 있다.

사용법도 쉽다.

 

다음 명령을 통해 설치하고

npm install --save-dev karma-parallel

 

기존에 사용하던 karma 설정에 다음과 같이 추가하면 된다.

module.exports = function(config) {
  config.set({
    // "parallel"을 다른 framework 보다 먼저 써야한다고 한다.
    frameworks: ['parallel', 'mocha' /* or 'jasmine' */],
    parallelOptions: {
      executors: 4, // 브라우저 윈도우 수
      shardStrategy: 'round-robin' // 샤딩 방식
    }
  });
};

테스트를 실행하면 브라우저 창이 여러개 뜨면서 테스팅이 분할 실행되는것을 확인할 수 있다.
상세 옵션은 공식 문서를 참고하자.

 

4개 브라우저 윈도우로 분할한 결과 메모리 최대 점유율이 절반 수준으로 줄었다.

 

 

참고:

1. 분할하면 cpu 사용이 늘어나므로 적절히 트레이드 오프하자.

2. 비동기 실행을 위해 테스팅 타임아웃을 조절한 경우, 타임아웃 설정 부분을 약간 수정해야한다.

describe("component", () => {
  it("description", (done) => {
    ...
  }).timeout(10000); // was set timeout here.
});

위와 같은 방식을 다음과 같이 수정한다.

describe("component", () => {
  it("description", function(done) {
    this.timeout(10000); // place the timeout here make it works as expected.
    ...
  });
});

  - github 이슈: https://github.com/joeljeske/karma-parallel/issues/15

 

this.timeout fails inside describe block · Issue #15 · joeljeske/karma-parallel

Opening new issue as requested: **I'm submitting a ... ** bug report What is the current behavior? Context not enforced inside describe blocks this is incorrect What is the expected behavior? W...

github.com

 

반응형
반응형

요약

Debouncing:

  마지막 이벤트 발생으로부터 지정한 interval 이후에 핸들러 실행. interval 이전에 이벤트 발생 시, interval 초기화.

  interval 동안 이벤트가 발생하지 않으면 마지막 이벤트가 발생했다고 보고 핸들러를 실행할 수 있다.

Throttling:

  이벤트가 발생하면 핸들러를 실행하고 interval 동안 다음 이벤트에 대한 핸들러 실행을 방지한다.

  이벤트가 계속 발생한다고 가정했을 때 interval 간격으로 핸들러를 실행할 수 있다.

 

 

갑자기 드는 생각:

자동문 센서가 debouncing 일것 같다(경험상 throttling 방식인 곳도 있는것 같기도하다). 사람이 지나갈 땐 문이 항상 열려있고, 마지막 사람이 지나가고 일정 시간이 지나면 닫힌다.

회사 건물에 있는 엘리베이터의 열기/닫기 버튼이 throttling 방식인 것 같다. 동일 버튼을 아무리 버튼 연타해도 불빛만 들어오지 일정 시간동안 원하는 동작을 하지 않는다.

 

반응형
반응형

객체 타입의 state를 watch 하려면 해당 state를 업데이트할 때 처리가 필요하다.

예를들어, state를 변경할 때 다음과 같은 코드를 사용하였다면

this.$store.getters.someState.someProps = newValue;

다음과 같이 변경해준다.

this.$set(this.$store.getters.someState, someProps, newValue);

그럼 vuex가 상태의 변화를 감지할 수 있다.

 

 

객체가 지워지는 것을 감지하고자 한다면, $delete 를 사용하여 객체를 변경하자.

this.$delete(this.$store.getters.someState, someProps);

 

반응형

+ Recent posts