사이먼's 코딩노트

[유효성 체크 및 에러 처리]질문 등록 시 제목이나 내용을 입력하지 않고 질문이 등록되는것을 방지하고자 폼 클래스를 통해 유효성 체크하는 기능을 추가하고 로컬 서버를 재실행하면 에러 메시지가 붉은 색으로 표시되는 것을 확인할 수 있다.하지만 여기서 한 가지 문제를 발견했다.예를 들어 제목을 입력하고 내용을 비워둔 채로 '저장하기' 버튼을 클릭하면 에러 메시지가 표시되면서 이미 입력했던 제목 텍스트가 사라진다는 점이다.이번에는 입력한 제목이나 내용의 텍스트가 남아있도록 에러 처리를 해봅시다.해당 에러를 처리하기 위해 아래는 question_form.html 템플릿에서 코드를 수정한 모습이다. 질문등록 제목 ..

[Question 등록]현재까지 제작된 SBB 프로그램의 기능은 전체 질문 리스트 조회(question/list), 질문 상세 내용보기(question/detail/{id}), 답변 등록(answer/create{id}) 및 보기가 포함되어 있다.이번에는 질문을 등록하는 버튼을 추가하고, 질문을 등록할 수 있는 화면 페이지를 만들어봅시다.아래는 Question 등록을 위해 question_list.html에서 버튼 코드를 추가한 모습이다.질문 등록하기기본 layout.html 템플릿이 상속된 html 태그 안에서 가장 하단에 위와 같은 코드를 추가한다.해당 버튼 역시 부트스트랩 클래스가 적용되어 있기 때문에 버튼에 디자인이 적용되어 있다.화면에 나타난 '질문 등록하기' 버튼을 지금 상태에서 클릭하게 된다..

[Bootstrop 및 폰트 적용]기본 스타일시트를 생성하였다면, 보다 아름다운 디자인을 위해 부트스트랩을 도입해봅시다.부트스트랩(Bootstrap)이란 프론트엔드 프레임워크로 웹 페이지를 쉽게 디자인할 수 있게 도와주고, 전에 포스팅을 했던 테일즈윈드 데이지UI와 같이 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 곳이다.부트스트랩은 트위터를 개발하면서 만들어졌으며, 현재 지속적으로 관리되고 있는 오픈소스 프로젝트로, 웹 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들 수 있게 도와준다는 것이 가장 큰 장점이다.직접 설치해서 부트스트랩을 적용하는 방법도 있지만, cdnjs에서 부트스트랩 링크를 복사하여 코드에 직접 추가하여 부트스트랩..