Zenn
🤠

[Pynecone] Pynecone 시작하기 (Python으로 웹앱 만들기)

2023/04/10に公開
Python
pynecone
tech

Pynecone이란? (그래도 React 종말각은 에바인 것 같아요)

https://www.youtube.com/watch?v=47BL6WLZJ1g&t=1s

특징 (공식 사이트 https://pynecone.io/ 에서 말하는…)

  • Pure Python
    새로운 언어 배울 필요 없어요 파이썬이랑 해당 프레임워크를 사용할 줄만 알면 돼요
  • Easy to Learn
  • Full Flexibility
    확장성 좋아요
  • Batteries Included
    Pynecone 하나로 프론트엔드, 백엔드, 배포 다 할 수 있어요
  • Pynecone : Pure Python으로 interactive web app을 만들 수 있음 (JavaScript, React, NextJS 몰라도 됨)
  • Styling을 위해 Chakra UI를 사용함
  • NextJS app과 FastAPI 서버 간의 모든 통신 처리 가능
  • AI와 같이 파이썬 패키지를 많이 사용하는 경우, FastAPI 백엔드 사용하니 좋을 듯
  • 노마드 코더왈, ReactJS가 아닌 Flutter처럼 느껴져서 좋아
  • 그래도 그냥 JS, React, NextJS 배우자

Let’s Started with Pynecone!

1. Pynecone Installiation

  • Python 3.7버전 이상
  • NodeJS 12.22.0 버전 이상

Untitled

pip를 통해 설치

pip install pynecone-io

2. Create a Project

모든 Pynecone function, class는 pc. 접두사로 시작!

pc init : Initialize a template app in new directory

Untitled 1

Untitled 2

위와 같이 기본 템플릿을 생성해줌

directory structure

MY_FIRST_PYNECONE_APP
├── .web
├── assets
├── my_first_pynecone_app
│   ├── __init__.py
│   └── my_first_pynecone_app.py
└── pcconfig.py

  1. .web
    NextJS 앱으로 컴파일 다운되어서 .web 디렉토리에 저장됨
    해당 디렉토리 손 댈 필요 없지만, 디버깅에 유용함
    각각의 Pynecone 페이지는 .js 파일로 컴파일되어서 .web/pages 디렉터로리에 저장됨

  2. assets
    favicon , 폰트, 이미지 등과 같은 asset들은 저장하는 디렉토리
    assets/image.png 로 image를 해당 디렉토리에 저장하면, 아래와 같이 해당 이미지를 디스프레이할 수 있음.

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

  3. Main Project : {my_first_pynecone_app}/{my_first_pynecone_app.py}
    pc init 하면, 해당 디렉토리 이름과 같은 이름의 app (디렉토리이름.py) 를 생성해줌.

  4. Configuration : **pcconfig.py**
    app에 관한 configuration 관한 파일임.
    아래와 같이 default로 생성됨

    import pynecone as pc

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

3. Run the app

pc run

Untitled 3

http://localhost:3000/

Untitled 4

4. The Structure of a Pynecone App

my_first__pynecone_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"
# State는 모든 variable들 (**vars**)을 정의
class State(pc.State):
    """The app state."""
    pass
# Frontend
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%",
    )
# Routing
# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
# Compiling 
app.compile()

pc.heading() pc.box() pc.link() 과 같은 50개 이상의 built-in components 있음

프론트엔드, 백엔드 모두 해결함.

My first pynecone app

Untitled 5

Reference

Discussion