Html에서 Pyscript 사용하기

Html에서 파이썬 코드를 바로 실행할 수 있으면 좋겠다고 생각한적 있으신가요? Pyscript를 사용하면 가능 합니다.
오늘은 html파일에서 pyscript를 사용하는 방법에 대해서 알아보겠습니다.

pyscript 추가하기

우선 pyscript를 사용하기 위해서는태그안에 아래를 입력해야 합니다.

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

그러면 이제 바로 html안에서 파이썬을 실행할 준비가 된 것 입니다.

실행 예제

아래 예제를 보면 예상할 수 있다시피, import 하여 사용하는 것 역시 가능합니다. 예제는태그 안에서 현재 시간을 출력하는 예제 코드에요.
우선 datetime을 import하고, datetime.now()을 입력하여 현재시간을 출력하는 파이썬 코드를 실행해볼게요.

from datetime import datetime
now = datetime.now()
print(now)

아래와 같이 화면이 출력되는 것을 확인할 수 있습니다. pyscript로 실행하면 어떻게 나오는지 볼까요?

이제 이 코드를 html에서 실행해보겠습니다. html 내부에서 실행하고자 하는 위치에 하면 됩니다.
body 태그 안에서 실행하는 예시 입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>PyScript Hello World</title>
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>
    Hello world! <br>
    This is the current date and time, as computed by Python:
    <py-script>
        from datetime import datetime
        now = datetime.now()
        print(now)
    </py-script>
  </body>
</html>

패키지 활용하기

파이썬에 유용한 package를 쓰려면? tag 안에 사용할 패키지를 기입하면 사용할 수 있습니다.

<py-config>
    packages = [
      "matplotlib"
    ]
 </py-config>

아래 예제를 한번 봐보겠습니다.
matplotlib을 활용하여 div id=”matplotlib-lineplot” 인 태그안에 결과를 출력하는 예제 입니다. 출력할 태그를 지정해주어야 결과가 나옵니다.
py-script 태그안에서 output에 원하는 div id 값을 입력하면 됩니다.
예제에서는 matplotlib-lineplot를 입력하겠습니다.

<body>
    Hello world! <br>
    This is the current date and time, as computed by Python:
        <py-config>
            packages = [
              "matplotlib"
            ]
         </py-config>
        <div id="matplotlib-lineplot"></div>
        <py-script output="matplotlib-lineplot">
            # Python Code

            # importing the matplotlib library
            import matplotlib.pyplot as plt
            fig, ax = plt.subplots()
            # x axis
            x = ["Python", "C++", "JavaScript", "Golang"]
            # y axis
            y = [10, 5, 9, 7]
            plt.plot(x, y, marker='o', linestyle='-', color='b')
            # Naming the x-label
            plt.xlabel('Language')
            # Naming the y-label
            plt.ylabel('Score')
            # Naming the title of the plot
            plt.title('Language vs Score')
            fig
         </py-script>
  </body>

아래와 같이 실행되는 것을 확인할 수 있습니다.