골드에그

[문제]

Cannot find Module 'X' Error in TypeScript

[원인]

타입스크립트에서 해당 모듈을 못 찾아서 오류가 발생하는 것이다.

[해결방법]

해당 모듈이 없는지, 해당 모듈이 자바스크립트로 되어 있는데 타입을 못 받아오는 건지, 경로를 못 읽는 것인지 여부를 살펴보아야 한다. tsconfig.json 타입스크립트 설정, webpack.config.js 웹팩 설정 등 종합적으로 살펴본다.

가장 먼저, 텍스트 에디터에서 파일 수정이 정상적으로 반영되었는지 살펴본다. 파일 수정이 정상적으로 반영되지도 않았는데 문제 해결할려고 시도하는 것만큼 미련한 짓은 없다.

필자가 그랬다... 1시간을 버렸다. Visual Studio Code 는 Intellij 와 다르게 빌드 시 자동으로 반영되지 않으므로 항상 저장이 되었는지 확인한다.

1. 해당 모듈 설치 확인

해당 모듈이 설치되어 있는지 확인한다. 간혹 NPM 으로 설치한 모듈들이 node.js 에서 사용하는 라이브러리들을 사용하곤 하는데 webpack 에서 node.js 의 핵심 모듈들을 제외시켜 직접 설치해야 한다.  [React] Reference Error: Buffer is not defined :: 골드에그 (tistory.com) 참고 바란다.

2. 타입스크립트 모듈 분석 확인

tsconfig.json 에서 moduleResolution 속성이 node 인지 체크한다.

{
  "compilerOptions": {
//+ "moduleResolution": "node",
  }
}

TypeScript: Documentation - Module Resolution (typescriptlang.org) 페이지를 살펴보면 모듈을 해석하는 방법이 Classic, Node 두 가지 방법이 있다고 소개하고 있다. NPM 으로 설치한 모듈들은 따로 상대경로를 주지 않으므로 Node 로 바꾸어야 한다.

3. 타입스크립트 include 설정 확인

tsconfig.json 에서 include 속성에 해당 모듈이 포함되어 있는지 확인한다.

{
  "compilerOptions": {
    // ...
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "src/**/*.spec.ts"]
}

include src/**/* 경로가 해당 모듈을 포함하고 있는지 확인해야 하며 포함되지 않는다면 추가해야 한다.

node_moudles 폴더는 제외한다.

[문제]

[원인]

해당 타입은 Iterator 를 리턴하는 메서드가 필요하다고 한다. 그 말인 즉슨 타입이 배열같은 Iterator 를 내포하는 자료형이 아닌 자료형을 사용했다는 뜻.

[해결방법]

배열이 아닌데 ... 연산자를 사용했는지, 해당 자료형으로 for 문을 사용했는지 확인하고 바꾸자.

[문제]

분명 Front-End 에서는 Back-End 로부터 Mono 데이터 하나를 받았는데 Promise 의 onComplete 이벤트가 발생하지 않았다. Front-End 의 코드와 Back-End 코드는 각각 다음과 같다.

async requestResponse(to: string, message: Message) {
    await this.connect();
    return new Promise((resolve, reject) => {
      this.client &&
        this.client.requestResponse(
          {
            data: cbor.encode(message),
            metadata: encodeRoute(to),
          },
          {
            onError: (error: Error) => {
              console.error('[*] oneToOne error : ', error);
              reject(error);
            },
            onNext: (payload: Payload, isComplete: boolean) => {
              console.log(
                `[*] oneToOne next : ${cbor.decode(
                  payload.data as Buffer,
                )} | ${isComplete}`,
              );
            },
            onComplete: () => {
              console.log('[*] 데이터 송신 완료');
              resolve(null);
            },
            onExtension: () => {},
          },
        );
    });
  }

RSocket 의 requestResponse 프로토콜로 서버에 데이터를 전송하고 받는 코드이다.

그런데 onNext 만 이벤트가 발생하고 onComplete 가 발생하지 않는 것이다.

@MessageMapping("chat.send")
public Mono<Boolean> sendChatMessage(@Payload Message messageRequest) {
    return chatRoomRepository.saveMessage(
            messageRequest.getRoomId(),
            messageRequest.getFromPerson(),
            messageRequest.getMessage()).log();
}

서버코드는 간결하다.

redis 에 데이터를 저장하고 결과 값을 Boolean 형태로 전송한다.

[원인]

Mono onComplete order is confusing · Issue #1752 · reactor/reactor-core (github.com)

중간 부분 댓글을 보면 Mono.subscribe 를 호출할 때, onComplete 이벤트는 발생하지 않고 onNext 가 그 역할까지 대신한다는 내용이 보인다. onComplete 를 호출하지 않고 onNext 에서 끝낸다는 것이다.

클라이언트 코드에서 onComplete 일 때 resolve 함수를 호출하므로 onNext 에서 resolve 함수를 호출하여 문제를 해결하였다.

[문제]

[원인]

Resolve | 웹팩 (webpack.kr) resolve 부분을 살펴보면 아래와 같은 문구가 보인다.

node.js 의 핵심모듈들을 Webpack 5 부터 포함하고 있지 않는다. 직접 에러가 나는 모듈을 설치하고 resolve fallback 에 추가해야 한다.

참고로, CRA(Create React App) 로 만든 React 의 경우, Webpack 설정파일이 숨겨져 있어 덮어 씌워야 한다. 그럴 바에는 React 와 Webpack, Babel, TypeScript 를 직접 설정하여 구축하는 것이 더 나을 수도 있다. 아래 방법은 CRA 없이 React 구축한 상태에서 해결한 방법이다.

[해결방법]

(1) npm install buffer 로 buffer 모듈 설치

(2) webpack.config.js 파일에서 아래 문구 삽입

  plugins: [
  ...
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
  ...
  ]

plugins 에 buffer 플러그인 추가

  resolve: {
  ...
    fallback: {
      buffer: require.resolve('buffer'),
    },
  ...  
  },

resolve 에 buffer fallback 추가