Intro : Pynecone 파인콘

파이썬 코드를 가져와 React, Next JS로 Interactive Web-App을 만들어주는 프레임워크.
로고를 보고 추측컨데, 솔방울(Pinecone)의 스펠링을 변형한 것으로 보인다.

프런트 언어 없이 파이썬만으로 웹앱을 만들 수 있으며,
프런트와 백엔드 뿐 아니라 배포(Deploy)까지 처리할 수 있다. (고 한다.)

즉, 파이썬 풀스택 프레임워크라고 할 수 있겠다.

관련 문서

Pynecone Website : https://pynecone.io/

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

Pynecone Github : https://github.com/pynecone-io/pynecone

그 외의 설명은 노마드코더님의 영상을 참고.

설치

작동 환경 (2023.01.22 기준)

파이썬 : 3.7 버전 이상
Node.js : 12.22.0 버전 이상

설치

pip를 통해 pynecone-io 를 설치해줍니다.

이를 통해 pynecone 라이브러리가 설치되며
명령 프롬프트에서 쓸 수 있는 pc command line 툴 또한 설치됩니다.

pip install pynecone-io
# 명령 프롬프트 혹은 파이썬 환경에서 설치
# 가상환경을 쓰고 있다면, 해당 가상 환경에서 설치 필요

Pynecone의 구조 둘러보기

예시 - 구현 필요

프로젝트 만들기

- 프로젝트 만들기

프로젝트를 생성하는 단계입니다.
디렉토리와 파일이 생성되므로, Workspace 등 작업 디렉토리에서 실행해주세요.

$ mkdir my_app_name
$ cd my_app_name
$ pc init

# 설명
# my_app_name이라는 폴더를 만들고, 그 폴더로 이동
# 이후 pynecone에 대한 초기작업(initialize)을 진행
# initialize 진행시 해당 디렉토리에 pc 템플릿 파일 등이 생성된다.  

- 프로젝트 디렉토리 둘러보기

위와 같이 프로젝트를 initialize 하면 아래와 같은 디렉토리 구조가 생성된다.

my_app_name
├── .web
├── assets
├── my_app_name
│   ├── __init__.py
│   └── my_app_name.py
└── pcconfig.py

.web : Pynecone에서 작성된 프런트엔드부가 NextJS 앱으로 컴파일된 후, 그 출력물이 저장되는 디렉토리
assets : 본 프로젝트에서 사용하는 다양한 asset들 (이미지, 파일 등)을 저장하는 디렉토리
main project dir (=my_app_name) : 앱을 구축하는 코드 파일이 위치하는 디렉토리
main code file (=my_app_name.py): 앱을 구축하는 코드 파일. 이하 메인 코드 파일이라 칭한다.
pcconfig.py : 앱에 대한 구성이 기록된 코드 파일

코드 작성

- 코드 전체 둘러보기

import pynecone as pc


class State(pc.State):
    count: int = 0

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

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


def index():
    return 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,
        ),
    )


app = pc.App(state=State)
app.add_page(index)
app.compile()

- Pynecone import

import pynecone as pc
# pyncone을 import합니다. 이하 pc로 줄여 부릅니다.

- Class

변수와 메서드를 정의할 수 있는 Class 부입니다.
여기서 변수는 변수라 부르지만, def 로 정의된 함수는 이벤트 핸들러 라고 부른다.

class State(pc.State):
    # State 클래스를 정의하는 부

    count: int = 0
    # State.count 라는 attribution이며, 이는 0이라는 정수 초기값을 갖는다.

    def increment(self):
        self.count += 1
    # State.increment 메서드가 실행될 때마다
    # self(=State).count attribution 가 1씩 증가

    def decrement(self):
        self.count -= 1
    # State.decrement 메서드가 실행될 때마다
    # State.count 가 1씩 감소

- 프런트엔드

프런트엔드를 정의하는 부입니다.
실제 웹 혹은 앱 상에서 보이는 요소들과 그들의 속성을 정의합니다.

def index():
    return pc.hstack(
        # 가로로 쌓이는 것
        pc.button(
        # 첫 번째로 버튼을 만든다.
            "Decrement",
            # 첫 번째 버튼의 이름은 decrement
            color_scheme="red",
            border_radius="1em",
            on_click=State.decrement,
        ),
        # 버튼의 색상은 빨간색, 경계 둥글기는 1em
        # 클릭을 하면 State.decrement 메서드(이벤트 핸들러)가 실행된다. (-1)

        pc.heading(State.count, font_size="2em"),
        # State.count attribution을 표시한다.  
        # font_size = 2em

        pc.button(
            "Increment",
            color_scheme="green",
            border_radius="1em",
            on_click=State.increment,
        ),
        # Increment라는 버튼을 생성하며
        # 버튼의 색상은 녹색, 경계 둥글기는 1em
        # 버튼이 클릭되면 State.increment 메서드가 실행된다. (+1)
    )

