Pynecone이 Reflex로 브랜드를 변경했습니다. 

해당 사이트로 들어가보니 기존 Pynecone 프로젝트를 Reflex로 Migration하는 가이드가 있어서 적용했습니다.

 

1. pip로 reflex 설치

pip install reflex

설치후 기존 설치되었던 라이브러리와 비교해봅니다.

기존 Pynecone pip list reflex 설치후 pip list
pn@ed2cb8e6e508:/reflex/biz_board$ pip list
Package            Version
------------------ ----------
anyio              3.6.2
async-timeout      4.0.2
bidict             0.22.1
certifi            2022.12.7
charset-normalizer 3.0.1
click              8.1.3
cloudpickle        2.2.1
commonmark         0.9.1
distlib            0.3.6
fastapi            0.88.0
filelock           3.9.0
greenlet           2.0.2
gunicorn           20.1.0
h11                0.14.0
httpcore           0.16.3
httpx              0.23.3
idna               3.4
numpy              1.24.1
packaging          23.1
pandas             1.5.3
pip                23.2
pipenv             2022.12.19
platformdirs       2.6.2
plotly             5.13.0
psutil             5.9.4
pydantic           1.10.2
Pygments           2.14.0
PyMySQL            1.0.2
pynecone           0.1.29
python-dateutil    2.8.2
python-engineio    4.4.1
python-multipart   0.0.5
python-socketio    5.8.0
pytz               2022.7.1
redis              4.4.2
requests           2.28.2
rfc3986            1.5.0
rich               12.6.0
setuptools         65.5.1
six                1.16.0
sniffio            1.3.0
SQLAlchemy         1.4.41
sqlalchemy2-stubs  0.0.2a32
sqlmodel           0.0.8
starlette          0.22.0
tenacity           8.1.0
typer              0.4.2
typing_extensions  4.4.0
urllib3            1.26.14
uvicorn            0.20.0
virtualenv         20.17.1
virtualenv-clone   0.5.7
watchdog           2.3.1
websockets         10.4
wheel              0.38.4
pn@ed2cb8e6e508:/reflex/biz_board$
pn@ed2cb8e6e508:/reflex/biz_board$ pip list
Package            Version
------------------ ----------
alembic            1.11.1
anyio              3.6.2
async-timeout      4.0.2
bidict             0.22.1
certifi            2022.12.7
charset-normalizer 3.0.1
click              8.1.3
cloudpickle        2.2.1
commonmark         0.9.1
distlib            0.3.6
fastapi            0.96.1 <- 0.88.0
filelock           3.9.0
greenlet           2.0.2
gunicorn           20.1.0
h11                0.14.0
httpcore           0.16.3
httpx              0.24.1 <- 0.23.3
idna               3.4
Jinja2             3.1.2
Mako               1.2.4
markdown-it-py     3.0.0
MarkupSafe         2.1.3
mdurl              0.1.2
numpy              1.24.1
packaging          23.1
pandas             1.5.3
pip                23.2
pipenv             2022.12.19
platformdirs       2.6.2
plotly             5.13.0
psutil             5.9.4
pydantic           1.10.2
Pygments           2.14.0
PyMySQL            1.0.2
pynecone           0.1.29
python-dateutil    2.8.2
python-dotenv      0.13.0
python-engineio    4.4.1
python-multipart   0.0.5
python-socketio    5.8.0
pytz               2022.7.1
redis              4.4.2
reflex             0.2.1
requests           2.28.2
rfc3986            1.5.0
rich               13.4.2
setuptools         65.5.1
six                1.16.0
sniffio            1.3.0
SQLAlchemy         1.4.41
sqlalchemy2-stubs  0.0.2a32
sqlmodel           0.0.8
starlette          0.27.0
starlette-admin    0.9.0
tenacity           8.1.0
typer              0.4.2
typing_extensions  4.4.0
urllib3            1.26.14
uvicorn            0.20.0
virtualenv         20.17.1
virtualenv-clone   0.5.7
watchdog           2.3.1
watchfiles         0.19.0
websockets         10.4
wheel              0.38.4
pn@ed2cb8e6e508:/reflex/biz_board$

2. 기존 프로젝트에서 reflex init

pn@ed2cb8e6e508:/reflex/biz_board$ reflex init
────────────────────────────── Initializing biz_board ──────────────────────────────
[14:08:05] Initializing the web directory.                              console.py:30
Pynecone project detected. Automatically upgrade to Reflex? [y/n]: y
Renaming pcconfig.py to rxconfig.py
[14:08:16] Finished Initializing: biz_board                             console.py:30
pn@ed2cb8e6e508:/reflex/biz_board$

reflex init를 수행하면 해당 프로젝트의 모든 소스 파일들에서 참조하는 'import pynecone as pc' 가  'import reflex as rx'로 자동 변환됩니다. 

 

또한 pcconfig.py 파일이 위치하는 경로에  reflex init 파일이 자동으로 생성됩니다.

import reflex as rx

config = rx.Config(
    app_name="biz_board",
    api_url="http://서비스IP:8000",
    db_url="sqlite:///reflex.db",
    env=rx.Env.DEV,
)

 

3. 사용중인 pynecone.db 를 reflex db init

기존 pynecone.db 파일을 reflex.db 파일로 이름을 변경합니다. 그다음 reflex db init를 수행하면 새로운 reflex.db로 초기화를 해줍니다.

pn@ed2cb8e6e508:/reflex/biz_board$ reflex db init
──────────────────── [ State(rx.State) ] ────────────────────────
──────────────────── [ AuthState(State) ] ───────────────────────
──────────────────── [ ServiceState(State) ] ────────────────────
[biz_sqldata] get_biz_monitor_svc service_list len: 35
──────────────────── [ ServerState(State) ] ─────────────────────

[biz_servers] get_server_data(blank,)
Compiling:  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% 4/4 0:00:00
  Creating directory '/reflex/biz_board/alembic' ...  done
  Creating directory '/reflex/biz_board/alembic/versions' ...  done
  Generating /reflex/biz_board/alembic/README ...  done
  Generating /reflex/biz_board/alembic/script.py.mako ...  done
  Generating /reflex/biz_board/alembic.ini ...  done
  Generating /reflex/biz_board/alembic/env.py ...  done
  Please edit configuration/connection/logging settings in '/reflex/biz_board/alembic.ini' before proceeding.
