Streamlit fragments 사용하기

Streamlit fragments 사용하기

Streamlit
Streamlit fragments 사용하기
Author

gabriel yang

Published

September 19, 2024


Streamlit의 st.column_config.LinkColumn: 링크 컬럼을 활용한 데이터 표현

Streamlit은 데이터 애플리케이션을 쉽게 만들 수 있는 강력한 도구입니다. 그중 st.column_config.LinkColumn은 데이터프레임의 특정 열에 링크를 추가하여 사용자에게 정보를 제공하는 데 매우 유용합니다. 이번 글에서는 LinkColumn의 기본 사용법과 함께 간단한 예제를 소개하겠습니다.

LinkColumn이란?

st.column_config.LinkColumn은 데이터프레임에서 URL 링크를 포함한 열을 만들어 주는 기능입니다. 이를 통해 사용자는 클릭하여 외부 웹페이지나 리소스로 이동할 수 있습니다. 이 기능은 특히 데이터 시각화 대시보드나 보고서에서 유용하게 활용될 수 있습니다.

기본 사용법

LinkColumn을 사용하기 위해서는 먼저 Streamlit의 column_config 모듈을 임포트해야 합니다. 그 후, 데이터프레임을 생성하고 링크 컬럼을 추가하면 됩니다.

예제: 웹사이트 링크 목록

아래 예제에서는 다양한 웹사이트의 링크를 포함한 데이터프레임을 생성해 보겠습니다.

전체 코드

아래는 전체 코드를 통합한 예제입니다.

