PyScript란?
아직 많이 알려지지 않은 파이스크립트는, 올해 5월 PyCon 2022 컨퍼런스 에서 Anaconda가 발표했습니다.
이름에서 유추할 수 있듯이, Python + Javascript 로
표준 HTML 내에서 Python을 사용할 수 있게 해주는 PyScript라는 프레임워크입니다.
왜 Python일까?
파이썬은 2022년 10월 기준, 프로그램 언어 인기 순위를 보여주는 티오베(tiobe)에서 1위를 차지하고 있습니다.
파이썬은 수많은 라이브러리와 오픈 소스를 통해
데이터 과학, 시각화, 머신러닝 등 인공지능 분야에서 활발하게 사용되고 있습니다.
웹 분야에서는 Django, Flask와 같은 프레임워크와 함께 백엔드에서 주로 사용되어 왔으며
프론트엔드에서는 거의 지원이 없었습니다.
자바스크립트와 node.js의 장점인 프론트/백을 하나의 언어로 개발할 수 있다는 장점을
파이스크립트가 나오면서 파이썬도 가져갈 수 있을 것 같습니다.
파이스크립트 공식 사이트
Run python in your HTML!
Pyscript.net
Run Python code in your HTML.
pyscript.net
- 브라우저 지원: PyScript를 사용하면 서버 없이 Python 및 호스팅을 지원할 수 있습니다.
- 파이썬 생태계 지원: PyScript를 사용하면 Pandas, NumPy 등과 같은 인기 있는 Python 패키지를 사용할 수 있습니다.
- 상호 운용성: 프로그램은 Python과 JavaScript 오브젝트 및 네임스페이스 간에 양방향으로 통신할 수 있습니다.
- 환경 관리: PyScript를 사용하면 개발자가 실행할 페이지 코드에 포함할 파일과 패키지를 정의할 수 있습니다.
- UI 개발: PyScript를 사용하면 개발자는 버튼 및 컨테이너 등과 같은 사용 가능한 UI 구성 요소를 사용하여 쉽게 빌드할 수 있습니다.
- 프레임워크 유연성: PyScript는 개발자가 Python에서 직접 쉽게 확장 가능한 구성 요소를 만들기 위해 구축할 수 있는 유연한 프레임워크입니다.
PyScript 사용법
파이스크립트는 install 해서 사용할 수도 있지만,
jQuery처럼 스크립트 추가만으로도 사용할 수 있습니다.
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>위 코드를 head 태그에 추가해주면 파이스크립트 컴포넌트를 사용할 수 있습니다.
이제 <py-script> 태그 안에 파이썬 코드를 작성할 수 있습니다.
<py-script> 태그는 요소 자체는 페이지에 렌더링되지 않고, 논리를 추가하는 데만 사용됩니다.
Hello, World!
가장 먼저 Hello World를 찍어봐야겠죠
head 태그에 스크립트를 추가하고,
body 에는 <py-script> print('Hello, World!') </py-script> 를 추가합니다.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-script> print('Hello, World!') </py-script>
</body>
</html>
태그에 값 전달하기
특정 HTML 태그에 연산된 파이썬 값을 넣을 수도 있습니다.
- 태그에 id 지정
- pyscirpt의 write() 사용
아래 코드는 label 태그의 id를 today로 지정하고,
datetime을 이용해 만든 날짜 값을 id가 today인 태그로 전달하는 코드입니다.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<b><p>Today is <u><label id='today'></label></u></p></b>
<py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
</py-script>
</body>
</html>
파이스크립트 분리하기
파이스크립트도 자바스크립트와 같이 파일을 분리할 수 있습니다.
sample.py 에는 구구단을 출력하는 파이썬 코드를 작성하고
HTML에서는 해당 파이썬 파일을 가져옵니다.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script src="./sample.py"></py-script>
</body>
</html>for i in range(2, 10):
for j in range(1, 10):
print ( str(i) + " x " + str(j) + " = " + str(i*j) )
라이브러리 사용하기
파이스크립트에서 지원하는 몇몇 패키지는 <py-config> 태그를 통해 사용할 수 있습니다.
아래 코드는 NumPy를 이용해 난수를 생성하고, Matplotlib로 시각화하여 그래프로 보여주는 코드입니다.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config type="json">
{
"packages": ["numpy", "matplotlib"]
}
</py-config>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig
</py-script>
</body>
</html>
마무리
파이썬을 잘 몰라 테스트를 하는데 한계가 있는 것 같습니다.
파이스크립트 관련해서 찾아보다 보니, 확실히 시각화 라이브러리가 많아 이부분에 대해서 좀 더 알아보고 싶네요.
파이스크립트는 현재 알파버전이라, 로딩 시간 등 알려진 이슈가 많이 있습니다.
아직 production 단계에 사용하는 것은 권장하지 않는다고 합니다.
하지만 이것저것 테스트해볼 가치는 충분한 것 같습니다 :)
참고 사이트
https://morioh.com/p/b3848ba0ab99