[Next.js] JavaScript와는 다른 Next.js에서의 Web Worker 사용법

1. Next.js에서 Web Wokrer 사용 방법은 JavaScript와 다소 차이가 있었다!

mind-ar을 이용해 웹 AR을 프로젝트를 구현하고 있다. 단말기에서 촬영한 Target 이미지를 Compile 하는 기능을 구현하면서 Web Worker를 만났다. 웹 워커는 JavaScript에서 백그라운드 스레드에서 코드를 실행할 수 있게 해주는 웹 기술이다. 웹 워커를 사용하면 메인 스레드와 별도로 백그라운드에서 CPU 집약적인 작업을 처리하거나 긴 작업을 분리하여 웹 애플리케이션의 반응성을 향상할 수 있다. 따라서 Target 이미지를 Compile 하는 것과 같은 무거운 작업은 웹 워커로 처리하는 것이 적합한 것이다.

문제는 기존의 코드가 JavaScript로 되어 있는데 Next.js로 가져와 적용하니 다음과 같은 에러가 발생했다.

TypeError: _compiler_worker_js__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor

 

2. Next.js는 JavaScript 모듈 임포트와 약간 다른 접근 방식을 사용한다!

Next.js는 일반적인 JavaScript 모듈 임포트와 약간 다른 접근 방식을 사용한다. 기존 자바스크립트의 임폴트 방식은 다음과 같았다.

/**
* 자바스크립트에서 웹 워커 사용
*/
import CompilerWorker from "./compiler.worker.js?worker&inline";

//(생략)

const worker = new CompilerWorker(); // 인스턴스를 생성하여 사용한다.

 

Next.js에서는 다음과 같이 사용한다.

/**
* Next.js에서 웹 워커 사용
*/
// import를 작성할 필요 없다.
// import CompilerWorker from "./compiler.worker.js?worker&inline";

//(생략)

// 웹 워커 인스턴스를 생성할 때 URL 인스턴스를 인수로 넣는다.
const worker = new Worker(
	new URL("./compiler.worker.js", import.meta.url)
);

 

알면 별거 아닌데 사용법을 몰라 한참 헤맸다 ㅠ