우연히 보게된 노마드 코더(Nomad Coders)의 유튜브.

파이썬 코드만가지고 JS, React, NextJS 인터랙티브 웹앱을 만들어주는 프레임워크가 나타났단다.

 

 

최근 정말 많은 주목을 받고 있는 오픈소스 프로젝트인 것은 분명한 것 같다.

 

https://pynecone.io/

 

Pynecone: The easiest way to build web apps.

Completely customizable. All Pynecone components are fully customizable. Change the colors, fonts, and styles to match your project. Styling guide ->

pynecone.io

 

발음이 같은 'pinecone'을 상징하는 솔방울을 로고로 사용하고 있다 ^^

 

공식 웹사이트도 Pynecone을 사용해서 만들었다고 한다.

왠지 Unix is Not Unix 같은 느낌인데!? 아닌가?! ^^

 

 

Pynecone은 파이썬으로 작성한 코드를

React/NextJS로 컴파일을 하는 방식이기에 성능이 뛰어나며 그래서 node를 필요로 하고 있다.

 

보다 더 나은 성능을 위해 node를 bun으로 교체하는 작업을 하고 있지만

아직 100% 호환성을 보장하지 못하기에 당분간은 node를 계속 필요로 할 것이라고 한다.

 

 

서두가 길었다.

이제 직접 한 번 사용해보자.

 

 

이하 과정은 다음 링크의 내용을 따라갔다.

- https://pynecone.io/docs/getting-started/installation

 

 

0. PoC Environment

  - 이하 과정을 진행한 환경은 Ubuntu 20.04 64bit Desktop 이다.

 

 

2. Prerequisites

  - Python 3.7+

  - NodeJS 12.22.0+

 

  ① Python 여러 버전을 관리할 수 있는 pyenv 기반으로 설치해보자.

    . https://www.whatwant.com/entry/pyenv

    . 설치한 버전은 다음과 같이 했다.

      - v3.8.16

 

  ② node 설치도 여러 버전을 관리할 수 있는 nvm 기반으로 설치를 진행해보자.

    . https://www.whatwant.com/entry/npm

    . 설치한 버전은 다음과 같이 했다.

      - v18.15.0   (Latest LTS: Hydrogen)

 

 

3. Virtual Environment

  - Optional 이라지만, 사실 필수이지 않을까 싶다.

❯ cd ./workdir

❯ python -m venv .venv

source .venv/bin/activate

 

 

4. Installing

  - 이제 pynecone 설치하면 된다!

 pip install pynecone

 

 

5. Create a Project

  - 일단 프로젝트 생성하는 방법부터 알아보자.

 mkdir my_app_name

 cd my_app_name

 pc init

 

 

6. Run the App

  - 일단 한 번 띄워보자.

 pc run

 

  - 브라우저로 확인해보자.

 

 

 

7. Edit

  - 본문을 살짝 살펴보자.

❯ nano my_app_name/my_app_name.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"


class State(pc.State):
    """The app state."""

    pass


def index() -> pc.Component:
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to WHATWANT!", 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%",
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

 

  - 포트도 변경하고, debug log도 찍어보자.

❯ pc run --port 8282 --loglevel debug

 

  - http://localhost:8282/

 

 

8. Fast Refresh

  - Pynecone은 실시간으로 변경 사항이 반영된다.

  - 웹브라우저가 띄워져 있는 상황에서, 다른 터미널로 파일을 수정해보자.

❯ nano my_app_name/my_app_name.py

 

  - 파일을 수정한 뒤, 저장을 하면 조금 있다가 브라우저에 자동으로 페이지 내용이 변경된다.

 

 

 

일단 여기까지 살짝 맛만 봤고

시간이 나면 다음 단계로 넘어가보겠다. (시간이 날까?! ^^)

 

반응형



Flutter 공식 사이트는 아래와 같다.

   - https://flutter.dev/



친절하게도 한글 사이트도 있다. 비교적 고퀄리티의 한글 번역이다!!!

   - https://flutter-ko.dev/



구글링으로 선배님(?)들이 먼저 설치해본 결과를 찾아서 따라하려다가

직접 공식 사이트에 있는 설치 방법을 따라해보기로 마음먹었다.





Flutter는 Windows/macOS/Linux 환경을 모두 지원한다.



습관처럼 Linux 환경에서 설치하는 것으로 하려다가

이번에는 그냥 한 번 Windows 환경에서 설치해보기로 마음을 바꿨다.


이유는... 없다. 그냥...



