본문 바로가기

& 프로그래밍/& Visual studio code

V.S.Code 기초문법 정리-1

 

비주얼스튜디오 코드를 기초부터 정리하는 블로그나 스토리를 못찾아서 내가 그냥 만들어볼란다

 

일단 당연히 비주얼스튜디오 코드를 설치하고

 

 

비주얼 스튜디오 코드 시작하기

1. 설치하기 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code..

en-percent.tistory.com

일단 임의 폴더 하나 컴퓨터 원하는 곳에 생성해준다

나는 날짜별로 정리하려고 streamlit폴더를 생성해서 하위폴더까지 만들었다

 

그리고 이 날짜 폴더를 vsc에서 불러온다

파일탐색기로 드래그 하거나, 좌측상단 '파일'을 눌러서 '작업영역에 폴더추가'로 해당 폴더를 불러온다

그리고 탐색기에서 새파일을 만들어서 '파일명.py'로 생성한다

이제 본격적으로 VSC를 활용해서 streamlit 라이브러리를 써먹어보자

비주얼스튜디오 코드에서 사용하는 기본 틀을 먼저 구성해놓는다

내용은 변할지언정, 이 틀은 절대 변하지 않기 때문에 반드시 기억해놓거나 저장해두자

import streamlit as st  #streamlit 라이브러리를 불러온다

def main(): # 함수를 생성하여 streamlit을 호출하도록 한다
    pass





if __name__ == '__main__':
    main()

자, 기본적으로 vsc에서 글자를 출력해보자

streamlit에서 글자를 출력하는 함수는 text이다
import streamlit as st  

def main(): 
    st.text("안녕하세요 저는 잡스토리입니다.")
    
    name = '잡스토리'
    st.text("안녕하세요 저는 {}입니다.".format(name))


if __name__ == '__main__':
    main()

main함수 안에 첫번째 코드처럼 st.text를 활용해 바로 문자를 입력하는 방법도 있고,

 

Python에서 써먹은 .format()함수를 활용해서 문자를 불러오게 할 수도 있다.

 

위처럼 작성한 후 반드시 'Ctrl' + s로 저장!

그 다음 'Ctrl' + ` 를 눌러서 터미널을 실행시킨다

그리고 아래처럼 작성후 엔터!

 

터미널을 통해 상단 코드를 실행시키면 새로운 호스트 페이지가 열리면서 내가 작성한 문자가 똭! 나온다

 

내가 생성한 페이지에 제목을 걸어보자(st.title)
import streamlit as st  

def main(): 
	st.title('잡스토리에 오신걸 환영합니다!!')
    
    st.text("안녕하세요 저는 잡스토리입니다.")
    
    name = '잡스토리'
    st.text("안녕하세요 저는 {}입니다.".format(name))


if __name__ == '__main__':
    main()

위처럼 st.title을 활용해 제목을 써준다

이 함수는 말그대로 제목을 생성해주기 때문에 가장 큰 글씨로 출력된다

 

아까 작성했던 text보다 훨씬 큰 사이즈임을 볼 수 있다

 

주제, 소주제 생성하기(header, subheader)

이번엔 또 다른 문자생성방법이다

글을 작성하면 글의 주제, 소주제를 나누는데 이 방법 또한 함수로 제공한다

import streamlit as st  

def main(): 
	st.title('잡스토리에 오신걸 환영합니다!!')
    
    st.text("안녕하세요 저는 잡스토리입니다.")
    
    name = '잡스토리'
    st.text("안녕하세요 저는 {}입니다.".format(name))

    st.header('주제')
    st.subheader('소주제')

if __name__ == '__main__':
    main()

위처럼 주제, 소주제 크기가 다르게 지정되어 출력되는걸 볼 수 있다

 

 

글씨 크기를 각기 다르게 지정해보자(# 활용하기)
import streamlit as st  

def main(): 
	st.title('잡스토리에 오신걸 환영합니다!!')
    
    st.text("안녕하세요 저는 잡스토리입니다.")
    
    name = '잡스토리'
    st.text("안녕하세요 저는 {}입니다.".format(name))

    st.header('주제')
    st.subheader('소주제')
    
    st.markdown("# 큰글자")
    st.markdown("## 중글자")
    st.markdown("### 작은글자")
    

if __name__ == '__main__':
    main()

파이썬이나 각 언어 프로그램에서 주석처리할때 쓰이는 #은 streamlit.markdown에서는 글자크기를 담당한다

마치 주피터 노트북에서 코드라인을 'M'처리하고 #을 쓰면 글자 크기가 달라지는것과 동일하다

 

각종 알림창 생성하기

 

홈페이지 회원가입을 하거나, 본인인증 등을 할때 제대로 입력하면 파란창이 뜨고,

오류가 발생하면 빨갛게 변하면서 수정토록 시각화하는 장면을 많이 봤을텐데

지금 다뤄볼 코드가 위와 동일하게 각종 알림을 설정해주는 방법이다

import streamlit as st  

def main(): 
	st.title('잡스토리에 오신걸 환영합니다!!')
    
    st.text("안녕하세요 저는 잡스토리입니다.")
    
    name = '잡스토리'
    st.text("안녕하세요 저는 {}입니다.".format(name))

    st.header('주제')
    st.subheader('소주제')
    
    st.markdown("# 큰글자")
    st.markdown("## 중글자")
    st.markdown("### 작은글자")
    
    st.success('성공했을때~')
    st.warning('경고를 하고 싶을때')
    st.error('에러가 발생했을때')
    st.info('안내문구')
    st.exception('예외 상황')
    

if __name__ == '__main__':
    main()

여기까지 vsc에서 streamlit을 활용한 기본적인 문법을 공부해봤다

앞으로 한 2~3개 포스팅을 통해 더 다양한 문법을 써보도록 하겠다