pn@ed2cb8e6e508:/reflex/biz_board$

 

이후 구동하면 기존과 동일하게 구동됩니다.

 

이후에는 reflex로 추가되는 작업을 올려야겠습니다.

시리즈 목록

윈도우(windows) WSL Ubuntu에 virtualenv 설치 및 vscode 연동
윈도우(windows) WSL Ubuntu에 pyenv 설치
윈도우(windows) WSL Ubuntu에 도커(Docker) 설치
윈도우(windows) WSL에 Ubuntu 20.04 LTS 추가 설치
윈도우(windows) WSL 명령어
윈도우(windows) WSL 설치 및 Ubuntu 구동

 

virtualenv 설치 

apt를 이용한 설치

sudo apt install python3-virtualenv

gabriel@NB-15052600:~$ sudo apt install python3-virtualenv
[sudo] password for gabriel:
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
The following additional packages will be installed:
  javascript-common libjs-jquery libjs-sphinxdoc libjs-underscore libpython3-dev libpython3.10-dev
  python3-dev python3-distlib python3-distutils python3-filelock python3-lib2to3 python3-pip python3-pip-whl
  python3-platformdirs python3-setuptools python3-setuptools-whl python3-wheel python3-wheel-whl
  python3.10-dev
Suggested packages:
  apache2 | lighttpd | httpd python-setuptools-doc python2-pip-whl python2-setuptools-whl
The following NEW packages will be installed:
  javascript-common libjs-jquery libjs-sphinxdoc libjs-underscore libpython3-dev libpython3.10-dev
  python3-dev python3-distlib python3-distutils python3-filelock python3-lib2to3 python3-pip python3-pip-whl
  python3-platformdirs python3-setuptools python3-setuptools-whl python3-virtualenv python3-wheel
  python3-wheel-whl python3.10-dev
0 upgraded, 20 newly installed, 0 to remove and 0 not upgraded.
Need to get 10.6 MB of archives.
After this operation, 37.7 MB of additional disk space will be used.
Do you want to continue? [Y/n] Y
Get:1 http://archive.ubuntu.com/ubuntu jammy/main amd64 javascript-common all 11+nmu1 [5936 B]
Get:2 http://archive.ubuntu.com/ubuntu jammy/main amd64 libjs-jquery all 3.6.0+dfsg+~3.5.13-1 [321 kB]
Get:3 http://archive.ubuntu.com/ubuntu jammy/main amd64 libjs-underscore all 1.13.2~dfsg-2 [118 kB]
Get:4 http://archive.ubuntu.com/ubuntu jammy/main amd64 libjs-sphinxdoc all 4.3.2-1 [139 kB]
Get:5 http://archive.ubuntu.com/ubuntu jammy-updates/main amd64 libpython3.10-dev amd64 3.10.6-1~22.04.2ubuntuPreparing to unpack .../19-python3-virtualenv_20.13.0+ds-2_all.deb ...
Unpacking python3-virtualenv (20.13.0+ds-2) ...
Setting up javascript-common (11+nmu1) ...
Setting up python3-setuptools-whl (59.6.0-1.2ubuntu0.22.04.1) ...
Setting up python3-filelock (3.6.0-1) ...
Setting up python3-pip-whl (22.0.2+dfsg-1ubuntu0.2) ...
Setting up python3-distlib (0.3.4-1) ...
Setting up python3-platformdirs (2.5.1-1) ...
Setting up libpython3.10-dev:amd64 (3.10.6-1~22.04.2ubuntu1) ...
Setting up python3.10-dev (3.10.6-1~22.04.2ubuntu1) ...
Setting up libjs-jquery (3.6.0+dfsg+~3.5.13-1) ...
Setting up python3-lib2to3 (3.10.6-1~22.04) ...
Setting up python3-wheel-whl (0.37.1-2ubuntu0.22.04.1) ...
Setting up libjs-underscore (1.13.2~dfsg-2) ...
Setting up python3-distutils (3.10.6-1~22.04) ...
Setting up libpython3-dev:amd64 (3.10.6-1~22.04) ...
Setting up python3-setuptools (59.6.0-1.2ubuntu0.22.04.1) ...
Setting up python3-wheel (0.37.1-2ubuntu0.22.04.1) ...
Setting up python3-pip (22.0.2+dfsg-1ubuntu0.2) ...
Setting up libjs-sphinxdoc (4.3.2-1) ...
Setting up python3-virtualenv (20.13.0+ds-2) ...
Setting up python3-dev (3.10.6-1~22.04) ...
Processing triggers for man-db (2.10.2-1) ...
gabriel@NB-15052600:~$

 

설치된 버전 확인

gabriel@NB-15052600:~$ virtualenv --version
virtualenv 20.23.0 from /home/gabriel/.local/lib/python3.11/site-packages/virtualenv/__init__.py
gabriel@NB-15052600:~$

 

pip를통해서 virtualenv를 설치 

pip 로 설치했는데 virtualenv가 실행안되서 위의 apt로 추가로 설치했어요.

