-
HTML에서 파이썬 실행하는 Pyscript란Coding 2023. 12. 10. 04:31
들어가기 앞서
Python은 서버 사이드 또는 클라이언트 사이드에서 복잡한 프로그래밍 작업을 수행할 수 있는 프로그래밍 언어입니다. 이 두 기술을 연결하는 일반적인 방법은 다음과 같습니다:
- 서버 사이드 Python 스크립트: 웹 서버에서 Python 코드를 실행하여 HTML 페이지를 동적으로 생성할 수 있습니다. 예를 들어, Flask나 Django와 같은 Python 웹 프레임워크를 사용하여 서버 사이드에서 Python 코드를 작성하고 실행할 수 있습니다. 이 방식에서는 Python 코드가 서버에서 실행되고, 결과 HTML이 클라이언트(브라우저)로 전송됩니다.
- AJAX를 사용한 Python과의 통신: HTML/JavaScript에서 작성된 클라이언트 사이드 코드가 AJAX 요청을 통해 서버 사이드의 Python 스크립트와 통신할 수 있습니다. 이 경우, 사용자의 브라우저는 Python 코드가 실행되는 서버에 요청을 보내고, 서버는 이 요청을 처리한 후 결과를 다시 브라우저로 반환합니다.
- WebAssembly를 사용한 Python 실행: 최근의 발전으로, Python 코드를 WebAssembly로 컴파일하여 브라우저에서 직접 실행할 수 있는 방법이 개발되고 있습니다. 이는 아직 일반적인 접근 방법은 아니며, 모든 Python 기능이 지원되는 것은 아닙니다.
- Jupyter Notebook 사용: Jupyter Notebook은 브라우저 기반 인터페이스를 통해 Python 코드를 작성하고 실행할 수 있는 도구입니다. 이는 데이터 과학 및 교육 목적으로 널리 사용됩니다.
일반적으로 웹 개발에서 HTML과 Python을 함께 사용한다면, Python은 서버 사이드 로직을 처리하는 데 사용되고, HTML은 사용자 인터페이스를 구성하는 데 사용됩니다.
하지만
브라우저에서 파이썬을 실행하게 되면 파이썬 사용자들에게는 좀더 확장성이 커지는 계기가 될 것이란 생각이다. 그래서 html에 표현될 수 있는 파이썬으로 만들어진 여러가지가 활성화 될 수도 있겠다는 생각이다.
<html> <head> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css" /> </head> <body> <py-script> print('hello world') </py-script> </body> </html>더보기[Reference] : nanumi, 「우린친구블로그 - 자바스크립트 종말각?! HTML에서 파이썬 실행하는 PyScript 등장!」 http://urin79.com/?mid=blog&document_srl=20668366.
#Node.js 환경에서 자바스크립트로 파이썬 스크립트를 실행한다.
노드의 기본 내장 모듈인 "child-processs"를 사용한다.(python-shell등의 외부 라이브러리를 사용할 수도 있음)
개요
실행 : child-process 모듈의 spawn을 통해 파이썬 파일을 실행
const result = reqire('child_process').spawn('python', ['__file__.py', '매개변수1', '매개변수2',..]):결과 : stdout의 이벤트리스터를 통해 실행 결과를 받는다.
reusult.stdout.on('data', function(data) { console.log(data.toString()): }):javascript로 파이썬 파일 실행 방법
1)코드
# print.py 파일 print('황금알 낳는 거위를 찾아서')황금알 낳는 거위를 찾아서 <<를 출력하는 파이썬 코드
2)javascript 코드에서 파이썬 코드 실행 및 결과 출력
// connectPython_print.js 파일 const spawn = require('child_process').spawn; const result = spawn('python', ['print.py')); result.stdout.on('data', function(data) { console.log(data.toString()); }); result.stderr.on('data', function(data) { console.log(data.toString()); });차일드프로세스의 spawn을 통해 파이썬 프린트.py 명령어를 실행해 파이썬 코드를 구동시킨다. stdout의 data 이벤트 리스터를 통해 결과를 받아서 출력한다. 위 코드에서 data를 toString()없이 사용하면, 버퍼가 출력되기때문에 주의가 필요하다고함
javascript로 파이썬 함수 실행 방법
const spawn = require('child_process').spawn; const result_01 = spawn('python', ['function_print.py'], ); result_01.stdout.on('data', (result)=>{ console.log(result.toString()); });자바스크립트에서 파이썬 함수를 출력하는 것은 동일하다.
하지만 파이썬 파일에 name == 'main'인 경우, 함수를 호출하도록 설정을 해야 한다.
즉, 예로 기존 vscode에서
if __name__ == '__main__': app.run(debug=True, port=8000)app.py같은 파일에 정의하는 것 위와 같은 코드와 index.js에 정의하는 것을 말하는 것 같다.
그리고 '인수 전달' 호출 방법은
인자를 받는 함수가 정의된 파이썬 코드
function_args.py 파일에
import sys def getName(name, age): print (name + " : " + age) if __name__ == '__main__': getName(sys.argv[1], sys.argv[2])와 같은 코드를 넣어주어 매개변수를 받기위해 파이썬의 sys모듈을 임포트한다. name, age 인자를 받아, 출력하는 getName함수를 정의했다. 실행환경 체크 조건문에서 함수를 호출하면서 sys.argv[1], sys.argv[2]로 인수를 전달한다.
javascript로 파이썬 함수에 인수 전달 호출 방법
자바스크립트에서 파이썬 함수를 호출하면서 매개 변수를 전달하게된다.
const result_02 = spawn('python', ['function_args.py', '황금알', '3']); result_02.stdout.on('data', (result)=>{ console.log(result.toString()); }); // 출력 결과 => "황금알 : 3"spawn으로 매개변수를 받는 function_args.py 파일을 실행시키면서 위와 같은 출력 결과를 파라미터로 전달한다. 그리고 child-process 모듈에서는 spawn뿐만 아니라, exec을 통해서도 외부 명령어를 실행할 수 있다.
1. spawn은 별도 프로세스를 띄워서 명령어를 실행하고,
2. exce은 셸을 띄워서 명령어를 실행한다. 즉 경로의 파일 목록을 출력하는 방법이다.
const exec = require('child_process').exec; const result = exec('ls'); result.stdout.on('data', function(ls_result){ console.log(ls_result.toString()); })