Python 기반 혁신적인 Full Stack Framework pynecone 소개

Full Stack Framework pynecone 소개

Pynecone은 Python만 사용해도 Nextjs로 웹 앱을 구축하고 배포할수 있는 혁신적인 Full Stack Framework이며 오픈소스입니다. 2022년에 공개되었으며 React, NextJS, ChakraUI 및 FastAPI 백엔드 등을 래핑하여 파이썬문법만으로 

자연스럽게 웹앱을 구축할수 있습니다.

 

공식 Github (https://github.com/pynecone-io/pynecone)

 

Coder는 어떤게 좋은것지 알려면 Example을 실행해 보면 알 수 있습니다.

그래서 설치 방법부터 첫번째 앱 만들어 실행하기까지 설명해 드리겠습니다.

 

설치 방법

Pynecone을 시작하려면 아래 프로그램이 필요합니다.

• Python 3.7+ : https://www.python.org/ (or Anaconda - https://www.anaconda.com/)
• Node.js 12.22.0 : https://nodejs.org/ (Node를 알 필요는 없습니다. 실행하기 위해 필요할 뿐입니다.)

설치가 완료되면 아래 명령어로 설치가 가능합니다.

각각의 설치 과정이나 추가적인 팁이 있지만 설치가 쉬우므로 생략합니다.

 

설치후 command shell을 생성한후 적당한 디렉토리로 이동해서 아래 명령어를 실행합니다.

 

#Pynecone #React #Python #Next.js #Node.js

Full Stack Framework pynecone

 

## 파이썬 가상환경 생성
$python -m venv .venv

## 파이썬 가상환경 실행
$.venv\Scripts\activate.bat

## 파이썬 가상환경에 pynecone 실행
(.venv) $pip install pynecone

설치가 완료되면 pip 버전때문에 아래와 같이 경고 문구가 나오는 경우도 있습니다.

경고문구가 거슬려서 업데이트 해주고 싶다면 해줘도 무방하지만 이상태로 두어도 문제는 없습니다.

 

첫번째 Pynecone 앱 만들기

위에 소개해드린 명령어로 설치가 되었다면

pynecone 명령줄 도구인 pc 도 설치가 되었을겁니다.

첫번째 앱을 만들어서 설치에 성공했는지 확인해 보겠습니다.

(.venv) $mkdir my_first_app
(.venv) $cd my_first_app
(.venv) $pc init

위 명령어를 실행하면 자동으로 Bun을 다운로드하여 설치합니다.

이 명령은 위에서 만든 my_first_app 디텍토리에 템플릿 앱의 구조를 만들어 줍니다.

 

아래 명령어로 실행할수 있습니다.

(.venv) $pc run

그럼 아래와 같이 실행이 될것입니다.

 

실행을 하면 처음 설치시 계속 다운로드하게 됩니다.

설치가 완료되면 App이 실행완료되면서 아래와 같이 Url이 제공됩니다.

 

 

http://localhost:3000 으로 접속해 보세요.

그럼 아래와 같이 나올것입니다.

 

샘플 소스 

샘플 소스 트리는 아래와 같습니다.

my_first_app.py 가 웹앱을 구성하는 코드의 전부입니다.

아래는 해당 코드 입니다.

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config

import pynecone as pc

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


class State(pc.State):
    """The app state."""

    pass


def index():
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to Pynecone!", font_size="2em"),
            pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
            pc.link(
                "Check out our docs!",
                href=docs_url,
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

 

저기서 "Welcome to Pynecone!" 문구를 아래와 같이 변경해 보세요.

"Welcome to My First App!"

그럼 커맨드 창에서 아래와 같이 수정한것을 적용했다고 나올것입니다.

이렇게 쉽게 웹앱을 만들었고 수정한것이 서버를 재시작하지 않아도 바로 적용되는것을 볼수 있었습니다.

 

상태 변경 하는 소스로 변경

위 소스를 변경해서 상태를 변경해보는 샘플을 만들어 보겠습니다.

아래와 같이 상태를 변경하는 부분을 추가해 줍니다.

class State(pc.State):
    """The app state."""

    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

UI에도 버튼을 두개 추가하고 버튼을 클릭했을때 변경되는 숫자를 표현하도록 하겠습니다.

pc.vstack(
..............
	pc.hstack( 
            pc.button(
                "Decrement",
                color_scheme="red",
                border_radius="1em",
                on_click=State.decrement,
            ),
            pc.heading(State.count, font_size="2em"),
            pc.button(
                "Increment",
                color_scheme="green",
                border_radius="1em",
                on_click=State.increment,
            ),
..............

위 소스를 중간에 넣고나면 전체소스는 아래와 같이 됩니다.

버튼 두개를 추가하고 버튼을 클릭했을때 숫자가 증가되거나 감소되는것이죠.

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config

import pynecone as pc

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


class State(pc.State):
    """The app state."""

    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1


def index():
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to My First App!", font_size="2em"),
            pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
            pc.link(
                "Check out our docs!",
                href=docs_url,
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            pc.hstack( 
                pc.button(
                "Decrement",
                color_scheme="red",
                border_radius="1em",
                on_click=State.decrement,
            ),
            pc.heading(State.count, font_size="2em"),
            pc.button(
                "Increment",
                color_scheme="green",
                border_radius="1em",
                on_click=State.increment,
            ),
        ),            
        spacing="1.5em",
        font_size="2em",
        ),
        padding_top="10%",
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

그럼 아래와 같이 나올것입니다.

실제로 버튼을 클릭하면 숫자가 증가하거나 감소합니다.

그리고 F12를 클릭해서 디버깅 모드로 들어간다음 Elememts부분을 확인해보면

클릭할때마다 숫자가 변경되지만 실제로 변경되는 코드는 한 한줄인것을 알수 있습니다.

즉, 코드가 재사용되면서 딱 변경되는 부분만 변경되는 React의 상태관리가 잘 작동하고 있다는것을 볼수가 있습니다.

React코드를 하나도 몰라도 Pynecone 사용법만 알면 저절로 적용됩니다.

 

 

소개를 마치면서

여기까지 Pynecone를 설치하고 소스를 수정해 보면서 쉽게 Next.js기반의 웹앱을 Python코드만으로 작성이 되는것을 보았습니다. 구조는 Flutter와 비슷해 보였고 아이디어가 좋고 React나 Nextjs 코드보다 편리한것 같습니다. 

다음글에서 하나하나 Pynecone의 사용법을 설명해 드리도록 하겠습니다.