PyScript
Anaconda에서 HTML 웹페이지에서 python을 사용할 수 있는 PyScript를 출시 하였다.
우선 pyscript를 이용해 "Hello World"를 찍어보겠다.
1
2
3
<py-script>
print("Hello World")
</py-script>
1
Loading...
F5를 눌러 refresh해 보면 위의 text output 창의 Hello World가 Loading...에서 Hello World로 바뀌는 것을 볼 수 있을 것이다.
pyscript의 Runtime은 짧은데 처음 Loading될 때는 약간의 Loading Time이 존재하기 때문에 이런 현상이 눈에 띈다.
이제 사용법을 알아보자.
PyScript Install
우선 pyscript를 Install 해보자.
별다른건 없고 PyScript Page에 접속해 Install 버튼을 누르면 아래의 코드를 웹페이지에 삽입을 하라고 한다.
1
2
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
그런데 이 두줄의 코드를 일반적으로 하듯이 <Head> Tag에 넣어주면 아래와 같은 문제가 생긴다.
문제점
- Stylesheet때문에 내 웹페이지의
Style이 망가진다.pyscript.js의 Loading에 시간이 꽤 걸린다. 그래서 내 웹페이지에서 어떤 Action을 취할때 마다 무슨 로딩이 되는것 마냥렉이 생긴다.
그래서 다음과 같은 방법으로 문제를 해결하고 사용 중이다.
해결책
- stylesheet 삭제
- Code 삽입 위치:
<head>tag 내부가 아닌pyscript를 사용하는 posting 내부에 위치.
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
위의 방법으로 웹페이지 로딩이 느려지는 현상이 해결되었고, Style 예전 그대로를 유지하여 pyscript를 사용할 수 있게 되었다.
PyScript 간단한 예제
사실 위에서 작성한 pyscript 코드를 Markdown file에 넣어주게 되면 이 바로 아래찍히는 “Hello World” 처럼 <div>Tag로 아무런 Style이 없이 Print 된다.
(사실 print결과가 이 문장 바로 아래 표현이 될 수 있도록 id를 지정해 print 한 결과이다. 원래는 print를 하면 print 한 위치에 출력이 됐었는데 version이 바뀌어서 인지 id를 지정하지 않은 print 결과는 제일 마지막 pyscript 결과 뒤에 출력이 되는 듯하다. - 2022-10-08 기준)
Loading...
ID element 접근 및 수정
pyscript 자체적으로 ID를 이용해 결과를 내보내는 방법이 두 가지가 있다.
가독성을 좋게하기 위해서 pyscript 출력이 될 tag에 자체 style을 적용하였다.
1. Element('target-id').write('output1')를 이용하는 방법.
참고:
pyscript.write('target-id', 'output')방법은 Deprecated 될 예정이라고함.
1
2
3
4
5
<p id="test1" style="font-size: 1.5rem; color: orange;">Loading...</p>
<py-script>
Element('test1').write('output1')
</py-script>
Loading...
2. Element로 자식요소 선택하는 방법.
Id를 선택 할 수 있는 Element로 자식요소를 선택 할 수도 있다.
나처럼 Web개발에 익숙치 않고 python으로 프로그래밍을 시작하신 분이라면 CSS 선택자가 익숙하지 않을 수도 있다.
Real Python의 글을 읽다보니 CSS 선택자를 학습할 수 있는 재미있는 게임을 소개하고 있는데 관심이 있는 분은 여기를 클릭해서 연습해 보자.
1
2
3
4
5
6
7
8
9
<div id="test2">
<p style="font-size: 1.5rem; color: orange;">Loading...</p>
</div>
<py-script>
text_to_print = Element("test2 > p")
text_to_print.write("Output2")
</py-script>
Loading...
3. py-script의 output 속성을 이용하는 방법.
1
2
3
4
5
<p id="test3" style="font-size: 1.5rem; color: orange;">Loading...</p>
<py-script output="test3">
'Output3'
</py-script>
Loading...
<py-script> Tag의 output 속성을 이용하면 원래 <p> Tag content인 "Loading..."을 그대로 두고 output인 Outpu3가 append되어 출력이 된다.
출력 시 append기능을 원한다면 output 속성을 이용하면 된다.
output속성을 이용할 경우 print 문을 쓰지 않고 Return 의 개념으로 작성을 해야 출력이 잘 된다.
DOM 객체 접근 및 수정
<py-script>에서 js를 import 하면 javascript의 global variable을 사용할 수 있다.
js object 중 document object(DOM)를 이용하여 id가 test4인 tag의 자식 tag에 접근해 보도록 하자.
1
2
3
4
5
6
7
8
9
10
<div id="test4">
<p style="font-size: 1.5rem; color: orange;">Loading...</p>
</div>
<py-script>
from js import document
content = document.getElementById("test4").children[0]
content.innerHTML = "output4"
</py-script>
Loading...
문제점:
kramdown parser가 deploy할때<py-script>code의줄바꿈을 하지 못하는 문제를 발견하였다.
줄바꿈을 하지 못한 경우아래와 같은 오류를 띄운다.
1
JsException(PythonError: Traceback (most recent call last): File "/lib/python3.10/site-packages/_pyodide/_base.py", line 421, in eval_code CodeRunner( File "/lib/python3.10/site-packages/_pyodide/_base.py", line 237, in __init__ self.ast = next(self._gen) File "/lib/python3.10/site-packages/_pyodide/_base.py", line 141, in _parse_and_compile_gen mod = compile(source, filename, mode, flags | ast.PyCF_ONLY_AST) File "", line 1 from js import document content = document.getElementById("test3").children[0] def main(): content = document.getElementById('test3').children[0] content.innerHTML = 'output3' main() ^^^^^^^ SyntaxError: invalid syntax )
해결책:
이와 같은 오류가 발생하는 분 이라면 Jekyll Blog에서 pyscript 줄바꿈 오류 에 해결방법이 있으니 확인 바란다.
여기까지가 pyscript의 설치방법과 주의사항 그리고 DOM객체 접근등에 대해서 간단한 예제로 살펴본 내용이다.
PyScript를 사용함에 있어 javascript object를 py-script에서 사용이 가능하고, py-script object를 javascript에서도 사용이 가능하게 되어 있다.
자세한 내용은 아래의 문서들을 참조 바란다.
“PyScript Docs”: https://docs.pyscript.net/latest/index.html
“PyScript GitHub”: https://github.com/pyscript/pyscript
“RealPython Docs”: https://realpython.com/pyscript-python-in-browser/#modules-missing-from-the-python-standard-library