Pynecone tutorial: Todo앱을 만들어봅시다.

지난 포스팅에서는 터미널에서 pc run을 실행하여 pynecone 프로젝트를 초기화할 때 생성되는
프로젝트의 구조에 대해 간략히 훑어보았습니다.

이번에는 본격적으로 react의 hello world로 불리는(?)
todo앱을 pynecone으로 시작 단계부터 간단히 구현해보겠습니다.

우리가 만들 todo앱은 아래와 같은 모습입니다.

To-do List

아쉽게도 on_key나 on_enter 같은 키보드입력 이벤트는
아직 pynecone에 구현되어 있지 않습니다.
투두리스트에 할 일을 추가할 때 버튼을 클릭하지 않고
엔터키를 누르면 바로 할 일이 추가될 수 있도록 하여
사용자 경험을 개선하고자 하는 제안들이 많이 있고,
개발진에서도 바로 다음 릴리즈에서 추가하겠다고 하니,
빠른 업데이트를 기다려봅니다.
출처 : Input component triggering when hitting enter - Pynecone-Io/Pynecone (codesti.com)

이 앱은 아래와 같이 작동합니다.

1. 할 일을 인풋 컴포넌트 안에 직접 입력합니다.
2. 작성 후 <추가> 버튼을 누르면 할일 목록 맨 하단에 등록됩니다.
3. 완료한 일은 좌측의 파란 테두리 버튼을 누르면 삭제됩니다.

다소 투박하지만 나름 잘 작동하는 투두리스트

코드를 살펴보기 전에
어떤 컴포넌트로 구성되어 있는지 간략히 알아봅시다.

모든 컴포넌트를 담고 있는 pc.container 안에
위에서부터 차례대로
pc.heading(제목),
pc.input(입력칸),
pc.button(추가버튼) 및
할일 리스트가 배치되어 있습니다.

이렇게 컴포넌트들을 세로로 쌓듯이 배치하고 싶을 때는

(눈에 보이지는 않지만) 아래와 같이 pc.vstack 컴포넌트를 사용합니다.

마지막으로 제일 하단의 할일 리스트 부분만 보면
모든 라인이 일정하게 [인덱스] - [버튼] - [텍스트] 순서로 가로로 배치되고 있습니다.

이렇게 컴포넌트를 가로방향으로 배치하려면
pc.hstack을 사용하여 가로로 쌓으면 됩니다.

우리 예제에서는 할 일 목록의 각 행마다 버튼과 텍스트가 hstack으로 배치되겠네요.
아래 코드처럼요.

