Python(27)
-
[Flask] 3-3 템플릿 필터 직접 만들어 보기
이번에는 템플릿 필터를 직접 만드는 방법에 대해서 알아보자 템플릿 필터는 이미 전체 답변 개수를 구할 때 해보았다 {{ question.answer_set|length }}와 같이 템플릿에서 사용한 객체에 파이프라인 문자 |를 붙여 필터 기능을 한다 ( {{ question.answer_set|length }}의 length는 전체 답변 개수를 구할 때 사용한 템플릿 필터이다) 질문 목록 화면의 작성일시를 보자 작성일시의 날짜값은 datetime 객체이다 현재 질문 목록 템플릿에서는 datetime 객체를 문자열로 표시했으므로 2023-12-02 16:56:38.933828과 같은 값으로 표시된다 대부분의 게시판 서비스에서는 시간을 이런 식으로 표시하지 않는다 템플릿 필터를 사용하면 이런 출력 문자열을 ..
2023.12.02 -
[Flask] 3-2 게시판 페이징
지금까지 만든 파이보의 질문 목록은 페이징(paging) 기능이 없었다 만약 페이징 기능이 없으면 게시물이 300개 작성되면 질문 목록 화면에 게시물이 300개 그대로 표시될 것이다 이런 경우 한 화면에 표시할 게시물이 많아져서 스크롤 바를 내려야 하는 등의 불편함이 생기므로 페이징 기능은 필수다 임시 질문 데이터 300개 생성하기 페이징을 구현하기 전에 페이징을 테스트할 정도로 데이터를 충분히 생성하자 여기서는 테스트 데이터를 300개 생성한다 테스트 데이터를 대량으로 만드는 가장 좋은 방법은 플라스크 셸을 이용하는 것이다 질문 데이터를 생성하기 위한 모듈을 import 하고 for 문을 이용하여 다음처럼 테스트 데이터를 300개 생성하자 이제 플라스크 셸을 종료하고 로컬 서버를 실행한 다음 브라우저에..
2023.12.02 -
[Flask] 3-1 내비게이션바
지금까지 만든 파이보의 기능(질문 등록·조회, 답변 등록·조회)을 사용해 봤다면 편의 기능이 없어서 불편함을 느꼈을 것이다 여기서는 이런 불편함을 해소하기 위해 내비게이션 바를 만들어 볼 것이다 내비게이션 바 추가하기 내비게이션 바는 모든 페이지에서 보여야 하므로 base.html 템플릿 파일을 열어 태그 바로 아래에 추가하자 내비게이션 바에는 메인 페이지로 이동해 주는 "Pybo" 로고(클래스값 navbar-brand)를 가장 왼쪽에 배치하고, 오른쪽에는 "계정생성"과 "로그인" 링크를 추가하자 질문 목록 화면에서 상단 내비게이션 바 확인하기 이제 질문 목록 페이지를 요청하면 맨 위에 멋진 내비게이션 바가 보일 것이다 또한 내비게이션 바의 "Pybo" 로고를 누르면 메인 페이지로 돌아갈 수 있다 "Py..
2023.12.02 -
[Flask] 2-10 폼 모듈로 데이터 검증 더 쉽게 하기
웹 프로그램에서 폼(form)은 사용자에게 입력 양식을 편리하게 제공하기 위해 사용한다 이번에는 플라스크의 폼 모듈을 어떻게 사용하는지 알아보자 폼 모듈을 사용하면 폼으로 전송되는 데이터의 필수 여부, 길이, 형식 등을 더 쉽게 검증할 수 있다 플라스크 폼 모듈 설치하기 플라스크에서 폼을 사용하려면 Flask-WTF 라이브러리를 설치해야 한다 cmd에서 다음 명령으로 Flask-WTF를 설치하자. 그리고 Flask-WTF를 사용하려면 플라스크의 환경변수 SECRET_KEY가 필요하다 SECRET_KEY는 CSRF(cross-site request forgery)라는 웹 사이트 취약점 공격을 방지하는 데 사용된다. CSRF는 사용자의 요청을 위조하는 웹 사이트 공격 기법인데 SECRET_KEY를 기반으로 ..
2023.12.01 -
[Flask] 2-9 표준 HTML과 템플릿 상속 사용해 보기
지금까지 작성한 질문 목록과 질문 상세 템플릿 파일은 표준 HTML 구조가 아니다 어떤 운영체제나 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 동작하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다 표준 HTML 구조는 어떻게 생겼을까? 표준 HTML 문서의 구조는 다음과 같아야 한다 표준 HTML 문서의 구조는 위와 같이 html, head, body 엘리먼트가 있어야 하고 CSS 파일 링크는 head 엘리먼트 안에 있어야 한다 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다 앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정해 보자 그런데 템플릿 파일들을 모두 표준 HTML 구조로 변경하면 body 엘리먼트 바..
2023.12.01 -
[Flask] 2-8 부트스트랩으로 더 쉽게 화면 꾸미기
웹 디자이너 없이 웹 프로그램을 만들다 보면 화면 디자인 작업을 하는 데 얼마나 많은 시간과 고민이 필요한지 알 수 있을 것이다 부트스트랩(Bootstrap)은 개발자 혼자서도 화면을 괜찮은 수준으로 만들 수 있게 도와주는 도구다 부트스트랩은 트위터를 개발하면서 만들어졌고, 지속적으로 관리되고 있는 오픈소스 프로젝트이다 부트스트랩 다운로드 - https://getbootstrap.com/docs/5.1/getting-started/download/ Download Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, Ruby..
2023.12.01