1. System requirements


   - 뭐 당연히 Windows 7 SP1 이상이어야 하고  설치할 하드 공간도 400MB 이상 필요하고... 뭐, 블라블라...


   ① PowerShell 5.0 이상


      - Windows10 사용하고, 최신 업데이트를 했다고 하면 당연히 맞출 수 있는 조건일텐데...

      - 버전 확인은 아래와 같이 할 수 있다.



     - 시작 메뉴를 통해 "powershell"을 찾아서 실행한 뒤에



     - "$PSVersionTable" 명령어를 실행하면 위와 같이 version을 확인할 수 있다.


   ② Git


     - Git도 미리 설치해놓아야 한다고 한다.


     - 아래 사이트를 통해 Git for WIndows 패키지를 설치하면 된다.

        . https://git-scm.com/



     - Git Bash 실행해서 "git --version"으로 확인해보자.




2. Install Flutter SDK


   - Flutter SDK를 다운로드 받아서 설치하면 되는데... 이왕이면 Git을 이용해서 해보겠다.



   - 위 내용을 보면 알겠지만... 보통 Application을 설치하는 "C:\Program Files\" 경로는 사용하지 말란다.



   - "C:\src" 디렉토리를 만든 다음에

   - "git clone https://github.com/flutter/flutter.git -b stable" 명령어를 이용해 Flutter SDK를 받아오면 된다.




3. Set Path


   - flutter를 막 실행하기 위해 PATH를 설정해보자



   - '시스템 속성'에서 '환경 변수' 부분을 찾으면 된다.

   - '환경 변수'에서 '시스템 변수'에 있는 'Path'를 찾아서 편집을 누르면...



   - 방금 설치(? 다운로드?)한 flutter의 bin 디렉토리를 추가해주면 된다.



   - Git Bash를 종료한 뒤에 다시 실행하고, "flutter --version"을 실행해보자.


   - 뭔가 오류처럼 나오는건 git bash 에서 실행해서 그렇다.




   - PowerShell에서 실행을 하면 갑자기 뭔가를 설치하고선 version 정보를 보여준다.




4. Doctor


   - flutter를 실행하기 위한 환경이 잘 갖춰져 있는지 검사를 해주는 기능이 있다.



   - "flutter doctor"를 실행하면 검사를 하게 되는데... 이런... Android Studio가 결국은 필요하다.



5. Android Studio


   - 아래 사이트에 접속해서 Download 및 설치를 진행하자

      . https://developer.android.com/studio/index.html



   - 설치 잘하고 나면 열심히 환경 설정을 해줘야 한다.



   - Configure의 "SDK Manager"를 선택하자


   - "SDK Tools" 탭 선택 후 오른쪽 하단에 있는 "Hide ..." 체크를 해제하면 나오는 "Android SDK Tools (Obsolete)"를 설치하자



   - 나중에 스마트폰 연결을 위해 "Google USB Driver"로 설치하자.


   - 스마트폰에서는 "Developer options"와 "USB debugging"을 열어줘야 한다.

      . Note8 에서는 설정-휴대전화 정보-소프트웨어 정보-빌드 번호 (7번 이상 연타) -> 개발자 모드

      . Note8 에서는 설정-개발자 옵션 -> USB Debugging On



6. Emulator


   - 에뮬레이터를 실행하기 위한 환경 설정을 해보자.



   - Configure에서 "AVD Manager"를 선택하자.



   - 가상 디바이스를 생성하는 것이다.



   - 원하는 디바이스를 고르면 된다



   - 가상 디바이스에 설치할 Android 버전을 골라서 Download 해주면 된다.


   - 그런데, 오른쪽에 Intel HAXM이 설치 안되었다고 나오는데... 필자는 AMD이다보니 설치에 애를 먹어서...


   - 그냥 드럽고 치사해서 실제 Device 물려서 테스트하기로 했다 !!!




7. Plugin


   - Android Studio에서 Flutter를 원활하게 사용하기 위해서는 그에 맞는 plugin을 설치해야 한다.



   - Plugins 메뉴를 통해서 설치할 수 있다.



   - flutter로 검색하면 바로 나온다. 설치하자.


   - 설치가 끝나면 IDE를 재시작할거냐고 물어본다. 그에 응하자~





8. Test App


   - 잘 되는지 한 번 해보자.



   - 위 화면의 두번째 항목을 선택하자 "Start a new Flutter project"



   - Flutter Application 으로 만들어보자.



   - 두번째 항목인 Flutter SDK Path는 앞에서 설치한 아이의 경로로 잡아주면 된다.


   - 아니면 새로운 경로로 설치를 해도 된다.



   - 개인적으로 뭐가 뭔지 아직은 잘 모르겠어서... 그냥 무조건 Go! Go!



   - 스마트폰을 연결하면 위와 같이 Target으로 등장하고, Run 시키면 빌드해서 폰에 앱 설치 후 실행까지 짠~ 하고 된다.




   - "+" 버튼을 누르면 숫자가 올라간다~





간단한 줄 알았는데... 뭔가 한 참 진행을 해야했지만, 스마트폰에 뭔가 짠~하고 뜨니 기분은 좋다~!!


반응형

+ Recent posts