```python
import streamlit as st
import pandas as pd

# 웹사이트 데이터 생성
data = {
    '사이트 이름': ['Google', 'YouTube', 'GitHub'],
    '링크': [
        'https://www.google.com',
        'https://www.youtube.com',
        'https://www.github.com'
    ]
}

df = pd.DataFrame(data)

st.data_editor(
    df,
    column_config={
        "링크": st.column_config.LinkColumn(
            "링크", display_text="Open profile")
    }
)

### 코드 설명

1. **라이브러리 임포트**: Streamlit과 pandas를 임포트하여 웹 애플리케이션을 구성합니다.

2. **데이터프레임 생성**: 웹사이트 이름과 해당 URL 링크를 포함한 데이터프레임을 생성합니다.

3. **링크 컬럼 추가**: 링크를 마크다운 형식으로 변환하여 사용자가 클릭할 수 있도록 합니다. `lambda` 함수를 사용하여 URL에서 도메인 부분만 추출하여 표시합니다.

4. **데이터 표시**: `st.markdown`을 사용하여 HTML 링크가 포함된 데이터프레임을 Streamlit 애플리케이션에 표시합니다.

<div class="d-flex justify-content-center mt-5">
    <h3>카테고리 다른 글</h3>
</div>



:::{#quarto-navigation-envelope .hidden}
[BookShelf]{.hidden render-id="quarto-int-sidebar-title"}
[BookShelf]{.hidden render-id="quarto-int-navbar-title"}
[Home]{.hidden render-id="quarto-int-navbar:Home"}
[/index.html]{.hidden render-id="quarto-int-navbar:/index.html"}
[Blog]{.hidden render-id="quarto-int-navbar:Blog"}
[/blog/blog.html]{.hidden render-id="quarto-int-navbar:/blog/blog.html"}
[Books]{.hidden render-id="quarto-int-navbar:Books"}
[/book_blog/book_blog.html]{.hidden render-id="quarto-int-navbar:/book_blog/book_blog.html"}
[DashBoard]{.hidden render-id="quarto-int-navbar:DashBoard"}
[/dashboard_blog/dashboard_blog.html]{.hidden render-id="quarto-int-navbar:/dashboard_blog/dashboard_blog.html"}
[About]{.hidden render-id="quarto-int-navbar:About"}
[/about.html]{.hidden render-id="quarto-int-navbar:/about.html"}
[gabrielwithhappy@gmail.com]{.hidden render-id="footer-center"}
:::


:::{#quarto-listing-pipeline .hidden}
[$e = mC^2$]{.hidden render-id="quarto-enable-math-inline"}

:::{.hidden render-id="pipeline-listing-listing"}


<table class="quarto-listing-table table">
<thead>
<tr>
<th>
Date
</th>
<th>
Title
</th>
<th>
Author
</th>
</tr>
</thead>
<tbody class="list">
<tr data-index='0' data-categories='AI,AWS,Agile,BigQuery,BookReview,Busniess Analysis,Data Visualization,Database,DesignPattern,DevOps,Docker Compose,GIT,Git,HuggingFace,Jinja,Jira,KMS,Pandas,Pymongo,Python,Python/,Quarto,Refactoring,Streamlit,Web' data-listing-date-sort='32503680000000' data-listing-file-modified-sort='1743422906736' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='5' data-listing-title-sort='전체 카테고리' data-listing-filename-sort='30000101.qmd'>
<td>
<span class="listing-date">Jan 1, 3000</span>
</td>
<td>
<a href="/blog/posts/3000/30000101.qmd" class="title listing-title">전체 카테고리</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='1' data-categories='Streamlit' data-listing-date-sort='1726876800000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='4' data-listing-title-sort='Streamlit 멀티 select 사용하기' data-listing-filename-sort='20240921.qmd'>
<td>
<span class="listing-date">Sep 21, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240921.qmd" class="title listing-title">Streamlit 멀티 select 사용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='2' data-categories='Streamlit' data-listing-date-sort='1726876800000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='2' data-listing-title-sort='Streamlit selectbox를 사용하기' data-listing-filename-sort='20240921_1.qmd'>
<td>
<span class="listing-date">Sep 21, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240921_1.qmd" class="title listing-title">Streamlit selectbox를 사용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='3' data-categories='Streamlit' data-listing-date-sort='1726704000000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='5' data-listing-title-sort='Streamlit fragments 사용하기' data-listing-filename-sort='20240919.qmd'>
<td>
<span class="listing-date">Sep 19, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240919.qmd" class="title listing-title">Streamlit fragments 사용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='4' data-categories='Streamlit' data-listing-date-sort='1726704000000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='2' data-listing-title-sort='Streamlit form 사용하기' data-listing-filename-sort='20240919_1.qmd'>
<td>
<span class="listing-date">Sep 19, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240919_1.qmd" class="title listing-title">Streamlit form 사용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='5' data-categories='Streamlit' data-listing-date-sort='1726704000000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='2' data-listing-title-sort='Streamlit 데이터프레임 수정하기' data-listing-filename-sort='20240919_2.qmd'>
<td>
<span class="listing-date">Sep 19, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240919_2.qmd" class="title listing-title">Streamlit 데이터프레임 수정하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='6' data-categories='Streamlit' data-listing-date-sort='1726617600000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='4' data-listing-title-sort='Streamlit docker로 배포하기' data-listing-filename-sort='20240918.qmd'>
<td>
<span class="listing-date">Sep 18, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240918.qmd" class="title listing-title">Streamlit docker로 배포하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='7' data-categories='Streamlit' data-listing-date-sort='1726617600000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit 실시간 업데이트 사용하기' data-listing-filename-sort='20240918_1.qmd'>
<td>
<span class="listing-date">Sep 18, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240918_1.qmd" class="title listing-title">Streamlit 실시간 업데이트 사용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='8' data-categories='Streamlit' data-listing-date-sort='1726617600000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='4' data-listing-title-sort='Streamlit에서 다이얼로그 사용하기' data-listing-filename-sort='20240918_2.qmd'>
<td>
<span class="listing-date">Sep 18, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240918_2.qmd" class="title listing-title">Streamlit에서 다이얼로그 사용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='9' data-categories='Streamlit' data-listing-date-sort='1726617600000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit의 유지보수와 디버깅 팁' data-listing-filename-sort='20240918_3.qmd'>
<td>
<span class="listing-date">Sep 18, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240918_3.qmd" class="title listing-title">Streamlit의 유지보수와 디버깅 팁</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='10' data-categories='Streamlit' data-listing-date-sort='1726531200000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit cache_resource 사용하기' data-listing-filename-sort='20240917.qmd'>
<td>
<span class="listing-date">Sep 17, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240917.qmd" class="title listing-title">Streamlit cache_resource 사용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='11' data-categories='Streamlit' data-listing-date-sort='1726444800000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit cache 사용하기' data-listing-filename-sort='20240916.qmd'>
<td>
<span class="listing-date">Sep 16, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240916.qmd" class="title listing-title">Streamlit cache 사용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='12' data-categories='Streamlit' data-listing-date-sort='1726358400000' data-listing-file-modified-sort='1743422906521' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='6' data-listing-title-sort='Streamlit 데이터프레임 선택하기' data-listing-filename-sort='20240915.qmd'>
<td>
<span class="listing-date">Sep 15, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240915.qmd" class="title listing-title">Streamlit 데이터프레임 선택하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='13' data-categories='Streamlit' data-listing-date-sort='1726272000000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='2' data-listing-title-sort='Streamlit 다중 page 구성하기' data-listing-filename-sort='20240914.qmd'>
<td>
<span class="listing-date">Sep 14, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240914.qmd" class="title listing-title">Streamlit 다중 page 구성하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='14' data-categories='Streamlit' data-listing-date-sort='1726185600000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit Session_state 사용하기' data-listing-filename-sort='20240913.qmd'>
<td>
<span class="listing-date">Sep 13, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240913.qmd" class="title listing-title">Streamlit Session_state 사용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='15' data-categories='Streamlit' data-listing-date-sort='1726099200000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit을 활용한 기본 시각화 도구' data-listing-filename-sort='20240912.qmd'>
<td>
<span class="listing-date">Sep 12, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240912.qmd" class="title listing-title">Streamlit을 활용한 기본 시각화 도구</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='16' data-categories='Streamlit' data-listing-date-sort='1726099200000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit에 Plotly 차트 적용하기' data-listing-filename-sort='20240912_1.qmd'>
<td>
<span class="listing-date">Sep 12, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240912_1.qmd" class="title listing-title">Streamlit에 Plotly 차트 적용하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='17' data-categories='Streamlit' data-listing-date-sort='1726012800000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='4' data-listing-title-sort='Streamlit에서 파일 업로드하기' data-listing-filename-sort='20240911.qmd'>
<td>
<span class="listing-date">Sep 11, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240911.qmd" class="title listing-title">Streamlit에서 파일 업로드하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='18' data-categories='Streamlit' data-listing-date-sort='1726012800000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='5' data-listing-title-sort='Streamlit에 SQLite 데이터베이스 적용' data-listing-filename-sort='20240911_1.qmd'>
<td>
<span class="listing-date">Sep 11, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240911_1.qmd" class="title listing-title">Streamlit에 SQLite 데이터베이스 적용</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='19' data-categories='Streamlit' data-listing-date-sort='1725926400000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='4' data-listing-title-sort='Streamlit UI 컴포넌트 소개' data-listing-filename-sort='20240910.qmd'>
<td>
<span class="listing-date">Sep 10, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240910.qmd" class="title listing-title">Streamlit UI 컴포넌트 소개</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='20' data-categories='Streamlit' data-listing-date-sort='1725840000000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit 사용 사례' data-listing-filename-sort='20240909.qmd'>
<td>
<span class="listing-date">Sep 9, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240909.qmd" class="title listing-title">Streamlit 사용 사례</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='21' data-categories='Streamlit' data-listing-date-sort='1725840000000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit 설치 및 환경설정' data-listing-filename-sort='20240909_1.qmd'>
<td>
<span class="listing-date">Sep 9, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240909_1.qmd" class="title listing-title">Streamlit 설치 및 환경설정</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='22' data-categories='Streamlit' data-listing-date-sort='1725840000000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit 애플리케이션 구조 이해' data-listing-filename-sort='20240909_2.qmd'>
<td>
<span class="listing-date">Sep 9, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240909_2.qmd" class="title listing-title">Streamlit 애플리케이션 구조 이해</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='23' data-categories='Streamlit' data-listing-date-sort='1725840000000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='5' data-listing-title-sort='Streamlit layout 설정하는 방법' data-listing-filename-sort='20240909_3.qmd'>
<td>
<span class="listing-date">Sep 9, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240909_3.qmd" class="title listing-title">Streamlit layout 설정하는 방법</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='24' data-categories='Streamlit' data-listing-date-sort='1725753600000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='3' data-listing-title-sort='Streamlit이란 무엇인가요?' data-listing-filename-sort='20240908.qmd'>
<td>
<span class="listing-date">Sep 8, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240908.qmd" class="title listing-title">Streamlit이란 무엇인가요?</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
<tr data-index='25' data-categories='Streamlit' data-listing-date-sort='1725580800000' data-listing-file-modified-sort='1743422906520' data-listing-date-modified-sort='NaN' data-listing-reading-time-sort='2' data-listing-title-sort='Streamlit Cloud로 앱 배포하기' data-listing-filename-sort='20240906.qmd'>
<td>
<span class="listing-date">Sep 6, 2024</span>
</td>
<td>
<a href="/blog/posts/2024/20240906.qmd" class="title listing-title">Streamlit Cloud로 앱 배포하기</a>
</td>
<td>
<span class="listing-author">gabriel yang</span>
</td>
</tr>
</tbody>
</table>

<div class="listing-no-matching d-none">No matching items</div>
```{=html}
<nav id="listing-pagination" class="listing-pagination" aria-label="Page Navigation">
  <ul class="pagination"></ul>
</nav>

:::

:::

Back to BLOG LIST