개발/Dash 8

[Dash]Python Dash Callback (4) 동적 데이터베이스 업데이트 및 복원

동적 데이터베이스 업데이트 및 복원 Action1. Modal 팝업창에서 '수정하기' 버튼을 클릭해 DB를 업데이트했다면, AG Grid의 데이터베이스를 다시 조회 Action2. Modal 팝업창에서 '닫기' 버튼을 클릭했을 때, 팝업창에서 내용을 수정했어도 기존의 상태로 복원 사용자가 모달에서 "수정하기" 버튼을 클릭했을 때 ag_grid_1의 데이터베이스를 업데이트하려면, toggle_modal_edit 콜백에서 데이터베이스 수정 로직을 완료한 후, ag_grid_1의 rowData를 새로 고칠 수 있도록 적절한 출력(Output)을 설정해야 합니다. toggle_modal_edit 콜백에서 데이터베이스 수정이 완료되었음을 나타내는 신호를 dcc.store를 통해 전달하여 update_grid 콜백..

개발/Dash 2024.02.13

[Dash]Python Dash Callback (3) 팝업창에 경고 메시지 띄우기 + 콜백 합치기

Action 1. 팝업창에서 원하는 명령을 수행하지 않을 시 경고 메시지 띄우기 dbc.toast , dbc.Alert 등은 사용자에게 메시지를 표시하는 데 사용하는 컴포넌트 입니다. dbc.Alert를 사용해 dbc.Modal의 ModalBody에서 질문과 답변을 입력하지 않을 시 경고 메시지를 띄웁니다. Modal의 팝업창을 닫고 다시 여는 버튼인 '수정하기' 를 클릭할 시 기존에 있던 경고 메시지를 제거합니다. Callback_context callback_context는 Dash에서 제공하는 객체로, 현재 콜백이 실행된 맥락에 대한 정보를 포함하고 있습니다. 이 객체를 사용하여 어떤 입력(Input)이 콜백을 트리거했는지, 혹은 어떤 상태(State)가 현재 콜백에 영향을 미쳤는지 등을 알 수 있..

개발/Dash 2024.01.17

[Dash]Python Dash Callback (2) State

