25.11.03 18일차 [fastapi_대시보드 생성, html 조립, sql에서 데이터 불러오기]
Datadesigner2025. 11. 3. 12:56
오늘은 월요일~ 행복한 날~
오늘은 fastapi와 jinja2를 사용해서 대시보드 생성하는 실습을 진행했다.
이 때 html을 크게 안 가져가고 부분별로 나눠서 조립하는 과정으로 진행중이다
1. html 더미 데이터를 가져온다.
우리는 AdminLTE에서 더미 데이터를 가져왔다.
AdminLTE는 대쉬보드 템플릿 사이트이고 여기에서 각종 대시보드 라이브러리를 가져올 수 있다.
프로젝트 주제
tree 명령어는 파이썬이 아니라 cmd에서 실행하면 된다.
이렇게 폴더에 있는 모든 정보가 나온다.
다운로드 클릭3.2 버전으로 실습한다,
ADminLTE ASSET에서 dist 폴더, plugins 폴더, index.html 파일을 가져온다. 이후 static 폴더, templates 폴더를 따로 생성하고 static 폴더에 dist폴더와 plugins 폴더를 넣어주면 준비 완료
기본 세팅, main.py에서 코드를 작성하고 static(정적 데이터) , templates(동적 데이터) 따로 분리해준다.
2. 기본 코드 적용 이전에 ui.py에 있던 기본 템플릿, fastapi등등을 불러오는 코드를 복붙해온다. 2번 코드~16번 코드가 기본 코드다. 이후 18번부터는 사이트 지정, 어떤 html을 불러와서 사용할 지, 각 키에 맞는 값을 지정해준것이다. 18번부터 코드는 진행하며 하나씩 설명하겠다.
3. html 분해
기존의 index.html 파일이다. 코드가 약 1500개로 되어있다.
기본 index.html 파일을 열면 이렇게 나온다, 이제 이걸 하나하나 분해해본다.
index.html 파일을 우리의 폴더로 가져와서 열면 이렇게 된다. 그 이유는 디자인이 들어가있는 css파일, 이미지 등의 경로가 기존 파일과 다르기 때문이다,
해결하려면 기존의 dist 폴더 안에 있던 파일들의 경로를 우리가 만든 폴더인 static 안에 있다고 경로를 다시 적어줘야 한다. plugins로 시작하는 경로에 위치한 css 파일들을 ctrl+f 로 잡아서 replace 해준다.
replace
그 이후 div로 나눠져있는 부분들을 각각의 html로 나눠준다. 예를 들면 preloader로 되어있는 칸에 있는 코드를 다른 preloader.html이라는 파일을 만든 후 그 안에 붙여준다. 그리고 메인이 되는 index.html 파일에 그 경로를 지정해주면 index.html 파일안에 다른 html들이 조각조각 붙게 된다
기존 파일, div로 나눠진 곳이 사이트에서 각 세션을 의미한다.동적 데이터인 html의 조각들을 mod 한폴더에 몰아준다
이 후 이런식으로 각 html의 위치를 지정해주면 한 파일에서 다른 파일들을 참조해서 사용할 수 있게 된다.
그리고 우리는 키와 값을 정해준 이전의 수업 내용을 이용해서 이 html 파일을 가지고 놀아볼 거다,
기존 left.html 파일
기존 파일의 모습, left.html 파일은 화면 왼쪽의 메뉴판의 모습을 구성한다.
left.html파일에서 우선 맨 위 위젯 부분을 제와하고 전부 삭제했다. 이후 기존 유저 이미지와 이름이 들어간 부분에 jinja2 템플릿을 이용해서 main.py 파일에서 각 키에 값을 부여해주고 그 키를 입력했다.
이 후 변경된 왼쪽 사이드바
이런 식으로 html 코드를 수정하며 글자와 사진, 개수 등 다양한 내용을 수정할 수 있게 된다. 이게 대시보드 구성이다.
그 이후 25번 코드에 있는 링크를 /sales/board 로 변경해주었다. 현재는 게시판을 누르면 다른 사이트로 넘어가는데 그 사이트에서 오류가 나기 때문이다. 그래서 이제 게시판을 누르면 /sales/board로 넘어가고, 그 url을 가진 사이트에 sql에서 가져온 데이터를 불러올 것이다.
spl 불러오기
url = /sales/board 를 가진 새로운 페이지를 만들어줬다. 기본 값은 그대로이고, sales_board.html 파일에 새로운 값을 입력해준다.
sales_board.html. 본문 내용이 sales_board_contents다
이 html파일은 이전의 html과 똑같은 값을 입력해도 된다. 단, 본문 내용만 바꿀 것이기 때문에 본문 내용에 해당하던 부분을 지워준 후 본문 내용에 sql데이터를 넣을것이다.
index.html 파일이다. 본문부분이 index_contents다sales_board_contents.html 1차 구성
먼저 index_contents.html에서 필요한 부분만 가져온다. 그리고 이름과 항목등의 문자만 수정해준다.
홈에서 게시판을 눌렀을 때 오류가 나지 않고 다음 페이지로 넘어간다 그 다음 sql을 fastapi로 불러오기 위해서 pymysql ,sqlAlchemy 두 가지 프로그램을 다운받아준다
요약하자면 pymysql은 쿼리를 수행할 수 있게 도와주는 역할 sqlAlcoemy는 접속하게 도와주는 역할이다. orm 방식으로 db와 작업할 수 있게 도와준다고 한다.
이제 pymysql을 이용해서 파이썬에 sql정보를 불러온다.
크게 5단락으로 나뉜다.
1, import로 pymysql을 불러온다. 2. connection = 소통의 의미이다, 내가 어떤 데이터베이스를 사용할지에 대해서 정보를 입력하는거다. 이때는 지난 수업때 배운 하이디sql에서 입력한 정보를 입력하면 된다. 나머지 문법은
pymysql 사이트에 들어가면 라이브러리를 사용하는 가이드라인이 있다, 이에 맞춰서 우리가 사용할 내용을 넣어주면 된다. 가이드의 내용은 위의 코드 사진을 보며 대입해보면 이해할 수 있다.
sql쿼리의 내용은 t1데이터베이스에 있는 car_mart 뷰의 모든 정보를 상위부터 10개만 가져오게 세팅했다.
이렇게 모든 정보를 가져온다.
그리고 이 파일 쿼리 자체를 함수화하고, 예외처리를 걸어야 실제로 fastapi 내부에서 사용할 수 있다.
먼저 함수의 종료를 지정하지 않았기 때문에 with문을 사용해서 함수가 진행되고 자동으로 종료되도록 3번 함수종료를 지운다.
1. with 문
9번줄에 with문을 추가하고 23번 코드의 연결종료 if문을 지웠다. 이제 쿼리를 불러와도 자동으로 종료된다.
2. 예외처리
리스트를 불러오는것이기 때문에 들어올 데이터에 예외처리를 해줘야 한다. 왜냐하면 기본적으로 I/O과정에서 가장 많은 오류가 일어나기 때문이다.
try ~ except ~ 3. 함수화
함수화도 함께 진행해야 오류가 나지 않게 확인할 수 있다.
먼저 위 쿼리를 함수화해줬다. 모든 코드를 잡아서 함수안에 넣어줬고, 이후 try: except Exception as e: 로 오류를 잡아낼 수 있게 세팅하였다. 마지막으로 함수를 호출해서 결과값을 확인한다. 오류가 난 것을 확인하려면 포트 번호를 이상하게 바꾸고 실행해보자.
포트번호를 바꾸고 오류를 잡아낸것을 확인할 수 있다.
이렇게 sql 데이터를 불러올 수 있는 파일 __init__.py를 만들었다.
수업시간에 진행한 __init__py 전문, 위의 다른 사진들은 복습하면서 새로 처음부터 해서 조금 다를 수 있따.
웹서비스에 sql데이터 불러오기
먼저 from (패키지) import (모듈) 문법을 이용해서 db 패키지(폴더)에 있는 __init__.py를 불러온다. 이 때 모듈이 한개밖에 없기 때문에 모듈만 불러와도 적용이 된다.
맨 위 코드다, 이전 파일에서 지정한 함수가 불러와지는것을 확인할 수 있다.
그 이후 main.py에서 기존에 있던 데이터에서 'sales':rows를 추가해준다. 이 rows는 상위에 __init__.py에서 지정한 함수다.
그 이후 본문의 내용의 역할을 맡은 sales_board_contents.html 파일에 for 문을 사용해서 각 테이블과 그에 맞는 데이터를 가져온다. 여기서 html의 for문 문법이 나오는데 thead tbody tr th td 등 너무나 다양한 문법이 나오는데 우리는 프론트엔드전문이 아니라 그냥 보고 넘기라고 하셨다.
이후 27번 줄에 border 명령어를 추가해준다면
이렇게 표처럼 데이터를 받아볼 수 있다.
오늘은 처음으로 파이썬, sql, java, 그리고 fastapi 이 네가지 기술이 한 데 모여서 결과물을 만들어낸 감격적인 날이다.
이 날을 기념일로 제정하겠다 11월3일
저번주에 fastapi 수업을 진행할 때만 해도 시각화도 없고 이게 뭘 어떻게 불러와서 그냥 강사님 말만 듣고 따라 적기만 하고 뭘 하는지 솔직히 하나도 이해가 되지 않았는데
그래서 주말에 fastapi에 대해서 대충 검색해보고 약간의 정보를 봤다.
그 이후 오늘 어떤 기술들이 어떤 기능을 하고, 어떤 작용을 하면서 결과물이 도출되는지, 이러한 과정을 하나하나 함께 진행하다 보니까 이제야 비로소 아주 약간이나마 이 기술들, 내가 무언가를 시작할 때 입력하는 키워드들, 그 외 다른 것들이 하나하나 이해가 되기 시작한다.
강사님이 이 기술들이 퍼즐처럼 맞물리는 날이 올거라고 하셨는데 그게 오늘일까? 아니면 조금 더 이후일까?
근데 혼자하라고 했으면 절대 못했다 진도가 빨리 나가야해서 그런가 어떤 기능을 사용해서 데이터를 가져오고 하는건 알겠는데 그때 사용하는 문법 ex)jinja2Templates 같은것들
이런걸 하나하나 이해하고 넘어갈 수 없다고 해주셨는데 맞는 말 같다, 이게 외우고 싶으면 내가 더 공부해야지
java쪽에서는 그냥 이런거 있고 이런거 쓰면 이렇게 된다고 하시고서 보다보면 갑자기 후루룩!
