본문 바로가기
카테고리 없음

PyScript 사용 방법

by Ziros 2022. 5. 30.
반응형

Python은 최근 몇 년 동안 엄청난 인기를 얻었습니다. 인공 지능에서 가장 널리 사용되는 것부터 데이터 과학, 로봇 공학 및 스크립팅에 이르기까지 광범위한 응용 프로그램이 있습니다.

웹 개발 분야에서 Python은 Django, Flask와 같은 프레임워크와 함께 백엔드에서 주로 사용됩니다.

지금까지 Python은 JavaScript와 같은 다른 언어와 같이 프론트 엔드 측면에서 많은 지원이 없었습니다. 그러나 고맙게도 Python 개발자는 웹에서 선호하는 언어를 지원하기 위해 일부 라이브러리(예: Brython )를 구축했습니다.

그리고 올해 PyCon 2022 컨퍼런스 에서 Anaconda는 표준 HTML을 사용하여 웹에서 Python을 사용할 수 있게 해주는 PyScript라는 프레임워크를 발표했습니다.

 

전제 조건

이 문서와 함께 코딩하려면 다음 도구와 지식이 필요합니다.

  • 원하는 텍스트 편집기 또는 IDE.
  • 파이썬 지식.
  • HTML에 대한 지식.
  • 브라우저(Google Chrome은 PyScript에 권장되는 브라우저입니다).

파이스크립트란?

PyScript는 사용자가 브라우저에서 HTML 인터페이스를 사용하여 Python 프로그램을 구성할 수 있도록 하는 Python 프론트 엔드 프레임워크입니다.

Emscripten , Pyodide , WASM 및 기타 최신 웹 기술 의 힘을 사용하여 개발 되어 목표에 따라 다음 기능을 제공합니다.

  • 간단하고 깔끔한 API를 제공합니다.
  • 플러그 가능하고 확장 가능한 구성 요소 시스템을 제공합니다.
  • "99%를 위한 프로그래밍"이라는 미션을 달성하기 위해 표준 HTML을 지원하고 확장하여 독단적이고 신뢰할 수 있는 사용자 지정 구성 요소를 읽습니다.

지난 수십 년 동안 Python과 최신 HTML, CSS 및 JavaScript와 같은 고급 UI 언어는 협업을 통해 작동하지 않았습니다. Python에는 단순히 앱을 패키징하고 배포하기 위한 매력적인 UI를 만드는 간단한 메커니즘이 없었지만 현재 HTML, CSS 및 JavaScript는 학습 곡선이 가파르게 될 수 있습니다.

Python이 HTML, CSS 및 JavaScript 규칙을 사용하도록 허용하면 이 두 가지 문제뿐만 아니라 웹 애플리케이션 개발, 패키징, 배포 및 배포와 관련된 문제도 해결됩니다.

PyScript는 브라우저에서 JavaScript의 역할을 수행하기 위한 것이 아니라 Python 개발자, 특히 데이터 과학자에게 더 많은 유연성과 기능을 제공하기 위한 것입니다.

왜 파이스크립트인가?

PyScript는 다음을 제공하여 일관된 스타일 지정 규칙, 더 많은 표현력 및 학습 용이성을 갖춘 프로그래밍 언어를 제공합니다.

  • 브라우저 지원: PyScript는 서버나 구성 없이 Python 및 호스팅을 지원합니다.
  • 상호 운용성: 프로그램은 Python과 JavaScript 개체 및 네임스페이스 간에 양방향으로 통신할 수 있습니다.
  • 생태계 지원: PyScript를 사용하면 Pandas, NumPy 등과 같은 인기 있는 Python 패키지를 사용할 수 있습니다.
  • 프레임워크 유연성: PyScript는 개발자가 Python에서 직접 쉽게 확장 가능한 구성 요소를 만들기 위해 구축할 수 있는 유연한 프레임워크입니다.
  • 환경 관리: PyScript를 사용하면 개발자가 실행할 페이지 코드에 포함할 파일과 패키지를 정의할 수 있습니다.
  • UI 개발: PyScript를 사용하면 개발자는 버튼 및 컨테이너 등과 같은 사용 가능한 UI 구성 요소를 사용하여 쉽게 빌드할 수 있습니다.

PyScript를 시작하는 방법

PyScript는 배우기 상당히 쉽고 간단합니다. 

HTML 파일 만들기

시작하려면 선택한 텍스트 편집기/IDE를 사용하여 브라우저에 텍스트를 표시할 HTML 파일을 만들어야 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>

</body>
</html>

HTML 파일을 만든 후 PyScript 인터페이스에 액세스할 수 있도록 HTML 파일에 PyScript를 연결해야 합니다. 이것은 <head>태그에 배치됩니다.

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

이제 PyScript를 HTML 파일에 연결했으므로 "Hello World"를 인쇄할 수 있습니다.

<py-script>태그 를 사용하여 이 작업을 수행할 수 있습니다 . 태그를 사용하면 여러 줄 의 <py-script>Python 프로그램을 실행하고 브라우저 페이지에 인쇄할 수 있습니다. 태그 사이에 <body>태그를 넣습니다.

<body> <py-script> print("Hello, World!") </py-script> </body>

HTML 파일의 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>
	<py-script> print("Hello, World!") </py-script>
</body>
</html>

브라우저에 다음이 표시되어야 합니다.

 

Hello, World!

 

팁: VSCode 편집기를 사용하는 경우 HTML 파일을 업데이트할 때 VSCode 의 라이브 서버 추가 기능을 사용하여 페이지를 다시 로드할 수 있습니다.

PyScript로 더 많은 작업

PyScript 프레임워크로 수행할 수 있는 작업이 더 있습니다. 이제 몇 가지를 살펴보겠습니다.

레이블이 지정된 요소에 레이블 부착

PyScript를 사용하는 동안 Python 코드에서 HTML로 변수를 전달할 수 있습니다. 태그 내 모듈 의 write메서드를 사용하여 이 작업을 수행할 수 있습니다 . 속성을 사용하면 일반 텍스트로 표시되는 문자열을 전달할 수 있습니다.pyscript<pyscript>id

write 메소드는 id값과 제공될 변수의 두 가지 변수를 허용합니다.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/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>

출력은 다음과 같습니다.

Today is Tyesday May 24, 2022

 

브라우저에서 REPL 실행

PyScript는 브라우저에서 Python 코드를 실행하기 위한 인터페이스를 제공합니다.

이를 수행하기 위해 PyScript는 <py-repl>태그를 사용합니다. 태그 는 <py-repl>페이지에 REPL 구성 요소를 추가하여 코드 편집기 역할을 하고 실행 가능한 코드를 인라인으로 작성할 수 있도록 합니다.

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl id="my-repl" auto-generate=true> </py-repl>
</html>

 

반응형
저작자표시

댓글

티스토리툴바