SBB의 질문 목록은 현재 페이징 처리가 안되기 때문에, 게시물 300개를 작성하면 한 페이지에 300개의 게시물이 모두 조회된다. 이번에는 페이징(Paging)을 적용하여 이 문제를 해결해 보자. 대량 테스트 데이터 만들기 페이징을 구현하기 전에 페이징을 테스트할 수 있을 정도로 충분한 데이터를 생성하자. 대량의 테스트 데이터를 만드는 가장 간단한 방법은 스프링부트의 테스트 프레임워크를 이용하는 것이다. 다음처럼 테스트 케이스를 작성하자. [파일명:/sbb/src/test/java/com/mysite/sbb/SbbApplicationTests.java] package com.mysite.sbb; import org.junit.jupiter.api.Test; import org.springframewor..
지금까지 만든 SBB로 질문 목록을 조회하고 질문을 등록하고, 다시 내용을 보고 답변을 달고 이렇게 조작을 하다 보면 아마도 불편함을 느끼게 될것이다. 그것은 바로 메인페이지(Home)로 돌아갈 수 있는 기능이 없기 때문이다. 이번에는 이러한 불편을 해소할 수 있는 내비게이션바를 만들어 보자. 네비게이션바는 모든 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트이다. 부트스트랩 내비게이션바: https://getbootstrap.com/docs/5.1/components/navbar/ Navbar Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for bra..
이전 챕터에서 질문 등록과 답변 등록시 오류가 발생하면 다음과 같이 오류를 표시했다. 앞으로 추가적으로 만들 템플릿들에도 위와 같이 오류를 표시하는 부분이 필요하다. 이렇게 반복적으로 사용하는 문장은 공통 템플릿으로 만들고 필요한 부분에 삽입하여 쓸 수 있다면 편리하지 않을까? 이번 장에서는 위의 오류 메시지를 출력하는 부분을 공통 템플릿으로 작성하고 필요한 곳에 삽입하여 사용할 수 있도록 해보자. 오류 메시지 공통 템플릿 오류 메시지를 표시하는 공통 템플릿을 다음과 같이 작성하자. [파일명:/sbb/src/main/resources/templates/form_errors.html] 출력할 오류메시지 부분에 th:fragment="formErrorsFragment" 속성을 추가했다. 질문 등록 템플릿에 ..
질문 등록 질문 등록을 하려면 먼저 "질문 등록하기" 버튼을 만들어야 한다. 다음처럼 질문 목록 하단에 버튼을 생성하자. [파일이름:/sbb/src/main/resources/templates/question_list.html] (... 생략 ...) 질문 등록하기 링크 엘리먼트( ... )이지만 부트스트랩의 btn btn-primary 클래스를 적용하면 버튼으로 보인다. 이제 "질문 등록하기" 버튼을 누르면 /question/create URL이 호출될 것이다. URL 매핑 그리고 컨트롤러에 /question/create에 해당되는 URL 매핑을 추가하자. [파일명:/sbb/src/main/java/com/mysite/sbb/question/QuestionController.java] (... 생략 ...
HTML에 익숙한 독자라면 눈치겠지만, 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동 하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다. 표준 HTML 구조 표준 HTML 문서의 구조는 다음과 같아야 한다. [표준 HTML 구조의 예] (... 생략 ...) 표준 HTML 문서의 구조는 위의 예처럼 html, head, body 엘리먼트가 있어야 하며, CSS 파일은 head 엘리먼트 안에 링크 되어야 한다. 또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다. 태그와 엘리먼트 (... 생략 ...) 위에서 은 table 태그이고 ~ 처럼 table..
웹 디자이너 없이 혼자서 웹 프로그램을 작성해 보았다면 화면 디자인 작업에 얼마나 많은 시간과 고민이 필요한지 알고 있을 것이다. 이번에 소개하는 부트스트랩(Bootstrap)은 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다. 부트스트랩은 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다. 부트스트랩을 적용하여 SBB 서비스를 이쁘게 만들어 보자. 부트스트랩 설치 우선 다음 URL에서 부트스트랩을 다운로드 하자. 부트스트랩 다운로드 - https://getbootstrap.com/docs/5.1/getting-started/download/ 주의사항 부트스트랩은 3.x, 4.x, 5.x 등의 버전..