"> PyScript기초 "> PyScript기초 ">

<head>
  <!-- HTML Meta Tags -->
  <meta charset="UTF-8" />
  <title> **PyScript기초** </title>
  <meta
    name="description"   content=" 설명 "   />
  <meta name="keywords" content="파이 스크립트, **PyScript 기초**, 파이썬과 스크립트, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <!-- Open Graph / Facebook -->
  <meta   property="og:title"   content="**PyScript기초** "  />
  <meta  property="og:description" content=" 파이 스크립트, **PyScript 기초**, 파이썬과 스크립트, 양파고, Yang Phago, 노션, 양파고 노션, notion" />
  <meta property="og:image" content="대표 이미지" />
  <meta property="og:url" content="페이지 주소" />
  <meta property="og:type" content="website" />
</head>

https://github.com/roughkyo/first_Test.git

목차(클릭하세요)

<aside> 💡 파이스크립의 실행을 위한 2가지 방법

깃허브 레포지토리를 이용한 웹호스팅(page 추가)
codepen을 사용해서 바로 확인

</aside>

0.공식문서

파이 스크립트 공식문서

PyScript

1. PyScript란?

HTML 인터페이스와 Pyodide, WASM 및 최신 웹 기술을 사용하여 웹 브라우저에서 동작하는 다양한 Python 애플리케이션을 만들 수 있는 프레임워크
Python을 이용해 웹 브라우저에서 동작하는 완성도 높은 애플리케이션을 만들 수 있도록, 여러 공개된 기술을 프레임워크와 결합하는 것을 목표로 하는 메타 프로젝트

2. 사용법(기초)

PyScript를 사용하려면 적절한 PyScript 파일들을 HTML 파일의 head 태그에 아래와 같이 추가해야 함

현재 PyScript가 구현하는 요소들

<py-script>: 웹 페이지 내에서 실행 가능한 Python 코드를 정의하는 데 사용됨. 요소 자체는 페이지에 렌더링되지 않으며 논리를 추가하는 데만 사용됨
<py-repl>: 웹 페이지에 코드 편집기로 렌더링됨. 사용자가 실행 코드를 작성할 수 있도록 하는 REPL 구성 요소를 생성함.

<head>
      <title>파이스크립트로 간단한 파이썬 코드 실행해보기</title>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="<https://pyscript.net/alpha/pyscript.css>" />
      <script defer src="<https://pyscript.net/alpha/pyscript.js>"></script>
</head>

<body>
    <!-- 바디(body) 영역안에 파이스크립트 영역을 만들어주고 필요한 코드 적어주기 -->
    <py-script>
        print('hello, world!')
    </py-script>
</body>
</html>

기초 코드 실행결과

https://roughkyo.github.io/first_Test/

연산 결과 실행해보기

<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("π 연산 결과:")
        def compute_pi(n):
            pi = 2
            for i in range(1,n):
                pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
            return pi

        pi = compute_pi(100000)
        print(f"π 연산 결과는 {pi:.3f} 입니다.")
        </py-script>
    </body>
</html>

https://codepen.io/mvgvuvzy-the-decoder/pen/XWGKwxJ

3. 사용법(응용)

3.1. 레이블이 지정된 요소에 쓰기

1. 페이지의 레이블이 지정된 요소에 문자열을 보내는 pyscript의 .write() 메서드를 사용
1. datetime을 이용해 만든 날짜 값은 id가 ‘today’인 태그로 보내고, 위에서 만든 pi 연산 결과값은 id가 ‘pi’인 태그로 보내는 스크립트

```javascript
<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>
        <div id="pi" class="alert alert-primary"></div>
        
        <py-script> 
        import datetime as dt
        pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))

        def compute_pi(n):
            pi = 2
            for i in range(1,n):
                pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
            return pi
        pi = compute_pi(100000)
        pyscript.write('pi', f"π 연산 결과는 {pi:.3f} 입니다.")
        </py-script>
    </body>
</html>