- Routing

라우팅 추가 설명 필요

라우팅은 특정 네트워크 내에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다.
컴퓨터 네트워크는 노드라고 하는 여러 시스템과, 이런 노드를 연결하는 경로로 구성되는데,
서로 다른 두 노드 간 통신에서는 여러 경로가 있을 수 있다.
라우팅은 미리 정해진 규칙을 통해 최상의 노드 간 통신이 가능한 경로를 선택하는 프로세스이다.

라우터란 디바이스와 네트워크를 다른 네트워크에 연결하는 네트워킹 디바이스로,
(1) 경로 설정 (2) 데이터 전달 (3) 로드 밸런싱 을 수행한다.
쉽게 말해, 하나의 네트워크와 그 상위의 네트워크를 연결해주는 디바이스이다.

app = pc.App(state=State)
# 앱을 정의하고, 그 내용(= 상태 = State)을 지정합니다.
app.add_page(index)
# 앱에 프런트엔드를 추가합니다.

- Compile

컴파일이란 특정 언어 코드를 다른 언어로 바꾸어주는 것을 말한다.
여기서는 Python으로 작성된 코드를 프런트엔드 언어로 바꾸어주는 단계로 보인다.

컴파일된 프런트엔드 언어는 다시 Hardware를 작동시킬 수 있는
시스템 언어로 컴파일 될 것이다.

app.compile()

Pynecone 실행

작성한 Pynecone 코드를 실행하여, 프런트엔드 구현에 필요한 파일들을 생성합니다.
실행 후에는 브라우저를 통해 localhost:3000 주소 요청을 하여, 작성한 웹페이지를 볼 수 있습니다.

cd my_app_name
pc run

Components

프론트엔드에서 구현할 수 있는 페이지 구성 요소들에 대해 설명합니다.

pc.text()

기본

인수	설명	사용법	옵션
pc.text(‘text’)	텍스트 형태를 출력합니다.	pc.text(‘hello world’)
color=’color’	텍스트의 색상을 지정합니다.	pc.text(‘abcd’, color=’blue’)	white, blue, red …
font_size=’size’	폰트 사이즈를 지정합니다.	pc.text(‘abcd’, font_size=’1.5em’)	size
as_=’style’	텍스트 스타일을 지정합니다. 자세한 사항은 이하에서 설명합니다.	pc.text(‘abcd’, as_=’i’)

as_ style

인수	설명
b	bold, 굵은 글씨
strong	Important text, 강조 글씨
i	italic, 이탤릭체 (기울인 글씨)
em	emphasized text
mark	Marked text, 노란 형광펜
small	작은 텍스트
del	지워진 텍스트. 취소선을 의미
ins	Inserted text, 밑줄 추가
sub	Subscript text, 아래에 붙은 작은 텍스트(지수 혹은 개념 부연설명 등에 사용)
sup	Superscript text, 위에 붙은 작은 텍스트(제곱수 표현 등에 사용)

pc.heading()

인수	설명	사용법	옵션
pc.heading(text, size, color)	헤딩(단락 제목)을 출력합니다.
size=’size’	헤딩 사이즈를 지정합니다.	pc.heading(‘text’, size=’md’)	xs, sm, md, lg, xl, 2xl, 3xl, 4xl

pc.markdown()

