파인콘(pynecone)
참고 레퍼런스:
https://pynecone.io/docs/library/layout/foreach
https://martinii.fun/398
설치: pip install pynecone-io (bun 실행 환경 리눅스 O, 윈도우 X)
choco install nodejs
설치 참고: https://employeecoding.tistory.com/390
프로젝트 초기화: pc init
프로젝트 실행: pc run
파이썬 배경지식
> 변수 타입
- 종류: str, int, float, dic, list ..
> 변수 지정 방법
foo: str = ""
foo2: int = 0
Optional[str] = None
List[str] = []
...
> python lambda 익명함수
: 함수의 이름을 지정하지 않고 '간편'하게 함수를 생성하기 위해 람다표현식을 사용한다
lambda x: x + 10 → def test(x):
return x+10
> 리스트 컴프리헨션
: 파인콘 배경지식
> 웹 개발 시 구분해야할 3요소
1) 데이터: 변수 지정 및 변수(state) 값 변경 메서드 모음
예) class State(pc.State):
item = [1,2,3,4]
new_item = ""
def add_item(self):
self.item += [self.new_item] ← 파인콘 리스트 원소 추가 방법(주의사항)으로 인해 append, remove 메서드 사용불가
2) 로직: 계산, 화면에 렌더링할 데이터 가공 구간
예) def render_item(item):
3) 인터페이스: 보여지는 부분의 컨테이너, 레이아웃 등 설계 구간
예) def index():
return pc.containter()..
> pc.foreach
: pc.vstack( 이곳(=매개변수) 안에 for문이 들어가지 못하므로.. pc.foreach 컴포넌트로 반복문을 실행할 수 있다.
사용법:
1) 배열과 함수 둘다 받는 경우 : pc.foreach(배열, 실행할 함수)
2) 배열만 받는 경우: pc.foreach(배열)
> 파인콘 리스트 원소 추가 방법
: list 원소 추가시 append, remove 등의 메서드를 사용하지 말아야 함.(이유는 프로세스, 이벤트 발생시 화면 렌더링을 진행해야 하므로)
올바른 예) a = [1,2,3]
a += [4]
a = [1,2,3,4]
부적절한 예) a = [1,2,3]
a.append(4)
a = [1,2,3,4]
> (경험상) 이벤트 on_change, on_click, on_blue 등 Event triggers 에서 "lambda" 를 쓰는 경우와 안쓰는 경우
: 확실한건 아니나, on_click 등 이벤트 트리거를 사용할 경우 메소드 내 매개변수가 포함되는 경우 lambda 를 써야함.
쓰는 경우: on_click = lambda: test.test_method(매개변수)
안쓰는 경우: on_click = test.method2
> CSS
스타일 인수: "lg", "sm", "md", "xl", "2xl", "inner"
border_radius : 각진 모서리 둥글게
margin: 박스 바깥 쪽 공간 늘리기
padding: 박스 안쪽 공간
border: 테두리 선
height: 높이, 납작하게
웹 디렉토리 구조(Project Structure)
pc init 명령어 수행 시 아래와 같은 구조로 생성됨.
※ 구조
project_name ← 프로젝트 생성명(＊ 프로젝트 명에 '숫자' 넣지 않기)
.web ← compile된 js 파일 및 NodeJS 모듈이 여기에 저장됨
assets ← 웹 애플리케이션에 사용되는 Static 파일(예, favicon.ico)
{project_name}
__init__.py
{project_name}.py
pcconfig.py ← The pcconfig.py file contains configuration for your app.
컨테이너
> 컨테이너 스택
수평 pc.hstack
pc.hstack(
pc.button("감소", on_click=State.decrement),
pc.text("0"),
pc.button("증가, on_click=State.increment),
)
수직 pc.vstack
pc.vstack(pc.heading("1"), pc.input("placed holder...."))
> 컨테이너 정렬
실습 1
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.center(
pc.hstack(
pc.button("감소", on_click=State.decrement),
pc.text(State.count),
pc.button("증가", on_click=State.increment),
)
)
↑↑↑↑↑ index 함수 스타일링 추가시(color_schema, border_radius, padding 추가)
class State(pc.state):
...
...
...
def index():
return pc.center(
pc.hstack(
pc.button("감소", on_click=State.decrement, color_schema="red", border_radius="1em"),
pc.text(State.count),
pc.button("증가", on_click=State.increment, color_schema="green", border_radius="1em"),
), padding="50px"
)
실습 2
To-do list App
ver.1
import pynecone as pc
def index():
return pc.container(
pc.text("할 일 목록"),
pc.input(),
pc.button(),
pc.ordered_list(
pc.list_item()
pc.list_item()
pc.list_item()
)
)
app = pc.App(state=State)
app.add_page(index)
app.compile()
ver.2
import pynecone as pc
def index():
return pc.container(
pc.text("할 일 목록"),
pc.input(),
pc.button(),
pc.ordered_list(
pc.list_item(
pc.hstack(pc.button(), pc.text("1"),
)
pc.list_item(
pc.hstack(pc.button(), pc.text("2"),
)
pc.list_item(
pc.hstack(pc.button(), pc.text("3"),
)
)
)
app = pc.App(state=State)
app.add_page(index)
app.compile()
ver.3
class State(pc.state):
items = [
"1",
"2",
"3",
]
new_item = ""
def add_item(self):
self.items += [self.new_item]
def finish_item(self, item):
self.items = [i for i in self.items if i != item]
def render_item(item):
return pc.list_item(
pc.hstack(
pc.button(on_click=lambda: State.finish_item(item)),
pc.text(item)
)
)
def index():
return pc.container(
pc.vstack(
pc.heading("할 일 목록"),
pc.input(on_blur= State.set_new_item),
pc.button(
"추가",
on_click = State.add_item
),
pc.ordered_list(
pc.foreach(State.items, lambda item: render_item(item)),
),
)
)