Dash Callback State 함수 Dash 콜백 함수에서 State는 콜백을 트리거하지 않지만 콜백 함수 내에서 사용되는 컴포넌트의 현재 상태(값)를 전달하는 데 사용됩니다. Input과 달리 State는 콜백을 활성화하지 않지만, 콜백이 실행될 때 컴포넌트의 최신 상태를 제공합니다. @app.callback( Output('edit', 'is_open'), [Input("edit_open", "n_clicks"), Input("edit_close", "n_clicks"), Input("edit_set", "n_clicks")], [State('edit', 'is_open'), State('edit_i_id', 'value'), State('edit_b_id', 'value'), State('ed..

개발/Dash 2024.01.16

[Dash]Python Dash Callback (1) 콜백 트리거 속성

Dash 콜백 트리거 속성 Dash에서 사용되는 특별한 속성들, 특히 인터랙티브한 요소들과 관련된 속성들이 존재합니다. 이들은 Dash의 콜백 메커니즘에서 중요한 역할을 하며, 사용자 인터랙션에 기반한 애플리케이션의 동적 반응을 가능하게 하는 핵심 요소입니다. 이 속성들은 사용자의 인터랙션에 의해 변경되며, 그 변경 사항이 콜백 함수의 실행을 트리거합니다. 예를 들어, n_clicks 속성은 버튼 컴포넌트와 관련되어 있으며, 사용자가 버튼을 클릭할 때마다 값이 증가합니다. 이 값의 변화는 콜백 함수를 트리거할 수 있습니다. 이벤트 속성 (Event Properties) 이벤트 속성은 사용자의 특정 행동(예: 클릭, 선택, 입력)에 반응하는 속성입니다. 이러한 속성은 사용자의 인터랙션이 발생했을 때 해당 ..

개발/Dash 2024.01.16

[Dash]Python Dash Layout 구성 (3) feat. Dash AG Grid

Dash AG Grid Dash AG Grid는 Plotly의 Dash 프레임워크와 AG Grid라는 JavaScript 데이터 그리드 라이브러리를 함께 사용하여 데이터 시각화 및 조작을 위한 강력한 도구입니다. AG Grid는 빠르고 다양한 데이터 조작 및 시각화 기능을 제공하는 자바스크립트 그리드 라이브러리입니다. Dash AG Grid vs Dash Table Dash AG Grid와 Dash Table은 모두 Plotly의 Dash 프레임워크에서 사용할 수 있는 데이터 표시 및 조작 도구입니다. 그러나 두 라이브러리 간에 몇 가지 중요한 차이점이 있습니다. 다음은 Dash AG Grid가 Dash Table보다 유용한 점들입니다: 다양한 데이터 조작 기능: AG Grid는 데이터를 더 다양한 방식..

개발/Dash 2024.01.15

[Dash]Python Dash Layout 구성 (2) feat. dash_core_components

dash_core_components dash_core_components는 Dash 애플리케이션에서 사용되는 핵심적인 컴포넌트 라이브러리입니다. 이 라이브러리는 다양한 종류의 HTML 요소 및 기타 대화형 컴포넌트들을 포함하고 있어, 사용자 인터페이스를 구축하는 데 유용합니다. dash_core_components는 dcc라는 별칭으로 불리기도 합니다. 다음은 dash_core_components에서 주로 사용되는 몇 가지 컴포넌트 종류입니다: dcc.Graph: 그래프 및 차트를 표시하는 데 사용되는 컴포넌트입니다. Plotly 그래프를 지원하며, 다양한 차트 유형을 생성할 수 있습니다. dcc.Dropdown: 드롭다운 메뉴를 생성하는 데 사용되는 컴포넌트입니다. 사용자가 선택할 수 있는 항목 목록..

개발/Dash 2024.01.15

[Dash]Python Dash Layout 구성 (1) feat. dash-bootstrap-components

dash-bootstrap-components dash-bootstrap-components은 Dash 웹 프레임워크를 사용하여 Bootstrap CSS 프레임워크를 통합하는 파이썬 라이브러리입니다. 이를 통해 개발자들은 파이썬 코드로 웹 애플리케이션을 구축하면서 Bootstrap의 여러 디자인 및 레이아웃 기능을 활용할 수 있습니다. 다음은 dash-bootstrap-components의 주요 기능 및 특징입니다. 레이아웃(Grid System): dbc.Row와 dbc.Col을 사용하여 Bootstrap의 그리드 시스템을 파이썬으로 편리하게 다룰 수 있습니다. 이를 통해 반응형 및 레이아웃을 쉽게 작성할 수 있습니다. 컴포넌트(Component): Bootstrap의 다양한 UI 컴포넌트를 파이썬 코..

개발/Dash 2024.01.15

[Dash]Python Dash를 활용한 Dashboard 구축하기

1. DASH? Dash는 Flask, Plotly.js 및 React.js 위에 작성된 Python 웹서비스 개발용 프레임워크로 Plotly에 기반하고 있음 Dash는 Python과 HTML을 이용하여 쉽게 웹사이트나 대시보드 같은 대화형 웹응용프로그램을 작성할 수 있음 Dash는 데이터 시각화 및 웹 애플리케이션을 구현하는데 유용하게 사용할 수 있습니다. 2. Dash 설치 (feat. anaconda) 우선 가상환경을 먼저 구축하도록 하겠습니다. 가상환경을 구축하는 방법은 아래 게시글을 참고하시면 될 것 같습니다. https://mz-moonzoo.tistory.com/4 [Environment]아나콘다 가상환경 구성 및 주피터 노트북 커널 연결 INTRO 가상환경은 개발을 진행할 때 각 프로젝트 ..

개발/Dash 2024.01.12