번역: QuickJS를 사용해 자바스크립트로 안전하게 번역하기

QuickJS는 C로 구현된 경량 JavaScript 엔진이며, WASM으로 빌드하면 브라우저에서도 사용할 수 있습니다. 미리 준비해둔 @yaksok-ts/quickjs 패키지를 사용하면 QuickJS를 사용하면 자바스크립트 번역 기능을 쉽게 사용할 수 있습니다.

QuickJS를 사용해도 시스템 함수에는 접근할 수 없습니다

QuickJS는 시스템(브라우저, 런타임 등..)에서 격리된 환경에서 실행됩니다. 그렇기에 alert, prompt 등 시스템 함수에는 접근할 수 없습니다.

만약 시스템 함수에 접근하고 싶다면 QuickJS에 시스템 함수 연결하기를 참조하세요.

설치

@yaksok-ts/quickjs 패키지를 설치합니다.

deno install jsr:@yaksok-ts/quickjs

사용법

@yaksok-ts/quickjs 패키지를 사용하면 QuickJS를 사용해 자바스크립트로 번역할 수 있습니다.

import { QuickJS } from '@yaksok-ts/quickjs'
import { yaksok } from '@yaksok-ts/core'
import { FunctionParams } from '../src/constant/type.ts'

const quickJS = new QuickJS()
await quickJS.init()

const code = `
번역(QuickJS), (최소)와 (최대) 사이의 랜덤한 수
***
    return Math.floor(Math.random() * (최대 - 최소 + 1)) + 최소
***

(1)와 (10) 사이의 랜덤한 수 보여주기
`

function runFFI(runtime: string, code: string, params: FunctionParams) {
    if (runtime !== 'QuickJS') {
        throw new Error(`Unknown runtime: ${runtime}`)
    }

    const result = quickJS.run(code, params)

    if (!result) {
        throw new Error('Result is null')
    }

    return result
}

yaksok(code, { runFFI })

약속 런타임과 QuickJS 데이터타입, 자바스크립트 데이터타입 사이의 형변환은 라이브러리 내에서 자동으로 이루어집니다.

QuickJS에 시스템 함수 연결하기

QuickJS 인스턴스를 생성할 때 시스템 함수를 연결할 수 있습니다.

new QuickJS({
    getUserAgent() {
        return navigator.userAgent
    },
})

위와 같이 인스턴스를 생성하면 QuickJS의 전역스코프에getUserAgent 함수가 노출됩니다. 이를 호출하면 브라우저의 navigator.userAgent 값을 반환합니다.