json 형태의 데이터만 사용을 하기에 문제가 없었는데, 파일다운로드, http-proxy-middleware르 사용하는 요건이 생기자마자 작업을 했는데 오류가 발생하였다.

-- main.ts
useGlobalMiddleware(new TransformInterceptor());

위와 같이 트렌스폼을 전역으로 사용할 경우에 리턴값이 존재할 경우와 하지 않을 경우를 생각해야한다.

controller 에서 리턴값이 존재하냐 마냐 따라서 다르게 되는데, 위와 같은 상황에 리턴값이 존재할 경우에는 controller 에서 res.send등이 오류가 발생하게 된다.

아래와 같이 값의 유무에 따라 처리 로직을 다르게하면 res.send, http-proxy-middleware 이 중간에 res를 처리하는 상황에서도 오류가 발생하지 않는다.

-- transaction.intercepter.ts

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export interface Response<T> {
  data: T;
}

@Injectable()
export class TransformInterceptor<T> implements NestInterceptor<T, Response<T>> {
  intercept(context: ExecutionContext, next: CallHandler): Observable<Response<T>> {
    return next.handle().pipe(map( (data)=> {
      if (!data) {
        return data;
      }

      // to do somthing
    }));
  }
}

필요한 전역 모듈

• @nestjs/cli - nestjs cli 
• tree-cli - 폴더구조를 텍스트 형태로 만들어 줍니다.
• pnpm - npm 대신 사용할 패키지 매니저 (npm, pnpm, yarn 벤치마킹)

$ npm i -g @nestjs/cli tree-cli pnpm

file, class 등 naming 규칙

• 파일명은 케밥 케이스를 사용합니다.
• 클레스명은 대문자를 사용합니다.
• interface, controller 등은 예) "xxx.interface.ts", "xxx.controller.ts" 로 명명합니다.
• nest g xxx 를 통하여 생성하고 파일을 구조에 맞게 이동합니다.

API 작성시 controller, module, service의 path 관리 규칙

• controller 의 명에따라 폴더 구조로 나눕니다.
• monorepo를 지원하기 때문에 공통 모듈일 경우는 lib로 생성하여 사용합니다.
• dto는 git의 sub_module을 통해 배포해야 클라이언트 또는 브라우저에서 같이 사용가능합니다.

자바스크립트로 DOM 게임을 제작하게 되었다. 

실제적으로 Javascript로 게임을 만들때 저 함수가 호출(중요?) 시키는 경우가 많다.

하지만 개발을 하다보니 특수한 문제가 발생되었다. 저 함수가 호출이 안되는 경우이다.

그 상황을 남긴다.

• 모바일 환경에서 최신버전이 아닌 특정 하위 버전을 갖고 있다.
• 여러탭이 있을경우 다른 탭을 보고 있다.
• 브라우저를 최소화 했다.
• 기타 상황.

이런 상황들이 존재 하였다.

아래는 상기 문제를을 해결하기 위해 처리했던 방법들이다.

1. requestAnimationFrame 라는 함수를 없을때 만든다.
2. setInterval로 60프레임에 맞춰 호출

A방식의 문제점은 2,3번의 경우에 호출이 되지 않는다.

B방식의 문제점은 2,3번의 경우 호출이 되나 1초에 1번씩 호출이 되더라. 그래서 프레임 스킵방식으로 처리해야 했다.