3. 레이어 구상하기 / Pynecone 으로 내 홈페이지 만들기

https://hsol.tistory.com/993

1. 프로젝트 세팅 / Pynecone 으로 내 홈페이지 만들기

프로젝트 세팅 시 기본으로 만들어주는 프로젝트 구조는 다음과 같다.

 

- 프론트엔드 렌더링을 위한 .web 폴더

- static 파일들을 저장하는 assets 폴더

- 백엔드 서버제공을 위한 소스 폴더

- pynecone 설정을 위한 pcconfig.py

 

 

 

 

실제 프로젝트를 위해서는 여러가지로 보완할 필요가 있다.

우선 Pynecone 에서 직접 제공하는 example 저장소들을 살펴보도록 하자

 

https://github.com/pynecone-io/pynecone-examples

GitHub - pynecone-io/pynecone-examples: A repository full of Pynecone example apps.

 

이 저장소에서 소개해주는 예시들은 대부분 서버에서 어떻게 데이터를 끌어다가 프론트에 보여줄 것인지,

Socket 을 통한 실시간 백엔드-프론트엔드 통신이 어떻게 사용되는지 보여주기 위한 예시들이라고 할 수 있다.

 

실제로 구동하고 있는 모습을 보고 싶다면 아래 링크를 참고하면 된다.

https://pynecone.io/docs/gallery

 

따라서 프로젝트 구조보다는 기능구현에 대한 예시가 대부분인데, 여기서 내가 참고할만한 프로젝트가 딱 하나 있었다.

https://github.com/pynecone-io/pynecone-examples/tree/main/crm/crm

GitHub - pynecone-io/pynecone-examples: A repository full of Pynecone example apps.

CRM 을 Pynecone 으로 구현하는 예시인데, 여기서 얻을 수 있는 것은

assets 과 app 으로 분리된 폴더 중 app 안에서 pages 와 components 로 뷰 레이어와 컴포넌트를 분리해놓았으며, state 에는 페이지 내에서 다뤄지는 상태와 실제 적재되는 데이터 모델을 분리해놓은 모습이다.

 

모던 프론트엔드 프레임워크를 사용한 프로젝트의 레이어를 구분할때와 비슷한 모습이다.

https://github.com/pynecone-io/pcweb

GitHub - pynecone-io/pcweb: A public repo of the pynecone.io website.

이외에도 실제로 pynecone.io 의 공개저장소를 통해 실제 운영되는 페이지의 구조를 엿볼 수도 있었다.

위와 같은 공식 저장소들의 레퍼런스를 참고해보았으니 이제 내 홈페이지의 레이어를 정할 차례가 되었다.

 

우선 components 와 pages, state 의 레이어의 구분을 그대로 가져왔다. 다만 state 를 복수형으로 한 것은 통일성을 위해서이다.

utils 를 두게 된 것은 백엔드 로직을 구성하는 도중에 필요한 기능들 중 도메인 요소가 전혀 존재하지 않는 레벨의 유틸성 코드들을 모아놓기 위해서이다.

위 예시에서 보았던 것과 다르게 나는 models 를 state 와 분리했다.

코드를 작성하다보니 이 두가지는 섞이게 하면 안되겠다는 판단이 들게 되었던게, DB i/o 에 큰 영향을 받는 model 을 state 와 같이 자주 변경이 일어나는 곳에 사용할 경우 속도도 느려지고 트래픽도 지나치게 증가한다. 거꾸로 영속성을 가지지 못하고 페이지가 새로고침되면 제거되는 state 에 유저 데이터 또는 콘텐츠를 저장하는 것도 안된다.

 

이렇게 확실히 차이점이 있고 혼용되면 혼란스러울 위험이 있는 레이어를 섞어서 배치하면 안되겠다는 생각에 분리하게 되었다.

 

constants 는 그냥 말 그대로 상수 모음

styles 가 pynecone 이 다른 python 프로젝트들과 다르게 가져가게 되는 새로운 개념이라고 생각되는데,

dict attr 로 표현된 모듈화된 스타일들을 이 레이어에 모아놓기로했다.

# dict 로 표현된 스타일 모듈화의 예시
def background_darken(percent: float):
    return dict(
        background_color=f"rgba(0, 0, 0, {percent / 100})",
        background_blend_mode="darken",
    )

 

신선한 개념인 만큼 정립되어있지 않아 초기에 레이어를 구상하는데에 생각보다 시간이 많이 쓰였다.

이게 잘못 잡고 진행했다가는 자칫 꼬이기 쉽상이라 신중했던 것 같다.

 

레이어도 잡았으니 이제 내용을 채워넣을 시간이다.