시험 준비하면서 배웠던 내용을 토대로 조별 과제
목표 : 필수구현 + 추가기능을 이용한 정보 공유 사이트 만들기(우리만 사용할 수 있게)
필수 구현 기능
로그인 페이지
Jinja2 템플릿 엔진 이용한 서버사이드 랜더링
추가 기능 구현
JWT token 사용하기
Bootstrap을 대체할 CSS 사용하기
서버사이드 렌더링(SSR)
서버로부터 HTML과 data가 붙여진 템플릿을 받아와 페이지 요청마다 새로고침
view에 보이는 화면 구성을 서버에서 연산
장점 : 속도가 빠르고 퀄리티가 좋음
단점 : 화면 깜빡임, 사용자가 많으면 서버 과부하 위험
»반대 : 클라이언트 사이드 렌더링
Jinja2
import Flask를 통해서 사용할 수 있음
템플릿을 렌더링 하는 테스크를 위해 사용
{{}}, {%%}를 사용해서 Flask의 변수들을 html에 바로 적용할 수 있음
Flask Flash와 Ajax 연관성
처음 시도 - View 화면에 Flash message를 띄우기 위해서 form 형식을 이용하여 Flask에서 응답한 후 다시 View로 정보를 보내줘서 동작할 수 있었음. (JS에서 받을땐 jinja2 를 사용)
중간 JWT 토큰부 수정으로 인하여 JS form 태그가 문제를 발생시킴 이를 수정하기 위해서 div 태그로 바꾼 후 Ajax를 이용하여 Flask로 데이터를 전송 --> Flask에 print가 찍히는 것은 확인하였으나 return이 넘어오지 않음
수정 시도 : JS Flash Jinja 부분을 수정하였으나 동작하지 않음
Flask 쪽 return에 redirect, render_template 등을 사용하였으나 여전히 return 되지 않음
수정 완료 : JWT token 생성을 위해 사용한 Ajax를 Jinja 형식으로 전환
--> JWT token과 Flash 전부 동작
https://stackoverflow.com/questions/24288380/flask-flash-and-url-for-with-ajax키워드 검색
Flask에서 MongoDB data를 SQL 방식으로 처리할 수 있음
import re
Bootstrap 대체 CSS
bulma :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">bootstrap 보다 가벼움 - 그런데 아직은 쓰기에 익숙치 않음
tailwind
https://tailwindcss.com/docs/installationtailwind.config.js 설치 후 경로 추가해서 사용
반응형 CSS 를 만들기에 좋음 - 하지만 사용을 위해 준비하는 과정이 필요함