pc.ordered_list(
    pc.list_item(pc.hstack(pc.button(), pc.text("아침먹고 땡")),
    pc.list_item(pc.hstack(pc.button(), pc.text("점심먹고 땡")),
    pc.list_item(pc.hstack(pc.button(), pc.text("저녁먹고 땡")),
    )

위와 같이 코드를 짜면 아래처럼 구성되어 나타납니다.

참고로 위 레이아웃 중에 왼쪽의 번호 1., 2., 3.은
pc.list_item 때문에 자동으로 붙는 숫자들입니다.
pc.list_item 부분을 제거하면 아래처럼 나타나게 됩니다.

# 이렇게 수정하면
pc.ordered_list(
    pc.hstack(pc.button(), pc.text("아침먹고 땡"),
    pc.hstack(pc.button(), pc.text("점심먹고 땡"),
    pc.hstack(pc.button(), pc.text("저녁먹고 땡"),
    )

혹시 아래와 같은 궁금증도 생길 수 있습니다.

pc.ordered_list가 없어도 될 것 같아요.
어차피 vstack 안에 들어있는 아이템들이니까,
굳이 pc.ordered_list 를 만들어서 그 안에 아이템을 넣지 말고,
그냥 단순히 pc.hstack만 나열해도 되지 않을까요?

틀린 말씀은 아닙니다.
굳이 pc.ordered_list 안에 집어넣지 않아도 레이아웃은 나타나지만,
정렬이 되지 않는다는 문제가 발생합니다.

pc.ordered_list를 빼고
아래처럼 코딩하면

# 이렇게 코딩하면 정렬이 깨짐
    pc.hstack(pc.button(), pc.text("아침먹고 땡"),
    pc.hstack(pc.button(), pc.text("점심먹고 땡"),
    pc.hstack(pc.button(), pc.text("저녁먹고 땡"),
    pc.hstack(pc.button(), pc.text("야식 먹은 후에 땡"),

레이아웃이 아래처럼 되어버립니다.

정렬이 틀어지니까 보기 좋지 않군요.

이런 이유 때문에
동일한 컴포넌트를 나열할 때는
pc.ordered_list를 사용해주는 것이 보기 좋습니다.

레이아웃에 대한 설명은 여기서 마치겠습니다.

그러면 전체 레이아웃 코드는
대략 어떤 구조로 짜여지게 될까요?

아래와 같은 코드로 짜여질 것 같은데, 여러분의 생각도 아래와 같은가요?

pc.container(
    pc.vstack(
        pc.heading("할 일 목록"),
        pc.input(),
        pc.button("추가"),
        pc.ordered_list(
            pc.list_item(pc.hstack(pc.button(), pc.text("아침먹고 땡"))),
            pc.list_item(pc.hstack(pc.button(), pc.text("점심먹고 땡"))),
            pc.list_item(pc.hstack(pc.button(), pc.text("저녁먹고 땡"))),
        ),
    )
)

여기까지 잘 따라오고 계시죠? 여러분의 의식도 저와 같이 흐르고 있으면 좋겠습니다.

 

어때요? 제법 간단하죠?

그럼 본격적으로 Pynecone 프로젝트를 생성하고,
위 코드에 살을 붙여 todo앱을 완성해보겠습니다.

① 파이참을 열고 새 프로젝트(pure python)를 생성합니다. 프로젝트 폴더명은 "todo"로 해줍시다.
② 새 프로젝트가 생성되었으면 터미널을 열고(Alt-F12) pip install pynecone-io를 실행해줍니다.
③ Pynecone 설치가 완료되었으면, pc init을 실행하여 Pynecone 프로젝트를 초기화해줍니다.
④ 모든 준비를 마쳤습니다. 프로젝트폴더/todo/todo.py 파일을 열어서 코드를 작성해봅시다.

참고로 Pynecone 실행을 위해 여러분의 PC에 node.js가 설치되어 있어야 합니다.
설치방법은 여기를 참고하세요.

우선 아래와 같이 위아래로 전체 틀을 만들어줍니다.

import pynecone as pc


class State(pc.State):
    pass


def todo():
    return pc.container(
        pc.vstack(
            pc.heading("할 일 목록"),
            pc.input(),
            pc.button("추가"),
            pc.ordered_list(
                pc.list_item(pc.hstack(pc.button(), pc.text("아침먹고 땡"))),
                pc.list_item(pc.hstack(pc.button(), pc.text("점심먹고 땡"))),
                pc.list_item(pc.hstack(pc.button(), pc.text("저녁먹고 땡"))),
            ),
        ),
    )


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

이렇게 코드를 작성하셨다면,
터미널에서 pc run을 실행하시고,
브라우저를 열어 localhost:3000/todo 로 접속해봅시다.

터미널에서 pc run 실행 후 브라우저 접속(localhost:3000/todo)

주소에 /todo를 추가하기 귀찮으시다면 todo() 함수 이름을 index()로 바꾸고
코드 아랫쪽에도 app.add_page(index)로 수정하면
localhost:3000 으로 접속할 때 바로 todo 앱이 나타나게 됩니다.

url을 수정하는 다른 방법으로
add_page 메서드의 path 파라미터를 활용할 수도 있습니다.
이는 다른 튜토리얼에서 소개해드리겠습니다.

시작이 반입니다.

아직 컴포넌트 하나하나에 스타일이 전혀 매겨지지 않은 민낯이라서 조금 털털해 보입니다.
원하는 컴포넌트들이 모두 만들어져 있는 것은 확인했습니다.
(스타일은 마지막에 추가하겠습니다.)

 

이제 백엔드 로직을 작성해봅시다.

어떤 로직이 추가되어야 할지 화면을 보면서 곰곰이 생각해봅시다.

기본로직은 대략 이 정도로 처리하면 될 것 같아요.

추가하고 싶은 별도의 기능이나 로직이 있으면 댓글로 알려주세요.
나중에 포스팅을 수정하거나 보완할 때 참고하겠습니다.

 

그럼 로직을 추가하는 과정은 다음 포스팅에서 이어서 설명드리겠습니다!

---

다음 포스팅 : Todo앱의 로직파트 작성하기

Pynecone tutorial: Todo앱의 로직파트 작성하기

 

---

국내 유일의 파이썬+한컴오피스 자동화 입문강의

움짤로 빠르게 배우는 파이썬-아래아한글 자동화 레시피 - 인프런 | 강의