PyScript : 웹 브라우저에서 Python 실행
Anaconda에서 만든 PyScript는 WebAssembly 지원 브라우저에서 Python 런타임을 스크립팅 언어로 사용할 수 있도록 하는 실험적이지만 유망한 신기술입니다.
일반적으로 사용되는 모든 최신 브라우저는 이제 많은 언어(C, C++ 및 Rust와 같은)가 컴파일할 수 있는 고속 런타임 표준인 WebAssembly 를 지원합니다. Python의 참조 구현은 C로 작성되었으며 이전 프로젝트인 Pyodide 에서 Python 런타임의 WebAssembly 포트를 제공했습니다.
그러나 PyScript 는 Python을 웹 스크립팅 언어로 실행하기 위한 전체 브라우저 내 환경을 제공하는 것을 목표로 합니다. Pyodide를 기반으로 구축되지만 표준 라이브러리에서 모듈을 가져오고, 타사 가져오기를 사용하고, DOM(문서 개체 모델)과의 양방향 상호 작용을 구성하고, 파이썬과 자바스크립트 세계.
현재 PyScript는 여전히 원형이고 실험적인 프로젝트입니다. Anaconda는 프로덕션 환경에서 사용하는 것을 권장하지 않습니다. 그러나 호기심 많은 사용자는 PyScript 사이트에서 예제를 시도하고 사용 가능한 구성 요소를 사용하여 브라우저에서 실험적인 Python-plus-JavaScript 응용 프로그램을 빌드할 수 있습니다.
이 기사에서는 PyScript의 기본 사항을 살펴보고 Python과 JavaScript가 상호 작용할 수 있는 방법을 살펴보겠습니다.
목차
자세히보기
PyScript를 사용한 프로그래밍
기본적으로 PyScript는 웹 페이지에 추가할 수 있는 단일 JavaScript 포함으로 구성됩니다. 이 포함은 기본 PyScript 런타임을 로드하고 PyScript에서 사용되는 사용자 정의 태그에 대한 지원을 자동으로 추가합니다.
다음은 PyScript의 "hello, world" 프로젝트의 간단한 예입니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/unstable/pyscript.js"></script>
</head>
<body>
<py-script output="out">
print("Hello world")
</py-script>
<div id="out"></div>
</body>
</html>
문서 의 script태그 head는 핵심 PyScript 기능을 로드합니다. 스타일시트는 선택 사항 pyscript.css이지만 유용합니다. 무엇보다도 페이지 로드 시 페이지가 수행하는 작업(Python 런타임 로드, 초기화 등)에 대한 알림을 사용자에게 삽입합니다.
py-scriptPython 코드는 사용자 정의 태그 로 묶여 있습니다. 코드는 들여쓰기에 대한 Python의 규칙에 따라 형식이 지정되어야 합니다. 그렇지 않으면 제대로 실행되지 않습니다. HTML을 자동으로 다시 포맷하는 편집기를 사용하는 경우 이 점에 유의하십시오. py-script블록 의 내용을 엉망으로 만들고 실행할 수 없게 만들 수 있습니다.
모든 Python 코드는 PyScript 구성 요소 로드가 완료되면 평가됩니다. stdout태그의 스크립트가 (a ) 문에 쓰는 경우 속성 print을 제공하여 페이지에서 출력을 표시할 위치를 지정할 수 있습니다 output. 이 예 stdout에서 스크립트는 divID 를 사용하여 로 이동합니다 "out".
이것을 파일에 저장하고 웹 브라우저에서 열면 브라우저가 PyScript 런타임을 가져와서 설정할 때 "로드 중" 표시기와 일시 중지가 먼저 표시됩니다. 런타임은 향후 로드 시 캐시된 상태로 유지되어야 하지만 활성화하는 데 시간이 조금 걸립니다. 그 후에 Hello world페이지에 나타나야 합니다.
표준 라이브러리 가져오기
Python의 내장 기능만 사용하는 스크립트는 약간만 유용합니다. Python의 표준 라이브러리는 일반 Python에서 사용하는 것과 같은 방식으로 PyScript에서 사용할 수 import있습니다. 표준 라이브러리 가져오기는 PyScript에서 작동해야 합니다.
위의 스크립트 블록을 수정하여 현재 시간을 표시하려면 기존 Python에서와 다르게 수행할 필요가 없습니다.
import datetime
print ("Current date and time:", datetime.datetime.now().strftime("%Y/%m/%d %H:%M:%S"))
PyPI의 라이브러리 사용
PyPI에서 패키지를 설치하고 사용하려면 어떻게 해야 합니까? PyScript에는 py-env타사 패키지를 설치해야 함을 지정하는 또 다른 태그 가 있습니다. py-script원본 스크립트의 블록을 다음 두 블록으로 교체해 보겠습니다 .
<py-env>
- humanize
</py-env>
<py-script output="out">
from datetime import datetime
import humanize
now_int = int(datetime.timestamp(datetime.now()))
now_fmt = humanize.intcomma(now_int)
print("It has been", now_fmt, "seconds since the epoch.")
</py-script>
py-env블록을 사용하면 추가할 패키지를 나열할 수 있습니다. Python 프로젝트의 파일에 나열하는 것과 같은 방식 입니다 requirements.txt. 그런 다음 다른 Python 패키지와 마찬가지로 가져와서 사용할 수 있습니다. humanize이 예에서는 수치 출력을 읽기 쉽게 하기 위해 호출된 타사 패키지를 사용하고 있습니다.
PyPI의 모든 패키지가 예상대로 설치 및 실행되는 것은 아닙니다. 예를 들어, requests아직 지원되지 않는 네트워킹 구성 요소에 대한 액세스가 필요합니다. (이 문제에 대한 가능한 해결 방법은 기본적으로 지원되는pyodide.http.pyfetch 를 사용 하는 것입니다 .) 그러나 와 같은 순수 Python 패키지 는 제대로 실행되어야 합니다. , , 또는 와 같이 Anaconda에서 제공하는 예제에 사용된 패키지 도 작동합니다.humanize``numpy``pandas``bokeh``matplotlib
로컬로 가져오기
또 다른 일반적인 시나리오의 경우 웹 페이지와 동일한 디렉토리 트리에 있는 다른 Python 스크립트에서 가져오기를 원한다고 가정해 보겠습니다. 가져오기를 사용하면 프레젠테이션과 혼합되어 작업하기 어려울 수 있는 웹 페이지 자체에서 더 많은 Python 논리를 쉽게 이동할 수 있습니다.
일반적으로 Python은 .py가져올 수 있는 항목의 표시로 파일 시스템에 있는 다른 파일의 존재를 사용합니다. PyScript는 이 방식으로 작동할 수 없으므로 가져올 수 있는 모듈로 사용할 파일을 지정해야 합니다.
웹 서버의 지정된 디렉토리에 이름이 지정된 웹 페이지가 있고 그 옆에 index.html이름이 지정된 Python 파일을 배치하려고 한다고 가정해 보겠습니다. main.py이렇게 하면 인페이지 스크립트가 될 수 있고 import main대부분의 Python 논리를 실제 .py파일로 제한할 수 있습니다.
py-env블록 에서 가져올 수 있도록 만들 Python 파일을 지정합니다 .
- paths: - ./main.py
이렇게 main.py하면 웹 페이지 자체와 동일한 웹 서버 디렉토리에 있는 을(를) 사용하여 가져올 수 있습니다 import main.
명심해야 할 중요한 사항: 브라우저에서 로컬로 시작한 웹 페이지에서는 이와 같은 가져오기를 수행할 수 없습니다. 이는 WebAssembly 런타임 및 브라우저 자체에 의해 부과된 파일 시스템 액세스에 대한 제한 때문입니다. 대신 웹 페이지와 .py파일을 제공하기 위해 웹 서버에서 페이지를 호스팅해야 합니다.
REPL 태그
Python 사용자 는 일반적으로 수학 및 통계에 사용되는 Python용 브라우저 내 라이브 코딩 환경인 Jupyter Notebook 에 익숙해야 합니다 . PyScript는 이러한 환경을 위한 기본 빌딩 블록인 py-repl태그를 제공합니다.
py-replJupyter Notebook 환경의 매우 기본적인 버전처럼 작동하는 웹 페이지에 입력 필드를 생성합니다. 다음은 Anaconda 자체 데모의 예입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<h1><b>pyscript REPL</b></h1>
Tip: press Shift-ENTER to evaluate a cell
<br>
<div>
<py-repl id="my-repl" auto-generate="true"> </py-repl>
</div>
</body>
</html>
이 코드를 실행하면 Python REPL처럼 작동하는 입력 필드가 표시됩니다.
현재 REPL 태그는 문서화된 사용자 정의 방법이 거의 없습니다. 예를 들어 셀의 내용이나 결과에 프로그래밍 방식으로 액세스하려는 경우 이를 수행하는 방법에 대한 명확한 문서가 없습니다.
IDG
PyScript의 Jupyter와 유사한 REPL 구성 요소를 사용하면 아직 매우 유연하거나 구성 가능하지는 않지만 페이지에서 Python을 대화식으로 실행할 수 있습니다.
JavaScript 이벤트 리스너와 상호 작용
PyScript는 를 기반으로 하기 때문에 DOM과 상호 작용하기 위해 의 메커니즘을 pyodide사용 합니다. pyodide예를 들어 웹 페이지에서 입력 상자의 값을 가져와 Python 코드에서 사용하려면 다음과 같이 합니다.
<input id="txt">
<py-script>
from js import document, console
from pyodide import create_proxy
def _eventlog(e):
console.log(f"Input value: {e.target.value}")
eventlog = create_proxy(_eventlog)
document.getElementById("txt").addEventListener("input", eventlog)
</py-script>
라이브러리는 및 개체 js와 같은 많은 일반적인 JavaScript 엔터티에 대한 Python 인터페이스를 제공 합니다 . JavaScript에서와 거의 동일한 방식으로 PyScript에서 작동합니다. 함수 in을 사용하면 Python 함수 객체를 가져와서 해당 객체에 대한 JavaScript 인터페이스를 생성할 수 있으므로 상자의 이벤트 리스너로 사용할 수 있습니다. 상자 의 모든 키 입력 은 콘솔에 기록되지만 Python 측에서도 처리할 수 있습니다
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.