|인수|설명|사용법|옵션| |—|—|—|—| |pc.markdown()|마크다운 문법으로 작성한 내용을 출력하는 메서드|pc.markdown(‘# 헤딩1’)||

pc.button()

기본

인수	설명	사용법	옵션
pc.button()	클릭할 수 있는 버튼을 생성합니다. \n 버튼 위에 출력될 텍스트 지정이 가능합니다.	pc.button(‘button’)	text, pc.icon()
bg=’color’	버튼의 색상을 지정합니다.	pc.button(‘button’, bg=’blue’)	white, blue, red …
color=’color’	버튼 위에 출력되는 텍스트의 색상을 지정합니다.	pc.button(‘button’, color=’white’)	white, blue, red …
color_scheme=’color’	????	pc.button(‘button’, color_scheme=’green’)	white, blue, red …
size=’size’	버튼의 크기를 지정합니다.	pc.button(‘button’, size=’sm’)	xs, sm, md, lg
space=’sp’	버튼과 텍스트 사이의 여백을 지정합니다.	pc.button(‘button’, space=’1em’)	size
variant=’shape’	버튼의 특정 형태를 지정합니다.	pc.button(‘button’, variant=’outline’)	outline, ghost, solid, link, unstyled
border_radius=’size’	경계선 둥글기를 지정합니다.	pc.button(‘button’, border_radius=’1em’)	size
is_loading=boolean	버튼 위에 로딩중 표시(동그라미)를 표현합니다.	pc.button(is_loading=True)	True, False
is_active=boolean	버튼 활성화 여부를 지정
is_disabled=boolean	버튼 활성화 여부를 지정합니다.	pc.button(is_disabled=True)	True, False
on_click=meth	버튼 클릭시 일어날 이벤트를 지정합니다. 메서드 등을 넣을 수 있습니다.	pc.button(on_click=ButtonState.decrement)	Methods …
이외 사항은 pynecone_docs 참고

event trigger

인수	설명	사용법	옵션
on_click=meth	버튼 클릭시 일어날 이벤트를 지정합니다. 메서드 등을 넣을 수 있습니다.	pc.button(on_click=ButtonState.decrement)	Methods …
on_mouse_over	버튼 위에 마우스가 위치할 경우
이외 사항은 pynecone_docs 참고

pc.link()

인수	설명	사용법	옵션
pc.link()	지정한 요청 주소로 이동하는 링크 컴포넌트	pc.link(text, href, color…)
‘text’	링크를 alt해 표시할 텍스트를 지정합니다.	pc.link(“it’s hyperlink”)	text
href=’url’	이동할 요청 주소값을 지정합니다.	pc.link(‘naver’, href=’https://naver.com’)	text
color=’color’	텍스트의 색상을 지정합니다.	pc.link(‘naver’, href=’…’, color=’blue’)	white, blue, red …
pc.button()	텍스트 대신 버튼으로 링크 컴포넌트를 보여줍니다.	pc.link(pc.button(‘abc’), href=…, button=True)

pc.table()

인수	설명	사용법	옵션
pc.table_container()	테이블 그룹을 정의한다. pc.table()이 인수로 들어간다.

pc.table()	테이블을 정의한다. pc.table_caption(), pc.tbody() 등이 인수로 들어간다.
color_scheme=color	테이블의 color_scheme을 정의한다.	pc.table(color_scheme=color)	teal, blue, red…
variant=style	테이블의 스타일을 정의한다.	pc.table(variant=’striped’)	striped …
size=size	테이블의 크기를 지정한다.	pc.table(size=’1em’)

pc.table_caption(text)	테이블 제목을 지정한다.
placement=’str’	테이블 캡션의 위치를 지정한다.		top, bottom
pc.thead()	테이블 가장 윗 row(제목행)을 정의한다. pc.tr() 및 pc.th()를 인수로 갖는다.
pc.tbody()	테이블 내용부를 정의한다. pc.tr() 및 pc.th()를 인수로 갖는다.
pc.tfoot()	테이블 가장 하단 row(마무리 행)을 정의한다. pc.tr() 및 pc.th()를 인수로 갖는다.

pc.tr()	테이블의 행을 생성한다. pc.th()를 인수로 갖는다.
pc.th()	테이블의 열을 생성한다. 가장 하위 항목.
bg_color=color	행 혹은 셀의 배경색을 지정한다.		white, blue, red…

예시

import pynecone as pc

columns = ["Name", "Age", "Location"]
data = [
    ["John", 30, "New York"],
    ["Jane", 25, "San Francisco"],
]
footer = ["Footer 1", "Footer 2", "Footer 3"]

def index():
    return pc.table_container(
            pc.table(
                pc.table_caption("Example Table"),
                pc.thead(
                    pc.tr(*[pc.th(column) for column in columns])
                ),
                pc.tbody(
                    *[
                        pc.tr(*[pc.td(item) for item in row])
                        for row in data
                    ]
                ),
                pc.tfoot(pc.tr(*[pc.th(item) for item in footer])),
            )
        )
    
app = pc.App()
app.add_page(index, path = '/')
app.compile()

Data Table

인수	설명	사용법
pc.data_table()	데이터를 불러와 테이블을 만든다.	이하 항목들을 인수로 갖는다.
data=데이터	데이터를 불러온다. thead는 데이터의 열제목을 그대로 사용한다.
pagination=boolean	페이지네이션 여부를 지정한다. True=페이지네이션 함.
search=boolean	검색 기능 추가 여부를 지정한다.
sort=boolean	정렬 여부를 지정한다.
resizable=boolean	열 resizing 여부를 지정한다.

인수	설명	사용법	옵션
on_click	클릭시 수행할 이벤트를 지정한다. 게시물 상세보기 등
on_mouse_over	마우스를 갖다 대었을 때 수행할 이벤트를 지정한다.
이외 사항은 docs 참고

nba_data = pd.read_csv(
    "https://media.geeksforgeeks.org/wp-content/uploads/nba.csv"
)

pc.data_table(
    data=nba_data[["Name", "Height", "Age"]],
    pagination=True,
    search=True,
    sort=True,
)

Reference

Routing : https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9A%B0%ED%8C%85
Routing : https://aws.amazon.com/ko/what-is/routing/
Pynecone Docs : https://pynecone.io/docs/getting-started/introduction

Twitter Facebook LinkedIn

Pynecone 파인콘 ; 파이썬 프레임워크

Jongya