[카테고리:] 미분류

아래의 코드가 실행되면 서두부터 await가 실행됩니다. 즉, top-level에서 await가 실행되는 거죠. 이게 Vite에서는 문제가 발생합니다.

import WebGPU from "three/addons/capabilities/WebGPU.js"

이를 해결하기 위해서는 먼저 개발환경에서 다음과 같은 패키지를 설치해야 합니다.

npm install --save-dev vite-plugin-top-level-await

그리고 vite.config.js 파일을 만들어 다음처럼 내용을 구성합니다.

import { defineConfig } from "vite";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  plugins:[
    topLevelAwait({
      // promiseExportName: "__tla",
      // promiseImportName: i => `__tla_${i}`
    })
  ],
});

자바스크립에서 클래스의 생성자는 비동기적으로 실행될 수 없다. 이에 대한 효과적이고 좋은 대처는 생성자 대신 static factory 패턴을 사용한다. 예를 들어서 생성자를 다음 코드로 대체한다.

class App {

...

  static async create() {
      const app = new App();
      await app._setupThreeJs();
      app._setupCamera();
      app._setupLight();
      app._setupControls();
      app._setupModel();
      app._setupEvents();
      return app;
  }

...

참고로 _setupThreeJs 매서드는 async로 선언되어 있다.

그리고 App 클래스의 객체를 생성할 때는 new App()이 아닌 다음 코드를 사용한다.

const app = await App.create();

와!