pynecone 페이지 추가

[링크] pynecone 설치 및 프로젝트 생성

​

pynecone 프로젝트 생성 후 간단한 예제만들어 보았는데, 페이지를 추가하고 동작하는 부분을 확인해 보겠습니다.

 

페이지 추가

​

갤러리에 있는 카운터 샘플을 페이지로 추가해보겠습니다.

실행 결과는 아래처럼 감소, 임의의 수, 증가 3개의 버튼이 존재하며, 클릭할 때마다 해당 버튼의 이벤트가 동작하는 페이지입니다.

​

​

​

first_app/first_app.py 파일 수정

​

파일을 아래처럼 수정하고 저장하면 자동으로 컴파일되면서 counter.js파일이 생성됩니다.

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config
import pynecone as pc
import random  # 추가

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 = 0

    def increment(self):
        """Increment the count."""
        self.count += 1

    def decrement(self):
        """Decrement the count."""
        self.count -= 1

    def random(self):
        """Randomize the count."""
        self.count = random.randint(0, 100)
    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%",
    )

def counter():  # 추가
    return pc.center(
        pc.vstack(
            pc.heading(State.count),
            pc.hstack(
                pc.button("감소", on_click=State.decrement, color_scheme="red"),
                pc.button(
                    "임의의 수",
                    on_click=State.random,
                    background_image="linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,176,34,1) 100%)",
                    color="white",
                ),
                pc.button("증가", on_click=State.increment, color_scheme="green"),
            ),
            padding="1em",
            bg="#ededed",
            border_radius="1em",
            box_shadow="lg",
        ),
        padding_y="5em",
        font_size="2em",
        text_align="center",
    )

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

 

파일 수정 후 저장하면 아래처럼 자동 컴파일 되고 .web 폴더에 counter.js파일이 생성됩니다.

 

wait  - compiling...
event - compiled client and server successfully in 398 ms (776 modules)

​

브라우저에서 localhost:3000/counter 로 접속하면 아래와 같은 화면을 볼 수 있습니다.