[pynecone] 02. pynecone으로 counter app 만들기

pynecone 공식 사이트 첫 번째 예제 만들어보기

https://pynecone.io/docs/getting-started/introduction

 

1. counter app을 위한 새로운 폴더 만들기

 

2. counter 폴더에 pynecone 프로젝트 생성해주기

cd counter
pc init

  - 터미널에서 해당 명령어로 counter 폴더에 접근해준뒤 "pc init" 명령어로 pynecone 프로젝트 생성

  - counter 폴더 안에 메인 파일인 counter.py가 생성됨

 

3. counter.py 작성

  - 원래의 기본 코드는 다 지우고 counter app을 만들기 위해 기본 틀만 남김

from pcconfig import config
import pynecone as pc

# 각종 상태값을 정의하고 변경하기 위한 State 클래스
class State(pc.State):
    pass

# 앱의 메인
def index():
    return 

# 앱 인스턴스 생성
# 페이지 추가
# 컴파일
app = pc.App(state=State)
app.add_page(index)
app.compile()

 

  - pynecone 홈페이지의 코드 작성

from pcconfig import config
import pynecone as pc

# 각종 상태값을 정의하고 변경하기 위한 State 클래스
class State(pc.State):

    # 변수는 모두 State에서 정의
    count = 0

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

# 앱의 메인
def index():
    return pc.hstack(
            # 버튼을 클릭했을 때, State에서 정의한 decrement 함수가 실행
            pc.button("desc - 1", on_click = State.decrement, color_scheme = "red", border_radius = "1em"),
            # State에서 정의한 count 변수
            pc.text(State.count),
            # 버튼을 클릭했을 때, State에서 정의한 increment 함수가 실행
            pc.button("asc + 1", on_click = State.increment, color_scheme = "green", border_radius = "1em"),
        )
    )

# 앱 인스턴스 생성
# 페이지 추가
# 컴파일
app = pc.App(state=State)
app.add_page(index)
app.compile()

 

  - 해당 페이지로 실행(pc run을 통해 한 번만 연결해두면 ctrl + s로 저장만 하면 자동으로 서버 재시작됨)

 

  - 추가로 페이지의 중앙에 놓기, ±10 버튼 만들기 연습

from pcconfig import config
import pynecone as pc

# 각종 상태값을 정의하고 변경하기 위한 State 클래스
class State(pc.State):

    # 변수는 모두 State에서 정의
    count = 0

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

    def increment_10(self):
        self.count += 10   
    
    def decrement(self):
        self.count -= 1

    def decrement_10(self):
        self.count -= 10

# 앱의 본체에 해당하는 함수(index)
def index():
    return pc.center(
        pc.hstack(
            pc.button("desc - 10", on_click = State.decrement_10, color_scheme = "red", border_radius = "1em"),
            pc.button("desc - 1", on_click = State.decrement, color_scheme = "red", border_radius = "1em"),
            pc.text(State.count),
            pc.button("asc + 1", on_click = State.increment, color_scheme = "green", border_radius = "1em"),
            pc.button("asc + 10", on_click = State.increment_10, color_scheme = "green", border_radius = "1em"),
        ), padding = "50px"
    )

# 앱의 인스턴스 생성
# 페이지 추가
# 컴파일
app = pc.App(state=State)
app.add_page(index)
app.compile()