pynecone 예제 소스 구조 파헤쳐보기

pynecone 소스 폴더 구조

이전글에 예제소스를 생성하는 방법을 배웠습니다.

 

2023.02.07 - [Coders tool/pynecone] - Python 기반 혁신적인 Full Stack Framework pynecone 소개

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

바로 아래와 같은 명령어였죠

mkdir my_first_app
cd my_first_app
pc init

위 명령어를 실행하면 샘플소스가 생성되었습니다.

생성된 pynecone 의 예제 소스 폴더의 구조는 아래와 같습니다.

MY_FIRST_APP		# 1. 루트 폴더
├── .web		# 2. 컴파일시 생성되는 web 파일
├── assets		# 3. 이미지등 사용하는 미디어 파일 디렉토리
├── my_first_app	# 4. 메인 app 폴더
│   ├── __init__.py	# 5. 패키지로 인식하게 해주는 파일
│   └── my_first_app.py	# 6. 메인 실행 파일
└── pcconfig.py		# 7. 환경 파일

정말 심플한 구조를 가지고 있다는것을 볼수 있습니다..

하나하나 설명해 드리겠습니다.

 

1. 루트 폴더

우리가 pc init를 사용해서 생성한 프로젝트 폴더 입니다.

중요한것은 프로젝트 폴더명이 곧 앱 이름으로 만들어진다는 것입니다. 

별도로 폴더명 규칙에 대해서 명시한것은 없지만 다른 언어들의 경험상

프로젝트의 폴더명은 의미있는 영문으로 시작해서 작성하는것이 좋습니다. 

 

2. '.web' 폴더

컴파일을 하면 js파일 및 모듈등이 생성되는 폴더입니다.

컴파일하면 프론트엔드는 NextJS 앱형식으로 만들어지고 동일한 이름의 js파일로 저장됩니다.

대부분 자바스크립트 파일로 구성되고 각종 node.js모듈이 전부 저장되어 있습니다.

그리고 위 파일을 수정해봐야 컴파일시 다시 생성되기때문에 수정하는것은 의미가 없습니다.

 

3. assets 폴더

assets폴더는 이미지나 동영상등 정적파일을 저장하는 폴더입니다.

python의 django의 경우 보톤 static이라는 폴더이름을 사용하지만, pynecone 에서는 assets 폴더가 이와 동일한 역활을 하고 있습니다.

여기에 저장된 파일은 아래와 같은 방버으로 사용이 가능합니다.

pc.image(src="buttonImg1.png")

favicon.ico도 해당 폴더에 기본적으로 생성되어 있으니 원하는 favicon 이미지로 변경해 주시면 됩니다.

 

4. my_first_app 폴더

메인 app 들이 있는 폴더 입니다. 해당 폴더 아래에 프로젝트에 필요한 파일을 생성하면 됩니다.

여기에 라우터별로 폴더를 만들고 파일을 생성하거나 하며 됩니다.

 

5. '__init__.py' 파일

'__init__.py' 파일은 해당 디렉토리가 패키지의 일부임을 알수있게 해두는 역활을 한다.

만약 해당 파일이 없으면 패키지로 인식이 되지 않습니다.

하지만 python 3.3 이상 버전에서는 해당 파일이 없어도 패키지로 인식합니다.

그렇지만 하위 호환을 위해서 파일을 생성하는것이 안전한 방법입니다.

6. 'my_first_app.py' 메인 파일

우리가 생성한 app의 매인 앱입니다.

이 파일 하나에만 코드를 추가해도 앱이 완성됩니다.

중요한것은 루트 디렉토리와 이름이 같다는것입니다.

아래와 같이 이전글에 만든 소스하나로 서버가 돌아갑니다.

"""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()

 

7. 'pcconfig.py' 설정 파일

'pcconfig.py' 파일은 프로젝트의 설정파일입니다.

파일의 내용은 다음과 같습니다. 

import pynecone as pc


config = pc.Config(
    app_name="my_first_app",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.DEV,
)

 

제일 윗줄의 "import pynecone as pc" 부분은 모듈을 불러오는 부분입니다.

그리고 config 라는 변수에 환경파일 정보를 넣고 있습니다.

pc.Config 안에 앱이름(app_name), 접속 DB URL (db_url), 실행환경(DEV, PROD)등의 설정을 할수 있습니다.

 

참고로 pc.Config 모듈의 소스는 아래와 같습니다.

"""The Pynecone config."""

from typing import List, Optional

from pynecone import constants
from pynecone.base import Base


class Config(Base):
    """A Pynecone config."""

    # The name of the app.
    app_name: str

    # The username.
    username: Optional[str] = None

    # The frontend port.
    port: str = constants.FRONTEND_PORT

    # The backend API url.
    api_url: str = constants.API_URL

    # The database url.
    db_url: str = constants.DB_URL

    # The redis url.
    redis_url: Optional[str] = None

    # The deploy url.
    deploy_url: Optional[str] = None

    # The environment mode.
    env: constants.Env = constants.Env.DEV

    # The path to the bun executable.
    bun_path: str = constants.BUN_PATH

    # Additional frontend packages to install.
    frontend_packages: List[str] = []

port를 사용해서 서버의 실행 포트도 설정 가능하고

redis, 배포경로 bun 경로 frontend 패키지 리스트 등을 설정 가능합니다.

 

공식 홈페이지의 예제에서는 아래와 같이 bun_path와 실행 port가 추가되어 있습니다.

import pynecone as pc


config = pc.Config(
    app_name="hello",
    bun_path="$HOME/.bun/bin/bun",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.DEV,
    port=3000,
)

Pynecone은 bun을 사용하여 Javascript 라이브러리를 관리합니다. Bun은 ~/.bun/bin/bun에서 pc init를 실행하면 자동으로 설치됩니다. 환경파일에서 다른 경로를 지정하여 설치 할 수 있습니다.

bun은 node나 deno와 같은 js 런타임입니다.

bun에 대해 자세한것을 알고 싶다면 공식 홈페이지에서 확인 바랍니다.(https://bun.sh/)

아래와 같이 node, deno에 비해서 속도가 빠르다고 강조하고 있습니다.

그렇기 때문에 Pynecone에서는 Bun을 사용한다고 합니다.

 

요약 

여기까지 pynecone 소스 폴더 구조에 대해서 설명을 드렸습니다. 

Pynecone에서 얼마나 간단한 구조를 가지려고 노력을 했고 그러면서도 nextjs의 기능을 오류없이 자동적으로 만들어 주는것을 볼수 있었습니다.

그리고 Bun을 통해 속도를 높이려고 노력을 했다는것을 알수 있었습니다.

발전가능성이 높고 편의성이 좋으면서 React 생태계의 많은 컴포넌트들을 쉽게 설치하고 래핑해서 사용가능하기때문에

배워서 사용할만 합니다.

 

다음글에서는 pynecone 의 컴포넌트들에 대해서 알아보도록 하겠습니다.