[PyScript] HTML에서 파이썬 코드 실행하기

정수현·2022년 11월 30일

파이썬을 학교에서 어느정도 배우고, 현재는 프론트엔드 개발자가 되기 위해 자바스크립트를 더 깊게 배우고 있다.

numpy, pandas 같은 파이썬 라이브러리를 사용하면 1줄로 작성 가능한 코드를 자바스크립트로는 20줄씩 써야 하는 것을 보면서 나 파이썬 좋아했네..라는 생각을 하게 되었다. (~~내가 자바스크립트로 잘 못푼걸수도!ㅋㅋ~~)
파이썬은 코드가 간결하고, 유용한 라이브러리가 굉장히 많기 때문이다!!

그리고 파이썬의 전망도 좋을 것이라고 생각한다. 간결해서 배우기 편하고, 배우기 편하기 때문에 실제로 많은 사람들이 파이썬을 많이 사용하게 되었기 때문이랄까..? 파이썬이 브라우저 환경에서 잘 동작하게 되는 날이 올 것이라 생각하기 때문에 파이썬도 꾸준히 사용하면서 까먹지 않도록 하고 있다.

그러다가 HTML에서 파이썬 코드를 실행시킬 수 있는 프레임워크를 발견했고, 흥미가 생겨 사용해보고자 한다.

pyscript

2022년 5월 배포된 따끈따끈한 프레임워크이다.
https://pyscript.net/

pyscript 기본 사용법

사용법은 아주 간단하다.

다음 코드를 html 파일 상단 head 태그 내부에 넣어준다.

<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>

body 태그 안에 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>
    <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!')
            x = 0;
            for i in range(10+1):
                x += i
            print(x)
        </py-script>
    </body>
</html>

계산식도 잘 동작한다.

결과

DOM에 접근하기

<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>
        <br>
        <py-script>
            import datetime as dt
            Element('today').write(dt.date.today().strftime('%A %B %d, %Y'))
        </py-script>
    </body>
</html>

Element()를 통해 아이디를 받아와서 write 해준다.
Elment()는 querySelector 처럼 작동하는 듯 보인다.

클래스 Element에서 생성된 객체 는 해당 객체가 참조하는 페이지 요소로 문자열을 보낼 수 있는 메서드를 제공합니다. (공식문서)

numpy, matplotlib 사용하기

numpy, matplotlib 패키지까지 사용할 수 있다는 점이 정말 히트다. 시각화 패키지를 잘 활용하면 웹에서 더 쉽게 시각화 자료를 구현할 수 있을 것 같다. pandas나 다른 시각화 패키지들도 앞으로 지원하지 않을까..>!!?

사용할 패키지는 다음과 같이 적어준다. py-config 태그를 사용하여 head 태그 안에 적어준다.

<py-config type="json">
  {
    "packages": ["numpy", "matplotlib"]
  }
</py-config>

패키지를 사용하여 차트를 그린다.

<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(100)
        y = np.random.randn(100)
        fig, ax = plt.subplots()
        ax.scatter(x, y)
        fig
        </py-script>
    </body>
</html>

다른 종류의 차트도 그려주었다.

bar

<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 bar chart</h1>
        <div id="plot"></div>
        <py-script output="plot">
        import matplotlib.pyplot as plt
        import numpy as np
        x = [1,2,3,4,5,6,7,8,9,10]
        y = np.random.randn(10)
        fig, ax = plt.subplots()
        ax.bar(x, y)
        fig
        </py-script>
    </body>
</html>

plot

<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 plot chart</h1>
        <div id="plot"></div>
        <py-script output="plot">
        import matplotlib.pyplot as plt
        import numpy as np
        x = [1,2,3,4,5,6,7,8,9,10]
        y = np.random.randn(10)
        fig, ax = plt.subplots()
        ax.plot(x, y)
        fig
        </py-script>
    </body>
</html>

인라인 코드 작성기

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    </head>
    <py-repl></py-repl>
</html>