[Cloud] 6주차-3. VS Code를 활용한 Streamlit App 개발 실습

⭐ 기본 환경 세팅

1) 파이썬이랑 Visual Studio Code를 설치한다.

 

2) Visual Studio Code에서 Python Extension을 설치한다.

 

3) 간단한 Python 코드를 작성하여 정상적으로 실행되는지 확인한다.

 

⭐ Streamlit 개발 준비

1) pip install streamlit 명령어를 통해 Streamlit 라이브러리를 Python 환경에 설치한다.

* Python 실행 경로가 반영되지 않아 pip 명령어가 인식되지 않는다면 재부팅해보기

 

2) 아래 코드를 입력하고 저장한 후, 터미널에서 streamlit run test.py 명령어를 실행한다.
실행 시 웹 브라우저가 자동으로 열리며, 작성한 Python 코드가 웹 애플리케이션 형태로 출력되는 것을 확인할 수 있다.

import streamlit as st

st.title("Welcome to Streamlit")

st.header("이것은 헤더 입니다.")

 

⭐ Streamlit 개발

코드

import streamlit as st

# Streamlit 앱의 제목을 설정
st.title("Welcome to Streamlit")

# 큰 제목(헤더) 출력
st.header("이것은 헤더 입니다.")

# 작은 제목(서브헤더) 출력
st.subheader("이것은 서브 헤더 입니다.")

# 코드 블록을 화면에 출력 (문자열 형태로 코드 표시)
st.code("""
def Plus(a, b):
    return a + b
        """, language = "python")

# markdown 형식으로 출력 (굵게, 기울임 등 적용 가능)
st.markdown("***일반적인*** 내용을 출력한다.")

# 텍스트 출력 (섹션 제목 느낌)
st.text("부가세 계산기")

# 구분선 추가
st.divider()

# 사용자로부터 가격을 입력받는 입력창 생성 (문자열로 입력됨)
price = st.text_input("상품의 가격을 입력하세요")

# 버튼 생성 (클릭 시 True 반환)
button_click = st.button("계산")

# 버튼이 클릭되었을 때 실행되는 조건문
if button_click:
    st.text(str(int(price) * 1.1) + "원 입니다.")

 

참고

# st.text()는 Markdown 문법이 적용되지 않음
st.text("***일반적인*** 내용을 출력한다.") 

# st.markdown()을 사용해야 Markdown 문법(굵기, 기울임 등)이 적용됨
st.markdown("***일반적인*** 내용을 출력한다.")

st.markdown("**굵은 글씨**")
st.markdown("*기울임*")
st.markdown("***굵고 기울임***")
st.markdown("~~취소선~~")
st.markdown("첫 번째 줄  \n두 번째 줄")

출력 결과