gabriel@NB-15052600:~$ python -m pip install --user virtualenv
Collecting virtualenv
  Downloading virtualenv-20.23.0-py3-none-any.whl (3.3 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3.3/3.3 MB 9.7 MB/s eta 0:00:00
Collecting distlib<1,>=0.3.6
  Downloading distlib-0.3.6-py2.py3-none-any.whl (468 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 468.5/468.5 kB 9.1 MB/s eta 0:00:00
Collecting filelock<4,>=3.11
  Downloading filelock-3.12.0-py3-none-any.whl (10 kB)
Collecting platformdirs<4,>=3.2
  Downloading platformdirs-3.5.1-py3-none-any.whl (15 kB)
Installing collected packages: distlib, platformdirs, filelock, virtualenv
  WARNING: The script virtualenv is installed in '/home/gabriel/.local/bin' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.
Successfully installed distlib-0.3.6 filelock-3.12.0 platformdirs-3.5.1 virtualenv-20.23.0

[notice] A new release of pip available: 22.3.1 -> 23.1.2
[notice] To update, run: pip install --upgrade pip
gabriel@NB-15052600:~$

 

virtualenv  가상환경 생성

virtualenv <환경이름> --python=<파이썬버전>

$ virtualenv auto --python=python3.11

 

virtualenv <환경이름> --python=<파이썬 설치경로>

$ virtualenv auto --python=/home/gabriel/.pyenv/shims/python

gabriel@NB-15052600:~/virtualenv$ virtualenv auto --python=python3.11
created virtual environment CPython3.11.3.final.0-64 in 650ms
  creator CPython3Posix(dest=/home/gabriel/virtualenv/auto, clear=False, no_vcs_ignore=False, global=False)
  seeder FromAppData(download=False, pip=bundle, setuptools=bundle, wheel=bundle, via=copy, app_data_dir=/home/gabriel/.local/share/virtualenv)
    added seed packages: pip==22.0.2, setuptools==59.6.0, wheel==0.37.1
  activators BashActivator,CShellActivator,FishActivator,NushellActivator,PowerShellActivator,PythonActivator
gabriel@NB-15052600:~/virtualenv$

 

source ./auto/bin/activate

gabriel@NB-15052600:~/virtualenv$ ll
total 12
drwxr-xr-x 3 gabriel gabriel 4096 May 19 12:46 ./
drwxr-x--- 6 gabriel gabriel 4096 May 19 12:39 ../
drwxr-xr-x 4 gabriel gabriel 4096 May 19 12:46 auto/
gabriel@NB-15052600:~/virtualenv$ cd auto/
gabriel@NB-15052600:~/virtualenv/auto$ ll
total 24
drwxr-xr-x 4 gabriel gabriel 4096 May 19 12:46 ./
drwxr-xr-x 3 gabriel gabriel 4096 May 19 12:46 ../
-rw-r--r-- 1 gabriel gabriel   40 May 19 12:46 .gitignore
drwxr-xr-x 2 gabriel gabriel 4096 May 19 12:46 bin/
drwxr-xr-x 3 gabriel gabriel 4096 May 19 12:46 lib/
-rw-r--r-- 1 gabriel gabriel  337 May 19 12:46 pyvenv.cfg
gabriel@NB-15052600:~/virtualenv/auto$ source ./bin/activate
(auto) gabriel@NB-15052600:~/virtualenv/auto$ python -V
Python 3.11.3
(auto) gabriel@NB-15052600:~/virtualenv/auto$ which python
/home/gabriel/virtualenv/autogpt/bin/python
(auto) gabriel@NB-15052600:~/virtualenv/auto$
(auto) gabriel@NB-15052600:~/virtualenv/auto$ pip list
Package    Version
---------- -------
pip        22.0.2
setuptools 59.6.0
wheel      0.37.1
(auto) gabriel@NB-15052600:~/virtualenv/auto$ pwd
/home/gabriel/virtualenv/auto
(auto) gabriel@NB-15052600:~/virtualenv/auto$ deactivate
gabriel@NB-15052600:~/virtualenv/auto$

 

Visual Studio Code 설치 및 WSL 연동

 

vscode에서 Remote Explorer에 Default 를 WSL Target > Ubuntu 로 default distro를 지정한다. (기존 아마 docker)

 

Ubuntu 명령창에서 code . 실행해서 VS Code 뜨는지 확인

 

만일 에러가 아래와 같이 발생하면 참조

https://github.com/microsoft/vscode/issues/148913

 

VS Code Server for WSL closed unexpectedly · Issue #148913 · microsoft/vscode

[2022-05-06 14:14:46.048] WSL Daemon exited with code 0 [2022-05-06 14:14:45.086] Resolving wsl+Ubuntu-20.04, resolveAttempt: 1 [2022-05-06 14:14:45.227] Starting VS Code Server inside WSL (wsl2) [...

github.com

 

Terminal > New Terminal

 

 

시리즈 목록

윈도우(windows) WSL Ubuntu에 virtualenv 설치 및 vscode 연동
윈도우(windows) WSL Ubuntu에 pyenv 설치
윈도우(windows) WSL Ubuntu에 도커(Docker) 설치
윈도우(windows) WSL에 Ubuntu 20.04 LTS 추가 설치
윈도우(windows) WSL 명령어
윈도우(windows) WSL 설치 및 Ubuntu 구동

 

Ubuntu 22.04 LTS에는 python3가 설치되어있다. pip, venv는 설치되어 있지 않음

gabriel@NB-15052600:~$ python -V
Command 'python' not found, did you mean:
  command 'python3' from deb python3
  command 'python' from deb python-is-python3
gabriel@NB-15052600:~$ python3 -V
Python 3.10.6
gabriel@NB-15052600:~$ python3 -m pip
/usr/bin/python3: No module named pip
gabriel@NB-15052600:~$

 

1.pyenv 설치

 

참고 https://github.com/pyenv/pyenv

git clone https://github.com/pyenv/pyenv.git ~/.pyenv
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(pyenv init -)"' >> ~/.bashrc

 

 

gabriel@NB-15052600:~$ pyenv install 3.11.3
Downloading Python-3.11.3.tar.xz...
-> https://www.python.org/ftp/python/3.11.3/Python-3.11.3.tar.xz
Installing Python-3.11.3...

BUILD FAILED (Ubuntu 22.04 using python-build 2.3.17-10-g920ef145)

Inspect or clean up the working tree at /tmp/python-build.20230515214905.2289
Results logged to /tmp/python-build.20230515214905.2289.log

Last 10 log lines:
checking for pkg-config... no
checking for --enable-universalsdk... no
checking for --with-universal-archs... no
checking MACHDEP... "linux"
checking for gcc... no
checking for cc... no
checking for cl.exe... no
configure: error: in `/tmp/python-build.20230515214905.2289/Python-3.11.3':
configure: error: no acceptable C compiler found in $PATH
See `config.log' for more details
gabriel@NB-15052600:~$

설치 에러가 발생할경우 apt 업데이트를 수행한다.

sudo apt update
sudo apt install \
    build-essential \
    curl \
    libbz2-dev \
    libffi-dev \
    liblzma-dev \
    libncursesw5-dev \
    libreadline-dev \
    libsqlite3-dev \
    libssl-dev \
    libxml2-dev \
    libxmlsec1-dev \
    llvm \
    make \
    tk-dev \
    wget \
    xz-utils \
    zlib1g-dev

 

gabriel@NB-15052600:~$ pyenv install 3.11.3
Downloading Python-3.11.3.tar.xz...
-> https://www.python.org/ftp/python/3.11.3/Python-3.11.3.tar.xz
Installing Python-3.11.3...
Installed Python-3.11.3 to /home/gabriel/.pyenv/versions/3.11.3
gabriel@NB-15052600:~$

 

원하는 버전 지정

 

pyenv local 3.11.3  <어플리케이션별로 파이썬 버전을 설정하는데 사용>

pyenv global 3.11.3 <전역 파이썬 버전을 설정>

gabriel@NB-15052600:~$ pyenv --versions
pyenv: no such command `--versions'
gabriel@NB-15052600:~$ pyenv versions
* system (set by /home/gabriel/.pyenv/version)
  3.11.3
gabriel@NB-15052600:~$ pyenv local 3.11.3
gabriel@NB-15052600:~$ pyenv versions
  system
* 3.11.3 (set by /home/gabriel/.python-version)
gabriel@NB-15052600:~$
gabriel@NB-15052600:~$ python -V
Python 3.11.3
gabriel@NB-15052600:~$

 

 

파이썬 버전이 제도로 적용도었는지 확인

gabriel@NB-15052600:~$ pyenv which python
/home/gabriel/.pyenv/versions/3.11.3/bin/python
gabriel@NB-15052600:~$

 

 

시리즈 목록

윈도우(windows) WSL Ubuntu에 virtualenv 설치 및 vscode 연동
윈도우(windows) WSL Ubuntu에 pyenv 설치
윈도우(windows) WSL Ubuntu에 도커(Docker) 설치
윈도우(windows) WSL에 Ubuntu 20.04 LTS 추가 설치
윈도우(windows) WSL 명령어
윈도우(windows) WSL 설치 및 Ubuntu 구동

 

WSL 설치 및 Ubuntu 최신(2023.05 기준 22.04) 설치는 아래 링크 참조

 

윈도우(windows) WSL 설치 및 Ubuntu 구동

개발 환경구성에서는 Windows 10/11 PC에서 Linux 서브 운영체제로 Ubuntu를 사용해서 Docker 및 Python 개발환경을 구성하도록 합니다. - 서브운영체제를 위한 WSL 설치 - WSL에 Ubuntu 구동 - Docker Desktop 대신 Ub

amnesia.tistory.com

 

1.Update APT Repository 업데이트

sudo apt update

Ubuntu 설치에서 업데이트 까지 완료되었다면, 모든 패키가 업데이트 되었다고 표시됩니다.

gabriel@NB-15052600:~$ sudo apt update
[sudo] password for gabriel:
Get:1 http://security.ubuntu.com/ubuntu jammy-security InRelease [110 kB]
Hit:2 http://archive.ubuntu.com/ubuntu jammy InRelease
Get:3 http://archive.ubuntu.com/ubuntu jammy-updates InRelease [119 kB]
Get:4 http://archive.ubuntu.com/ubuntu jammy-backports InRelease [108 kB]
Fetched 337 kB in 9s (38.6 kB/s)
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
All packages are up to date.
gabriel@NB-15052600:~$

 

2. Docker 설치

아래 명령을 사용하여 Docker를 설치합니다. 이때 '-y' 옵션은 필요한 패키지를 자동으로 설치할수 있는 권한을 부여합니다.

sudo apt install docker.io -y

 

 

3. 새로운 User (docker)를 생성

Docker 설치후 아래 명령을 이용해서 "docker"라는 이름으로 새로운 사용자 그룹(User Group)을 만들어 줍니다.

sudo usermod -aG docker $USER

4. 설치된 Docker Version 확인

설치 확인을 위해서 WSL Ubuntu에  docker 버전을 확인합니다.

docker --version

Docker 버전 20.10.21 이 설치된것을 확인 할 수 있습니다.

 

5. 관리자권한의 PowerShell에서 WSL을 Shutdown 

관리자권한의 powershell에서 wsl을 shutdown 합니다.

 

wsl --shutdown

 

6. Linux Ubuntu에서 Docker 예제 구동

Ubuntu 새로 구동후 설치된 Docker 확인

 

docker run -p 8081:80 -d nginx

 

gabriel@NB-15052600:~$ docker run -p 8081:80 -d nginx
Unable to find image 'nginx:latest' locally
latest: Pulling from library/nginx
9e3ea8720c6d: Pull complete
bf36b6466679: Pull complete
15a97cf85bb8: Pull complete
9c2d6be5a61d: Pull complete
6b7e4a5c7c7a: Pull complete
8db4caa19df8: Pull complete
Digest: sha256:480868e8c8c797794257e2abd88d0f9a8809b2fe956cbfbc05dcc0bca1f7cd43
Status: Downloaded newer image for nginx:latest
df8ddfad5a2c5585a0918098e98c3deda0cf57b9816691b7f4b6612bbb8ee7f6
gabriel@NB-15052600:~$ docker ps
CONTAINER ID   IMAGE     COMMAND                  CREATED          STATUS         PORTS
            NAMES
df8ddfad5a2c   nginx     "/docker-entrypoint.…"   11 seconds ago   Up 9 seconds   0.0.0.0:8081->80/tcp, :::8081->80/tcp   pensive_ishizaka
gabriel@NB-15052600:~$

 

http://localhost:8081/

 

잘구동 되었네요...

 

docker-compose 수동설치

https://github.com/docker/compose/releases/

gabriel@NB-15052600:~$ sudo chmod -R 777 /usr/local/bin
gabriel@NB-15052600:~$ curl -SL https://github.com/docker/compose/releases/download/v2.17.3/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
100 51.9M  100 51.9M    0     0  9236k      0  0:00:05  0:00:05 --:--:-- 10.9M
gabriel@NB-15052600:~$ sudo chmod +x /usr/local/bin/docker-compose
gabriel@NB-15052600:~$ docker-compose --version
Docker Compose version v2.17.3
gabriel@NB-15052600:~$
gabriel@NB-15052600:~$
gabriel@NB-15052600:~$

 

docker-compose 설치 버전확인

 

 

 

시리즈 목록

윈도우(windows) WSL Ubuntu에 virtualenv 설치 및 vscode 연동
윈도우(windows) WSL Ubuntu에 pyenv 설치
윈도우(windows) WSL Ubuntu에 도커(Docker) 설치
윈도우(windows) WSL에 Ubuntu 20.04 LTS 추가 설치
윈도우(windows) WSL 명령어
윈도우(windows) WSL 설치 및 Ubuntu 구동

목록확인

PS C:\Users\gabriel> wsl --list --online
다음은 설치할 수 있는 유효한 배포판 목록입니다.
'wsl.exe --install <Distro>'를 사용하여 설치합니다.

NAME                                   FRIENDLY NAME
Ubuntu                                 Ubuntu
Debian                                 Debian GNU/Linux
kali-linux                             Kali Linux Rolling
Ubuntu-18.04                           Ubuntu 18.04 LTS
Ubuntu-20.04                           Ubuntu 20.04 LTS
Ubuntu-22.04                           Ubuntu 22.04 LTS
OracleLinux_7_9                        Oracle Linux 7.9
OracleLinux_8_7                        Oracle Linux 8.7
OracleLinux_9_1                        Oracle Linux 9.1
SUSE-Linux-Enterprise-Server-15-SP4    SUSE Linux Enterprise Server 15 SP4
openSUSE-Leap-15.4                     openSUSE Leap 15.4
openSUSE-Tumbleweed                    openSUSE Tumbleweed
PS C:\Users\gabriel>

 

설치

PS C:\Users\gabriel> wsl --install -d Ubuntu-20.04
설치 중: Ubuntu 20.04 LTS
Ubuntu 20.04 LTS이(가) 설치되었습니다.
Ubuntu 20.04 LTS을(를) 시작하는 중...
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: gabriel
New password:
Retype new password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 20.04.3 LTS (GNU/Linux 4.4.0-19041-Microsoft x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Mon May 15 19:06:59 KST 2023

  System load:    0.52      Users logged in:        0
  Usage of /home: unknown   IPv4 address for eth1:  172.23.64.1
  Memory usage:   47%       IPv4 address for eth2:  172.28.0.1
  Swap usage:     0%        IPv4 address for wifi0: 192.168.0.20
  Processes:      8

1 update can be applied immediately.
To see these additional updates run: apt list --upgradable


The list of available updates is more than a week old.
To check for new updates run: sudo apt update


This message is shown once a day. To disable it please create the
/home/gabriel/.hushlogin file.
gabriel@NB-15052600:~$

 

버전확인

cat /etc/lsb-release

gabriel@NB-15052600:~$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Ubuntu 20.04.3 LTS"
gabriel@NB-15052600:~$

 

 

시리즈 목록

윈도우(windows) WSL Ubuntu에 virtualenv 설치 및 vscode 연동
윈도우(windows) WSL Ubuntu에 pyenv 설치
윈도우(windows) WSL Ubuntu에 도커(Docker) 설치
윈도우(windows) WSL에 Ubuntu 20.04 LTS 추가 설치
윈도우(windows) WSL 명령어
윈도우(windows) WSL 설치 및 Ubuntu 구동

 

설치가능한 배포판 확인

PS C:\Users\gabriel> wsl --list --online
다음은 설치할 수 있는 유효한 배포판 목록입니다.
'wsl.exe --install <Distro>'를 사용하여 설치합니다.

NAME                                   FRIENDLY NAME
Ubuntu                                 Ubuntu
Debian                                 Debian GNU/Linux
kali-linux                             Kali Linux Rolling
Ubuntu-18.04                           Ubuntu 18.04 LTS
Ubuntu-20.04                           Ubuntu 20.04 LTS
Ubuntu-22.04                           Ubuntu 22.04 LTS
OracleLinux_7_9                        Oracle Linux 7.9
OracleLinux_8_7                        Oracle Linux 8.7
OracleLinux_9_1                        Oracle Linux 9.1
SUSE-Linux-Enterprise-Server-15-SP4    SUSE Linux Enterprise Server 15 SP4
openSUSE-Leap-15.4                     openSUSE Leap 15.4
openSUSE-Tumbleweed                    openSUSE Tumbleweed
PS C:\Users\gabriel>

 

특정 배포판 설치

wsl --install -d Ubuntu-20.04

 

설치된 Linux 확인

PS C:\Users\gabriel> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu          Stopped         2
  Ubuntu-20.04    Stopped         1

 

WSL 2로 전환

PS C:\Users\gabriel> wsl --set-version Ubuntu-20.04 2
WSL 2와의 주요 차이점에 대한 자세한 내용은 https://aka.ms/wsl2를 참조하세요

변환이 진행 중입니다. 이 작업은 몇 분 정도 걸릴 수 있습니다.
작업을 완료했습니다.
PS C:\Users\gabriel> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu          Stopped         2
  Ubuntu-20.04    Stopped         2
PS C:\Users\gabriel>

 

특정 배포를 기본으로 사용하고자 할경우

wsl --set-default <배포판이름>  or wsl -s <배포판이름>

PS C:\Users\gabriel> wsl --set-default Ubuntu-20.04
작업을 완료했습니다.
PS C:\Users\gabriel> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-20.04    Stopped         2
  Ubuntu          Stopped         2
PS C:\Users\gabriel>

 

WSL 업데이트

PS C:\Users\gabriel> wsl --update
설치 중: Linux용 Windows 하위 시스템
Linux용 Windows 하위 시스템이(가) 설치되었습니다.
PS C:\Users\gabriel>

 

WSL 상태확인

PS C:\Users\gabriel> wsl --status
기본 배포: Ubuntu
기본 버전: 2
PS C:\Users\gabriel>

 

실행중인 Linux 배포판 Shutdown

PS C:\Users\gabriel> wsl --shutdown
PS C:\Users\gabriel>

 

Linux 등록취소/제거

wsl --unregister <배포판 이름>

PS C:\Users\gabriel> wsl --unregister Ubuntu-20.04
등록 취소 중입니다.
작업을 완료했습니다.
PS C:\Users\gabriel> wsl -l -v
  NAME      STATE           VERSION
* Ubuntu    Stopped         2
PS C:\Users\gabriel>

등록취소후 실행하고자 할때

삭제후 터미털(관리자모드)로 새로 실행후 배포목록을 확인하면 없어진것 확인가능

개발 환경구성에서는 Windows 10/11 PC에서 Linux 서브 운영체제로 Ubuntu를 사용해서 Docker 및 Python 개발환경을 구성하도록 합니다.

 

- 서브운영체제를 위한 WSL 설치

- WSL에 Ubuntu 구동

- Docker Desktop 대신 Ubuntu에 Docker 및 Docker Compose 설치

- Python 개발 및 가상환경을 위해 pyenv, virtualenv 설치 및 구성

- 등등..

 

시리즈 목록

윈도우(windows) WSL Ubuntu에 virtualenv 설치 및 vscode 연동
윈도우(windows) WSL Ubuntu에 pyenv 설치
윈도우(windows) WSL Ubuntu에 도커(Docker) 설치
윈도우(windows) WSL에 Ubuntu 20.04 LTS 추가 설치
윈도우(windows) WSL 명령어
윈도우(windows) WSL 설치 및 Ubuntu 구동

 

내 윈도우 PC의 버전을 확인

 

 

windows terminal 설치

 

Windows 11에는 기본으로 설치되어 있습니다.(설치전이면 "다운로드", 설치되어 있어서 "열기")

다운로드 완료

 

관리자 권한으로 Terminal 열기

WSL 설치

 

1. Windows 10에서 설치시 "Linux용 Windows 하위 시스템", "가상 머신 플랫폼" 체크해서 활성화

 

첫 번째 방법 - 윈도우 기능 켜기/끄기

 

appwiz.cpl 입력 > Windows 기능 켜기/끄기 선택 >  "Linux용 Windows 하위 시스템", "가상 머신 플랫폼" 체크해서 활성화

 

두 번째 방법 - 명령행으로 실행 (해당 옵션으로 설치했음)

 

DISM(배포 이미지 서비스 및 관리) 명령어로 Microsoft-Windows-Subsystem-Linux 기능을 활성화

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

PS C:\Users\gabriel> dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

배포 이미지 서비스 및 관리 도구
버전: 10.0.19041.844

이미지 버전: 10.0.19045.2728

기능을 사용하도록 설정하는 중
[==========================100.0%==========================]
작업을 완료했습니다.
PS C:\Users\gabriel>

dism 명령어로 VirtualMachinePlatform 기능을 활성화

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

PS C:\Users\gabriel> dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

배포 이미지 서비스 및 관리 도구
버전: 10.0.19041.844

이미지 버전: 10.0.19045.2728

기능을 사용하도록 설정하는 중
[==========================100.0%==========================]
작업을 완료했습니다.
PS C:\Users\gabriel>

윈도우 재부팅

 

x64 머신용 최신 WSL2 Linux 커널 업데이트 패키지 (필수)

https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

 

 

기본적으로 사용할 WSL 버전을 2로 변경

wsl --set-default-version 2

PS C:\Users\gabriel> wsl --set-default-version 2
WSL 2와의 주요 차이점에 대한 자세한 내용은 https://aka.ms/wsl2를 참조하세요
작업을 완료했습니다.
PS C:\Users\gabriel>

 

wsl 버전확인

PS C:\Users\gabriel> wsl --update
업데이트 확인 중입니다.
Linux용 Windows 하위 시스템 최신 버전이 이미 설치되어 있습니다.
PS C:\Users\gabriel> wsl --version
WSL 버전: 1.2.5.0
커널 버전: 5.15.90.1
WSLg 버전: 1.0.51
MSRDC 버전: 1.2.3770
Direct3D 버전: 1.608.2-61064218
DXCore 버전: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows 버전: 10.0.19045.2728
PS C:\Users\gabriel>

 

Ubuntu 최신 배포판 설치

Windows 10 버전 2004 이상(빌드 19041 이상) 또는 Windows 11 인경우 아래 명령으로 기본 Ubuntu 최신 (22.02.4) 설치가능

wsl --install

만일 해당 명령으로 설치가 안될경우 아래 두가지 방법으로 수동으로 설치합니다.

첫번째 Microsoft Store에서 ubuntu 설치 (해당 옵션으로 설치했음)

 

 

"열기"를 누르면 자동으로 설치 prompt가 실행되며, 사용자 id, passwd를 입력합니다.

설치가 완료되면 exit

 

관리자 권한으로 터미널 실행

두번째, wsl install을 이용해서 Ubuntu 설치

설치가능한 목록 확인

PS C:\Users\gabriel> wsl --list --online
다음은 설치할 수 있는 유효한 배포 목록입니다.
'wsl --install -d <배포>'를 사용하여 설치하세요.

NAME                                   FRIENDLY NAME
Ubuntu                                 Ubuntu
Debian                                 Debian GNU/Linux
kali-linux                             Kali Linux Rolling
Ubuntu-18.04                           Ubuntu 18.04 LTS
Ubuntu-20.04                           Ubuntu 20.04 LTS
Ubuntu-22.04                           Ubuntu 22.04 LTS
OracleLinux_7_9                        Oracle Linux 7.9
OracleLinux_8_7                        Oracle Linux 8.7
OracleLinux_9_1                        Oracle Linux 9.1
SUSE-Linux-Enterprise-Server-15-SP4    SUSE Linux Enterprise Server 15 SP4
openSUSE-Leap-15.4                     openSUSE Leap 15.4
openSUSE-Tumbleweed                    openSUSE Tumbleweed
PS C:\Users\gabriel>

 

wsl --install -d Ubuntu

PS C:\Users\gabriel> wsl --install -d Ubuntu

ubuntu 설치 prompt가 자동으로 실행, 이때 명시적으로 Ubuntu 버전을 지정하지 않으면 "Ubuntu 22.04 LTS" 가 설치됨.

 

아이디 패스워드 입력

설치된 ubuntu 확인

 

앞단계 WSL 설치후에 "wsl --set-default-version 2" 로 버전을 지정해준후 ubuntu를 설치했기 때문에 VERSION 2로 설치되었지만, 만일 VERSION이 1 이라면 아래 명령으로 2로 바꿔 주도록 합니다.

wsl --set-version Ubuntu 2

 

새로 터미널을 열고 선택박스에서  Ubuntu 를 선택하여 실행 합니다.

설치된 ubuntu의 버전 확인 : cat /etc/lsb-release

설치후 Ubuntu 업데이트 및 업그레이드 

gabriel@NB-15052600:~$ sudo apt update && sudo apt upgrade
[sudo] password for gabriel: <패스워드 입력>
Hit:1 http://archive.ubuntu.com/ubuntu jammy InRelease
Get:2 http://security.ubuntu.com/ubuntu jammy-security InRelease [110 kB]
Get:3 http://archive.ubuntu.com/ubuntu jammy-updates InRelease [119 kB]
Get:4 http://security.ubuntu.com/ubuntu jammy-security/main amd64 Packages [363 kB]
Get:5 http://archive.ubuntu.com/ubuntu jammy-backports InRelease [108 kB]
Get:6 http://security.ubuntu.com/ubuntu jammy-security/main Translation-en [108 kB]
Get:7 http://security.ubuntu.com/ubuntu jammy-security/main amd64 c-n-f Metadata [9732 B]
Get:8 http://security.ubuntu.com/ubuntu jammy-security/restricted amd64 Packages [225 kB]
Get:9 http://archive.ubuntu.com/ubuntu jammy/universe amd64 Packages [14.1 MB]

생략....

Preparing to unpack .../libkrb5-3_1.19.2-2ubuntu0.2_amd64.deb ...
Unpacking libkrb5-3:amd64 (1.19.2-2ubuntu0.2) over (1.19.2-2ubuntu0.1) ...
Setting up libkrb5-3:amd64 (1.19.2-2ubuntu0.2) ...
(Reading database ... 24137 files and directories currently installed.)
Preparing to unpack .../libgssapi-krb5-2_1.19.2-2ubuntu0.2_amd64.deb ...
Unpacking libgssapi-krb5-2:amd64 (1.19.2-2ubuntu0.2) over (1.19.2-2ubuntu0.1) ...
Setting up libgssapi-krb5-2:amd64 (1.19.2-2ubuntu0.2) ...
(Reading database ... 24137 files and directories currently installed.)
Preparing to unpack .../distro-info-data_0.52ubuntu0.4_all.deb ...
Unpacking distro-info-data (0.52ubuntu0.4) over (0.52ubuntu0.3) ...
Setting up distro-info-data (0.52ubuntu0.4) ...
Processing triggers for libc-bin (2.35-0ubuntu3.1) ...
gabriel@NB-15052600:~$

 

Ubuntu 22.04.2가 최신으로 설치됨

 

 

 

프로젝트 명(폴더) : demo_board

# 파일 경로 설명 구분
1 pcconfig.py    
2 demo_board > demo_board.py    
3 demo_board > demo_state.py logincheck 함수 및 로그인 체크 시간 var 추가  
4 demo_board > demo_auth.py    
5 demo_board > demo_servers.py pc.cond 에 logincheck var로 로그인상태 체크 수정
6 demo_board > demo_helpers.py    

 

로그인 후 타임아웃시간을 지정해서 사용자가 일정시간동안 액션이 없다면 로그아웃시키는 기능을 추가합니다

별도의 세션을 체크하는 방법을 찾지 못해서 State에 login check var를 추가하고 로그인할때, 매뉴클릭시 각 화면의 권한 체크하는 pc.cond 로 login check var를 호출하도록 구현하도록 하겠습니다.

 

demo_state.py


날짜 변환 로컬 함수를 먼저 정의합니다.

from datetime import date, datetime, timezone, timedelta

# logincheck에서 사용할 함수 현재 시간을 리턴
def get_ymd_hms():
	# 클라우드 서버가 싱가폴 데이터 센터에 있기때문에 UTC=8로 한국시간과 맞춘다.
    servertime = timezone(timedelta(hours=8)) 
    now = datetime.now(servertime) 
    now_ymd = now.strftime('%Y%m%d')
    now_ymd_hms = now.strftime('%Y-%m-%d %H:%M:%S')
    #print("now_ymd_hms : {}".format(now_ymd_hms))
    
    return now_ymd_hms

# 문자열의 시간을 시간타입으로 변환
def get_strptime(ymd_hms):
    datetime_format = '%Y-%m-%d %H:%M:%S'

    datetime_ymd_hms = datetime.strptime(ymd_hms, datetime_format)
    
    return datetime_ymd_hms

 

logincheck var 추가

class State(pc.State):
    """The base state for the app."""
    
    username: str
    logged_in: bool = False # 로그인 상태 True, False
    authrole: str
    logged_ymd_hms:str #로그인 및 마지막 액션 시간을 저장

    @pc.var
    def logincheck(self) -> bool:
        """Logged in check a user."""
        
        # 현재 시간을 '%Y-%m-%d %H:%M:%S' 포켓으로 가져오기
        now_ymd_hms = get_ymd_hms()
        
        # 현재 로그인 상태이면
        if self.logged_in:
            
            # 로그인 상태이고, 로그인 시간이 기록되어 있으면
            if len(self.logged_ymd_hms) > 0:

				# 이전 로그인 또는 액션의 시간을 조회
                before_time = get_strptime(self.logged_ymd_hms)
                now_time = get_strptime(now_ymd_hms)

				# 현재 시간과 이전 시간의 차이를 계산
                cul_time = now_time - before_time
                
                # 차이가 지정된 시간보다 크다면 로그인 상태 False로
                if cul_time.seconds > 3600: #600 : 10 Minutes
                    self.logged_in = False
                    self.logged_ymd_hms = ""
                    return self.logged_in

            # 지정된 시간안에 있으면, 현재 시간을 logged_ymd_hms에 저장
            self.logged_ymd_hms = now_ymd_hms
        
        return self.logged_in

 

demo_servers.py


demo_servers.py 의 servers 함수에서 pc.cond에서 로그인 상태 체크를 logged_in 에서 logincheck var 로 변경한다.

 

def servers():
    """The Servers page."""
    return pc.center(
        pc.vstack(
            navbar(State, ServerState.app_name),
            pc.cond(
                State.logincheck,
                pc.box(
                    pc.vstack(
                        searchbar(ServerState),
                        progress_modal(ServerState),
                        render_table(ServerState),
                        #render_datatable(ServerState),
                        footer_bottom(),
                    ),
                    width="100%",
                    border_width="0px",
                ),
                pc.link(
                    pc.button("먼저 로그인 하세요"),
                    href="/",
                    color="rgb(107,99,246)",
                    button=True,
                )
            ),
            padding_top="10em",
            width="100%",
        ),
    )

 

 

추가로 로그인후 액션없이 오래 떠있던 웹페이지에서 검색 버튼 클릭시 log in 상태를 체크할수 있도록 방어코드를 추가합니다.

(로그아웃 상태로 CircularProgress가 작동되지 않도록)

 

demo_servers.py

class ServerState(State):
    """The state for the Server page."""
    print("──────────────────── [ ServerState(State) ] ─────────────────────")
    app_name: str = "Server & Apps"
    
    
    생략 ...
    
    # 1. Progress 를 보여줄지 말지 결정할 Toggle 이벤트
    prog_show: bool = False
    def prog_show_change(self):
        """Toggle the Update Progress modal."""
        
        # 우선 로그인 상태를 체크해서 CircularProgress 모달이 뜨지 않도록 합니다.
        if self.logged_in == False:
            return
            
        self.prog_show = not (self.prog_show)
        
    생략 ...
        
    def get_data_list(self):
        #print("\n[ServerState] get_data_list")
        pd_result_list: List[Dict] = get_server_data(self.select1_id, self.select2_id)
        self.table_columns = list(pd_result_list.columns)
        self.table_data = pd_result_list.values.tolist()
        #print("[ServerState] get_data_list pd_result_list len : {}\n".format(len(pd_result_list)))

        # 2. 기존 "검색" 버튼 클릭시 데이터 조회하는 Class 함수에 
        # Progress 컨포넌트 상태 변경 이벤트를 호출
        return self.prog_show_change()

 

아래 그림처럼 login 체크 시간을 보이도록 설정할수도 있습니다. (Optional demo_helpers.py 수정)

AskUp을 처음 채널에 추가하지마자, 다른거 안해보고 첫질문을 OpenAI랑 바로 비교해보고싶어서 동일한 유형의 질문을 해봤습니다.

 

둘다 내가 Alibaba Cloud를 사용하고있다고 얘기했는데 CloudWatch(AWS)를 얘기하네요...음.

 

답변들은 비슷한 내용들이지만, AskUp은 대화형이기때문에 질문의 의도와 질문자의 이전 Sentense를 잘 파악해서 다음대화로 이어갈려는 자연스러움이 좋네요. 혼자 이런저런 질문하며 놀아도 괜찮을거같습니다.

 

참고

ADPS - Alternative Deposit Payment System


Askup

 


OpenAI 

프로젝트 명(폴더) : demo_board

# 파일 경로 설명 구분
1 pcconfig.py    
2 demo_board > demo_board.py    
3 demo_board > demo_state.py    
4 demo_board > demo_auth.py    
5 demo_board > demo_servers.py 조회조건 선택후 "검색" 시 Progress 보여주기 수정
6 demo_board > demo_helpers.py    

 

기존 검색 버튼의 on_click 이벤트에 다중 이벤트로 Progress 를 붙여서 데이터 조회중이라는 상태를 표시하도록 한다.

 

필요한 컴포넌트 

Modal (https://pynecone.io/docs/library/overlay/modal)

 

1. Modal 컴포넌트를 생성

여기서는 Circlar Progress를 사용했습니다. 새로 함수 추가

def progress_modal(ServerState):
    """Display for an progress circle."""
    return pc.modal(
        pc.modal_overlay(
            pc.modal_content(
                pc.modal_header("Your service request is being processed."),
                pc.modal_body(
                    pc.center(
                        pc.circular_progress(is_indeterminate=True),
                    ),
                ),
                align="center",
            ),
        ),
        is_open=ServerState.prog_show,
    )

 

2. 생성한 Modal을 메인 UI 함수에 추가

progress_modal(ServerState)를 추가합니다.

def servers():
    """The Servers page."""
    return pc.center(
        pc.vstack(
            navbar(State, ServerState.app_name),
            pc.cond(
                State.logged_in,
                pc.box(
                    pc.vstack(
                        searchbar(ServerState),
                        progress_modal(ServerState),
                        render_table(ServerState),
                        #render_datatable(ServerState),
                        footer_bottom(),
                    ),
                    width="100%",
                    border_width="0px",
                ),
                pc.link(
                    pc.button("먼저 로그인 하세요"),
                    href="/",
                    color="rgb(107,99,246)",
                    button=True,
                )
            ),
            padding_top="10em",
            width="100%",
        ),
    )

 

 

3. Modal 컴포넌트 이벤트 함수 등록

1번, 2번 코드를 기존 코드에 추가합니다.

class ServerState(State):
    """The state for the Server page."""
    print("──────────────────── [ ServerState(State) ] ─────────────────────")
    app_name: str = "Server & Apps"
    
    
    생략 ...
    
    # 1. Progress 를 보여줄지 말지 결정할 Toggle 이벤트
    prog_show: bool = False
    def prog_show_change(self):
        """Toggle the Update Progress modal."""
        self.prog_show = not (self.prog_show)
        
    생략 ...
        
    def get_data_list(self):
        #print("\n[ServerState] get_data_list")
        pd_result_list: List[Dict] = get_server_data(self.select1_id, self.select2_id)
        self.table_columns = list(pd_result_list.columns)
        self.table_data = pd_result_list.values.tolist()
        #print("[ServerState] get_data_list pd_result_list len : {}\n".format(len(pd_result_list)))

        # 2. 기존 "검색" 버튼 클릭시 데이터 조회하는 Class 함수에 
        # Progress 컨포넌트 상태 변경 이벤트를 호출
        return self.prog_show_change()

 

4. "검색" 버튼의 on_cllick 이벤트에 Progress를 띄우도록 다중 이벤트 등록

on_click=[ServerState.prog_show_change,ServerState.get_data_list]

먼저 prog_show_change 이벤트로 Progress Modal을 띄우고 get_data_list로 데이터 조회를 합니다.

def searchbar(ServerState):
    """The searchbar."""
    return pc.box(
    
    생략 ...
    
                pc.button(
                    "검색", #Search
                    bg="navy", #gray
                    color="white", 
                    size="md",
                    width="150px",
                    #on_click=ServerState.get_data_list,
                    on_click=[ServerState.prog_show_change,ServerState.get_data_list],
                ),

 

ServerState Class 함수의 get_data_list 에 리턴으로 상태변경 Toggle 함수를 호출 하도록 했기때문에 데이터 조회가 끝나면 함수가 호출되어 Progress Modal이 닫기게 됩니다.

+ Recent posts