1. PyScript와 JavaScript의 연동

프로젝트를 진행할 때 PyScript만 사용해서 진행하는 건 어렵습니다. 다른 라이브러리도 사용해야 하고 JavaScript 파일을 불러와서 사용해야 할 경우가 발생합니다. 따라서 이번 챕터에서는 JavaScript에서 생성한 변수와 함수들을 PyScript로 넘기는 방법과 JavaScript에서 PyScript를 사용하는 방법에 대해서 알아보도록 하겠습니다.

1.1 PyScript에서 JavaScript 사용하기

from js import ... 구문을 사용하면 PyScript에서 JavaScript 모듈을 불러올 수 있습니다. JavaScript의 객체가 Python 유형으로 변환되는 것을 Implicit conversions(암시적 변환)라고 합니다.

<body>
    <script>
        name = "Guido" 
        function addTwoNumbers(x, y) {
            return x + y;
        }
    </script>
    <py-script>
        # Import 및 JS의 변수 및 함수 사용
        from js import name, addTwoNumbers

        print(f"Hello {name}")
        print("Adding 1 and 2 in Javascript: " + str(addTwoNumbers(1, 2)))
    </py-script>
</body>

위의 코드를 보면 JavaScript에서 선언한 변수 name과 함수 addTwoNumbers()를 PyScript 에서 불러와 사용하는 것을 확인할 수 있습니다.

Untitled

아래와 같이 PyScript 내에서 직접 선언한 변수와 함수 이외에 JavaScript의 기능 역시 사용할 수 있습니다.

<body>
    <div id="test" class="one"></div>
    <py-script>
        from js import document

        class_name = 'one'
        element = document.querySelector(f'.{class_name}');

        element.innerHTML = 'hello world'
    </py-script>
</body>

Untitled

1.2. JavaScript에서 PyScript 사용하기

다음은 JavaScript에서 PyScript의 변수를 사용하는 방법에 대해 알아보겠습니다. PyScript와 JavaScript의 모듈은 Pyodide 인터프리터를 사용하기 때문에PyScript.interpreter.globals를 사용해서 PyScript의 모든 전역 변수를 JavaScript에서 사용할 수 있습니다.

<body>
    <py-script>x = 42</py-script>

    <button onclick="showX()">Click Me to Get 'x' from Python</button>
    <script>
        function showX() {
            console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('x')}`)
        }
    </script>
</body>

위와 같이 PyScript의 전역 변수 x를 JavaScript에서 사용 할 수 있는 것을 볼 수 있습니다.

Untitled

이는 파이썬의 사용 가능한 객체인 클래스, 함수, 내장 함수 등에도 적용할 수 있습니다. 아래의 코드에서 ['Candy', 'Donut', 'Apple', 'Banana'] 리스트를 파이썬 함수인 sorted()를 활용하여 정렬한 모습을 볼 수 있습니다.

<body>
    <button onclick="sortInPython(['Candy', 'Donut', 'Apple', 'Banana'])">Sort In Python And Log</button>
    <script>
        function sortInPython(data) {
            js_sorted = pyscript.interpreter.globals.get('sorted') // 파이썬 함수 sorted 사용
            const sorted_data = js_sorted(data)
            for (const item of sorted_data) {
                console.log(item)
            }
        }
    </script>
</body>

Untitled