본문 바로가기

교육과정/streamlit 웹개발 한번에 끝내기

 (11)
[10] streamlit 서비스 배포하기 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 지금까지 개발한 포켓몬 도감 서비스를 streamlit cloud를 이용해서 웹 상에 배포해보겠습니다. github repository 생성 github: https://github.com/ 서비스를 배포하려면 우선 소스코드를 github 상에 업로드 해야합니다. 먼저 github로 이동해서 회원 가입 후에 레포지토리를 하나 만들어보겠습니다. streamlit-pokemon라는 이름으로 public repository를 하나 만들어주겠습니다. Add a README file을 체크해주겠습니다. 소스코드 업로드 레포지토리를 만든 뒤에 소스코드를 업로드해주면 됩니다. git에 익숙하신 분들은 해당 레포지토리를 원격 저..
[9] streamlit custom CSS 적용하기 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit에 직접 코딩한 CSS를 적용하는 방법을 배워보겠습니다. 다만 웹 프론트엔드 관련 지식이 필요하고, CSS를 직접 코딩해야하므로 너무 어려우신 분들은 스킵하셔도 무방합니다. st.markdown으로 CSS 적용하기 streamlit에서 custom CSS를 적용하기 위해서는 st.markdown으로 """, unsafe_allow_html=True) 이제 브라우저의 개발자 도구를 이용해서 스타일을 적용하고 싶은 태그를 확인하고, CSS를 적용하면 됩니다. title 색깔 변화 먼저 title 텍스트를 빨간색으로 바꿔보겠습니다. CSS를 적용하기 위해서 먼저 검사를 이용해서 태그 정보를 확인하겠습니다..
[8] streamlit button 이용한 데이터 삭제 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit button을 이용해서 등록되어 있는 포켓몬을 삭제하는 기능을 구현해보겠습니다. streamlit button streamlit button 문서: https://docs.streamlit.io/library/api-reference/widgets/st.button streamlit button은 버튼 UI를 간단하게 구현할 수 있고, 눌렀을 때 동작을 조건문으로 작성할 수 있습니다. 삭제 버튼 UI 추가 포켓몬 속성 텍스트 밑에 삭제 버튼을 추가해주겠습니다. 이 때, 반드시 key 값을 설정해주어야 합니다. use_container_width 옵션은 True로 설정해서 버튼의 너비를 조정하겠습니..
[7] streamlit toggle 이용한 form 자동완성 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 유저가 처음 페이지에 진입했을 때, 폼이 텅 비어있으면 어떻게 채워야 할지 당황스럽겠죠? 이번 챕터에서는 streamlit toggle을 이용해서 미리 정의한 데이터로 폼을 자동완성하는 기능을 구현해보겠습니다. 데이터 준비 먼저 폼을 자동으로 채워줄 예시 데이터를 준비하겠습니다. example_pokemon = { "name": "알로라 디그다", "types": ["땅", "강철"], "image_url": "https://storage.googleapis.com/firstpenguine-coding-school/pokemons/alora_digda.webp" } st.toggle toggle은 쉽게 말해서 껐다 켰다 할 수 있..
[6] streamlit session state 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 session state를 이용해서 데이터를 관리하는 방법을 배워보겠습니다. streamlit session state streamlit session state는 페이지가 살아있을 때, 데이터를 저장하는 일종의 딕셔너리입니다. streamlit session state 문서: https://docs.streamlit.io/library/api-reference/session-state streamlit이 공식적으로 제공하는 설명 영상이 상당히 자세해서 정확히 이해하고 싶으신 분들은 한번 보시기를 추천합니다. 간단히 요약하면 session state를 사용하면 streamlit에 의해서 페이지가 리로딩 될 때에도 ..
[5] streamlit form으로 데이터 추가하기 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit form을 이용해서 유저의 입력을 받아서 포켓몬을 추가하는 기능을 구현해보겠습니다. streamlit form streamlit form은 유저의 입력을 받는 폼을 구성할 수 있는 기능입니다. 공식 문서에 코드 사용법과 예시 화면이 나와있습니다. streamlit form 문서: https://docs.streamlit.io/library/api-reference/control-flow/st.form 텍스트 입력, 숫자 입력, 슬라이드 바, 체크 박스 등등 다양한 데이터를 입력하는 위젯을 제공하고 있으며, with문으로 사용할 수 있습니다. streamlit form은 반드시 Submit 버튼을 ..
[4] streamlit columns 이용한 위젯 배치 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 데이터 준비 그 전에, 여러마리 포켓몬들을 화면에 그리려면 데이터가 필요하겠죠? 총 여섯마리 포켓몬의 이름과 속성, 이미지 URL를 복사해서 코드에 붙여넣고, 기존에 pokemon 변수는 지워주겠습니다. pokemons = [ { "name": "피카츄", "types": ["전기"], "image_url": "https://storage.googleapis.com/firstpenguine-coding-school/pokemons/pikachu.webp" }, { "name": "누오", "types": ["물", "땅"], "image_url": "https://storage.googleapis.com/firstpenguine-..
[3] streamlit 기본 위젯 사용법 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit 위젯을 이용해서 화면 상에 포켓몬을 그려보도록 하겠습니다. 데이터 준비 그 전에, 포켓몬을 화면에 그리는데 필요한 타입 정보와 포켓몬 정보를 복사해서 코드에 붙여넣겠습니다. 그리고 “누오”라는 포켓몬의 이름과 타입, 이미지 URL을 붙여넣겠습니다. type_emoji_dict = { "노말": "⚪", "격투": "✊", "비행": "🕊", "독": "☠️", "땅": "🌋", "바위": "🪨", "벌레": "🐛", "고스트": "👻", "강철": "🤖", "불꽃": "🔥", "물": "💧", "풀": "🍃", "전기": "⚡", "에스퍼": "🔮", "얼음": "❄️", "드래곤": "🐲", "..

티스토리툴바