3-1. 내비게이션 바 추가하기

내비게이션 바: 어떤 화면에 있더라도 항상 메인 화면으로 돌아갈 수 있도록 고정되어있는 바로 모든 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트 중 하나이다.

모든 페이지에서 공통으로 보여야 되므로 layout.html 템플릿에 내용을 추가해야 한다.

//layout.html
//<body> 태그에 안에 해당 코드 삽입
	<!-- 네비게이션바 -->
	<nav th:fragment="navbarFragment" class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
		<div class="container-fluid">
			<a class="navbar-brand" href="/">SBB</a> <!-- SBB를 누르면 메인으로 이 -->
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
				aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
					<li class="nav-item">
						<a class="nav-link" href="#">로그인</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- 기본 템플릿 안에 삽입될 내용 Start -->
	<th:block layout:fragment="content"></th:block>
	<!-- 기본 템플릿 안에 삽입될 내용 End -->

Untitled

페이지를 줄이면 햄버거 메뉴가 뜨게 설정

햄버거 메뉴를 활용하기 위해서는 부트스트랩 자바스크립트 파일(bootstrap.min.js)을 static 디렉터리로 복사해야 한다. 복사 후 layout.html 하단에 다음 코드를 추가한다.

	<!-- Bootstrap JS -->
	<script th:src="@{/bootstrap.min.js}"></script>

추가하게 되면 햄버거 메뉴를 클릭했을 때 로그인 버튼이 보여지게 된다.

Untitled

내비게이션 바 분리하기

/templates/navbar.html 추가

<!--/templates/navbar.html -->
<!-- 네비게이션바 -->
<nav th:fragment="navbarFragment" class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
	<div class="container-fluid">
		<a class="navbar-brand" href="/">SBB</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
				<li class="nav-item">
					<a class="nav-link" href="#">로그인</a>
				</li>
			</ul>
		</div>
	</div>
</nav>
<!--/templates/layout.html -->
<!-- <nav> 부분을 모두 지운 뒤 해당 코드 추가 -->
	<nav th:replace="~{navbar :: navbarFragment}"></nav>

3-2. 페이징 기능 추가하기

현재 페이지에서는 페이징 기능이 없어 게시물을 작성하면 한 페이지에 게시물이 다 표시되게 된다(스크롤바를 내려야 함). 이를 해결하기 위해 페이징 기능을 적용해 줄 수 있다.

페이징(paging): 입력된 정보나 데이터를 여러 페이지에 나눠 표시하고, 사용자가 페이지를 이동할 수 있게 하는 기능

대량 테스트 데이터 만들기

스프링 부트의 테스트 프레임워크를 이용해 대량의 테스트 데이터를 만들 수 있다.

////SbbApplicationTests.java
package com.mysite.sbb;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import com.mysite.sbb.question.QuestionService;

@SpringBootTest
class SbbApplicationTests {
    @Autowired
    private QuestionService questionService;
    @Test
    void testJpa() {
        for (int i = 1; i <= 300; i++) { //300개의 테스트 데이터 생성
            String subject = String.format("테스트 데이터입니다:[%03d]", i);
            String content = "내용무";
            this.questionService.create(subject, content);
        }
    }
}