웹에서 파이썬 코드 실행 - web-eseo paisseon kodeu silhaeng

Question

목차 Show

PyScript 소개
PyScript 코드 맛보기

PyScript 소개

홈페이지: https://pyscript.net/
Python 코드를 HTML 웹에서 바로 실행 가능
JavaScript 대체해 역동적인 스크립트 작성 가능
<py-script>파이썬코드</py-script> 문법 사용

PyScript 코드 맛보기

<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>
hz = "홈짱닷컴 Homzzang.com"
print(hz)

</py-script>
결과보기

안녕하세요. 프즈입니다.

Brython 이라고 웹 개발을 자바스크립트가 아니라 파이썬으로 할 수 있도록 가능하게 해주는 것이 있어요

발음을 브리튼? 이라고 들리던데 이름은 Browser 와 Python 을 교묘하게 하나로 만들었더라고요

자세한 내용은 https://brython.info/ 여기서 확인해 볼 수 있어요

접속해서 보이는 시계도 파이썬 코드이고 그래서 페이지 소스 코드 보기를 해보면 파이썬 코드가 보일 겁니다

script 부분에 type이 text/python 이 보여요. 그냥 무조건 보통 text/javascript 를 보다가 text/python을 보니 멋져 보여요

물론 이 파이썬 코드는 다시 자바스크립트로 변환될 테지만 재미 삼아해 보기에 좋아 보여요

나온 지 상당하 오래됐는데 금방 없어질 줄 알았는데 몇 년 동안 발전하고 있었네요

cdn을 통해서 html 파일 간단하게 만들어서 해볼 수 있어요

아래 간단한 골격입니다.

1. head 안에 brython 관련 js 파일 두 개를 불러와요. brython.js, brython_stdlib.js

2. body 부분에 onload="brython()" 부분에 반드시 있어요 합니다.

3. 파이썬 코드로 작성할 부분을 type="text/python"으로 작성합니다

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython_stdlib.min.js"></script>
    </head>
    <body onload="brython()">
        <button id='test-button'>눌러봐요</button>

    </body>
</html>
<script type="text/python">
    from browser import document

    def alert(event):
        print("오잉??")
    
    document["test-button"].bind("click", alert)

</script>

이렇게 하면 버튼을 누를 때마다 오잉?? 이 출력됩니다.

print는 자연스럽게 console.log로 변환되나 봐요

다이얼로그 박스를 제공해고 있는 것을 사용해봤어요

from browser.widgets.dialog import InfoDialog 이 부분을 추가하여 불러와 사용했어요

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython_stdlib.min.js"></script>
    </head>
    <body onload="brython()">
        <button id='test-button'>눌러봐요</button>

    </body>
</html>
<script type="text/python">
    from browser import document
    from browser.widgets.dialog import InfoDialog


    def alert(event):
        InfoDialog("Hello", "버튼이 눌렸다!")
    
    document["test-button"].bind("click", alert)

</script>

이제 눌러봐요 버튼을 누르면 다이얼 로그 박스가 나와요

생각보다 많이 직관적이네요

콘솔에서 파이썬을 실행하는 것처럼 브라우저에서 어떤 파이썬 코드를 사용할 수 있는지도 테스트해볼 수 있어요

https://brython.info/tests/console.html?lang=en

콘솔에서 사용한 코드입니다

from browser import document
from browser.widgets.dialog import InfoDialog

InfoDialog("다이얼로그", "콘솔에서 실행해보기")

이러다 나중에는 파이썬 개발자도 풀스택 개발자가 되는 날이 올까요?

윈도우 / / 2020. 5. 10. 09:51

간단히 파이썬 코드를 테스트 해야되거나 잠깐 사용하는 다른 데스크탑에서 프로그램 설치가 귀찮을 때 온라인 코드 실행 사이트(웹 IDE), 온라인 컴파일러를 찾게 됩니다. 이 글에서는 잠깐 사용해본곳 중 괜찮았던 파이썬 코드 실행 사이트를 알려드리겠습니다.

Repl.it

Repl.it 간단한 소스도 테스트가 가능하며, 여러 파일을 연계해서 해야되는 경우에도 손 쉽게 사용이 가능합니다. 코드 내에서 import 를 하는 경우 없는 모듈은 자동으로 다운로드되고 우측 화면에서 로딩과정을 통해서 파이썬 코드 실행 결과를 확인할 수 있습니다.

원하는 경우 회원가입 시스템을 통해서 본인이 코딩한 소스코드를 저장할 수 있으니 한번씩 이용해야 하는 경우 회원가입 하시는 것을 추천 드립니다. 파이썬 이외에도 노드JS, C, Java 등 지원중인 프로그래밍 언어가 굉장히 많습니다. 해당 목록을 확인하시려면 여기를 클릭하세요.

파이썬 html 연동 파이썬 서버에서 실행 파이썬 웹 컴파일러 PyScript 사용법