웹 개발(25)
-
[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 -
[Flask] 2-6 답변 등록 기능 만들기
이번에는 질문에 답 변을 등록하고 보여 주는 기능을 만들어 보자 답변 저장하기 질문 상세 화면에 답변을 입력하기 위한 텍스트 창(textarea)과 버튼을 생성하고, 이 버튼을 누르면 텍스트 창에 입력된 답변이 저장되도록 구현해 보자 답변 등록 버튼 만들기 질문 상세 템플릿에 답변 저장을 위한 form, textarea, input 엘리먼트를 추가하자 답변 저장 URL은 form 태그의 action 속성에 url_for('answer.create', question_id=question.id)로 지정했다 이후 버튼을 누르면 POST 방식으로 이 URL이 호출(submit)될 것이다 코드를 추가한 후 웹 브라우저에서 질문 상세 페이지를 요청해 보면 오류 메세지 화면이 나타날 것이다 이 오류를 해결하려면 "..
2023.12.01 -
[Flask] 2-5 질문 목록과 질문 상세 기능 만들기
존재하지 않는 페이지를 요청받으면 빈 페이지 대신 404 오류 페이지를 표시하도록 다음처럼 detail 함수의 일부를 수정해 보자 핵심 기능인 질문 목록과 질문 상세 기능을 구현해 보자 질문 목록 만들기 플라스크 서버를 실행하고 웹 브라우저에서 localhost:5000에 접속해 보자 게시판 질문 목록 출력하기 이 화면 대신 게시판 질문 목록이 출력되도록 main_views.py 파일을 수정해 보자 index 함수가 문자열을 반환하던 부분을 질문 목록을 출력하도록 변경하면 된다 질문 목록 데이터는 question_list = Question.query.order_by(Question.create_date.desc()) 로 얻을 수 있다 order_by는 조회 결과를 정렬하는 함수 order_by(Ques..
2023.12.01