1. 입력과 출력

이번 챕터에서는 PyScript를 이용해서 입력받거나 화면에 출력하는 방법에 대해서 알아볼 것입니다. PyScript에서 입력과 출력을 처리하는 방법으로는 Python에서 사용하던 input 과 print , 그리고 PyScript의 내장 함수인 display와 write가 있습니다. 이 중에서 write의 경우에는 DOM과 관련된 요소이므로 다른 챕터에서 살펴보고, 이번에는 나머지 3개의 방법에 관해서만 설명하겠습니다.

1.1 print

처음으로 알아볼 문법은 print입니다. PyScript에서 print 문법은 JavaScript에서 console.log로 콘솔창에 출력하는 것과 비슷한 역할을 합니다. 사용 방법은 Python에서와 동일한 print(values)입니다. 다음과 같은 예제코드를 작성한 이후에 설명하도록 하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PyScript print</title>
  <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("hello world!")

      for i in range(1,10):
          print(f'2 * {i} = {2*i}')
  </py-script>
</body>
</html>

HTML 기본 템플릿을 작성한 후, CDN 방식으로 PyScript를 불러옵니다. 그 후 <py-script> 태그를 작성하고 그 안에 Python 문법으로 실행시키고 싶은 코드를 작성하면, 브라우저에서 Python을 사용할 수 있습니다. 현재 작성된 코드는 “hello world!”와 구구단 2단을 print 하는 것입니다. 이 HTML 문서를 실행하면 브라우저에 다음과 같이 원하던 결과가 화면에 출력되는 것을 확인할 수 있습니다.

print1.png

하지만 출력이 조금은 특이한 방식으로 되는 것도 확인할 수 있습니다. PyScript 내에서 print 문법은 <py-terminal> 태그를 <body> 태그 최하단에 생성하고, 그 안에 <pre> 태그를 만들어서 출력하고자 하는 내용을 집어넣는 방식으로 작동합니다. 이 <py-terminal> 태그는 CDN 방식으로 적용한 PyScript CSS를 통해서 위와 같은 형태로 표시됩니다. 개발자 도구(F12)에서 <body> 태그를 살펴보면, 앞서 설명된 것처럼 작동하는 것을 확인할 수 있습니다.

<body>
  <py-script id="py-internal-0"></py-script>
  <py-terminal auto="" docked="" class="py-terminal-docked">
    <pre class="py-terminal">
        hello world!
        <br>
        2 * 1 = 2
        <br>
        2 * 2 = 4
        <br>
        2 * 3 = 6
        <br>
        2 * 4 = 8
        <br>
        2 * 5 = 10
        <br>
        2 * 6 = 12
        <br>
        2 * 7 = 14
        <br>
        2 * 8 = 16
        <br>
        2 * 9 = 18
        <br>
    </pre>
  </py-terminal>
</body>

또한 개발자 도구에서 콘솔을 열어보면, JavaScript의 console.log 처럼 print도 콘솔에도 결괏값을 출력하는 것을 확인할 수 있습니다. 추후에 알려드릴 <py-config>라는 태그 내에서 print의 결과를 지금처럼 화면에도 표기할 것인지, 콘솔 창에만 표기할 것인지, 또는 <py-terminal> 태그가 화면 최하단에 고정될 것인지, 콘텐츠의 끝에 표기될 것인지 등을 선택할 수 있습니다. 이 부분은 해당 챕터에서 더 자세히 알아보겠습니다.

1.2 input

이번 챕터에서 알아볼 문법은 input입니다. PyScript에서 input 문법은 JavaScript의 prompt와 같은 방식으로 동작합니다. print와 마찬가지로 input도 Python에서와 동일한 방식으로 사용할 수 있습니다. 예제코드를 보면서 설명하도록 하겠습니다.

<py-script>
	  number = int(iput('숫자를 입력하세요.'))
	
	  for i in range(1,10):
	      print(f'{number} * {i} = {number*i}')
</py-script>

이번에 작성된 코드는 숫자를 입력받은 후에, 입력받은 숫자의 구구단을 출력하는 것입니다. 이번 예제에서는 prompt 창에 “3”을 입력하겠습니다. 이 문서를 실행해 보면 다음과 같은 결과를 볼 수 있습니다.