[#61] 클라이언트에 js 엔진 올리기

frontend/package.json

@@ -23,6 +23,7 @@
     "codemirror": "^6.0.1",
     "hast-util-to-jsx-runtime": "^2.2.0",
     "marked": "^2.1.3",
+    "quickjs-emscripten": "^0.23.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",

frontend/src/modules/evaluator/eval.worker.ts

@@ -1,4 +1,4 @@
-import evalCode from './evalCode';
+import * as QuickJS from './quickjs';
 import type { EvalMessage } from './types';
 
 type MessageEvent = {
@@ -10,7 +10,7 @@ self.addEventListener('message', async function (e: MessageEvent) {
 
   try {
     const { code, param } = message;
-    const result = evalCode(code, param);
+    const result = await QuickJS.evaluate(code, param);
 
     self.postMessage(result);
   } catch (err) {

frontend/src/modules/evaluator/quickjs.ts

@@ -0,0 +1,48 @@
+import type { QuickJSContext, QuickJSWASMModule } from 'quickjs-emscripten';
+import { getQuickJS } from 'quickjs-emscripten';
+
+const MEM_LIMIT = 1024 * 1024; // 1GB
+const STACK_LIMIT = 1024 * 512; // 500MB
+
+export async function evaluate(code: string, params: string) {
+  const QuickJS = await getQuickJS();
+  const runtime = createRuntime(QuickJS);
+  const vm = runtime.newContext();
+
+  try {
+    return evalCode(vm, code, params);
+  } finally {
+    vm.dispose();
+    runtime.dispose();
+  }
+}
+
+const createRuntime = (quickjs: QuickJSWASMModule) => {
+  const runtime = quickjs.newRuntime();
+  runtime.setMemoryLimit(MEM_LIMIT);
+  runtime.setMaxStackSize(STACK_LIMIT);
+
+  return runtime;
+};
+
+const evalCode = (vm: QuickJSContext, code: string, params: string) => {
+  const script = toRunableScript(code, params);
+
+  const startTime = performance.now();
+  const result = vm.unwrapResult(vm.evalCode(script));
+  const endTime = performance.now();
+  const value = vm.dump(result);
+  result.dispose();
+
+  return {
+    time: endTime - startTime,
+    result: value,
+  };
+};
+
+const toRunableScript = (code: string, params: string) => {
+  return `
+    ${code}\n
+    solution(${params});
+  `;
+};