[JAVA]12. 게시판 목록 화면 구현 : 테이블과 forEach를 활용한 게시글 출력

 

[ 목차 ]

1. 게시판 목록 화면
    1-1. 게시판 목록을 표로 구성하는 이유

2. 게시판 표 기본 구성
    2-1. 표 제목 만들기 : <thead> 태그
    2-2. 게시글 데이터의 반복 출력 : <tbody> + forEach

3. 게시글이 없을 때 표시하기
    3-1. 빈 목록 안내 메시지 구현 : <c:if> 태그

4. 마무리

 

1. 게시판 목록 화면

이전 글에서는 제목 태그(<title>, <h2>)를 사용해 페이지의 기본 제목을 구성하는 방법을 다뤘습니다.

 

https://silverji.tistory.com/262

[JAVA]11. 게시판 목록 화면 구현 : 제목 태그(title, h2)

 

이번에는 글에서는 게시판 목록 화면에서 가장 중요한 부분으로,

실제 게시글들을 깔끔하게 보여주는 게시판 목록 표를 만들어보겠습니다.

 

1-1. 게시판 목록을 표로 구성하는 이유

게시판은 여러 개의 글을 한꺼번에 보여주기 때문에,

각 글의 제목, 작성자, 내용, 작성일 등의 여러 정보를 표(table) 형태로 정리하는 것이 가장 보기 좋습니다.

 

표는 정보를 한눈에 쉽게 파악할 수 있는 가장 기본적인 형태입니다.

 

2. 게시판 표 기본 구성

<table> 태그는 웹페이지에서 표(테이블)을 만들 때 사용하는 태그입니다.

게시판 목록을 보기 좋게 정리하려면, 이 <table> 안에 여러 행과 열을 만들어 데이터를 나열해야 합니다.

 

표 안에는 아래와 같은 태그들이 들어갑니다.

• <thead> : 표의 머리글 부분으로, 보통 표의 가장 위에 위치하며,표의 구조를 알려주는 역할을 합니다.
• <tbody> : 표의 본문 부분으로, 실제 데이터가 들어가는 영역입니다.
• <th> : 표의 제목 셀로, 각 열의 제목을 표시할 때 사용합니다.
• <td> : 표의 데이터 셀로, 실제 게시글 내용 같은 일반 데이터를 넣는 영역입니다.

2-1. 표 제목 만들기 : <thead> 태그

<thead> 태그는 표에서 제목 행(머리글)을 감싸는 역할을 합니다.

표의 가장 윗부분에 위치해서 각 열이 어떤 정보를 담고 있는지 알려줍니다.

 

예를 들어, 게시판 목록에서는

제목, 작성자, 내용, 작성일 같은 항목명이 바로 이 <thead> 안에 들어갑니다.

 

<thead> 안에는 <tr> 태그와 <th> 태그를 사용합니다.

• <th> : 제목 셀로, 보통 글씨가 굵고 가운데 정렬이 되어있어 각 열의 이름을 나타냅니다.
• <tr> : 표의 한 줄을 의미합니다.

예시 코드를 살펴봅시다.

 

<table border="1" cellpadding="10" cellspacing="0" style="width:100%;">
    <thead>
        <tr>
            <th>제목</th>
            <th>작성자</th> 
            <th>내용</th>
            <th>작성일</th>
        </tr>
    </thead>
</table>

 

이 코드를 실행하면 아래와 같은 화면이 완성됩니다.

 

 

2-2. 게시글 데이터의 반복 출력 : <tbody> + forEach

<tbody> 태그는 표의 본문 부분으로, 실제 게시글 데이터가 들어가는 영역입니다.

이곳에서 게시판에 올라온 여러 개의 글을 한 줄씩 보여줄 수 있습니다.

 

하지만 게시글 수가 매번 달라지기에, 

하나하나 직접 코드를 작성하기보다는 반복문을 사용해서 자동으로 출력하는 방법이 필요합니다.

 

이를 위해 JSP 에서 제공하는 <c:forEach> 태그를 사용해서 작업하겠습니다.

 

아래 코드를 살펴보겠습니다.

<table border="1" cellpadding="10" cellspacing="0" style="width:100%;">
    <thead>
        <tr>
            <th>제목</th>
            <th>작성자</th> 
            <th>내용</th>
            <th>작성일</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach var="post" items="${boardList}">
            <tr>
                <td><a href="detail?id=${post.postId}">${post.title}</a></td>
                <td>${post.content}</td>
                <td>${post.userNm}</td>
                <td>${post.regDt}</td>
            </tr>
        </c:forEach>
    </tbody>
</table>

 

임의로 데이터를 넣고 화면을 출력하면 아래와 같은 화면이 완성됩니다.

 

 

이제 코드를 하나씩 살펴봅시다.

 

• ${boardList} 는 서버에서 전달받은 게시글 전체 목록입니다.
• var = "post" 는 목록에서 꺼낸 한 개의 게시글을 post 라는 이름으로 사용하겠다는 의미입니다.
• <c:forEach> 안의 코드는 게시글의 수만큼 반복해서 실행됩니다.
• 각 게시글의 제목, 내용, 작성자, 작성일 정보를 ${post.속성명} 형태로 화면에 출력합니다.
• 제목 부분은 링크를 걸어서 클릭하면 해당 게시글의 상세 페이지로 이동할 수 있게 합니다.

 

이렇게 하면 게시글 수가 몇 개든 상관없이 자동으로 목록이 출력되므로, 매번 코드를 바꿀 필요가 없습니다.

 

3. 게시글이 없을 때 표시하기

게시판에 글이 하나도 없으면 빈 표만 덩그러니 남아 있어서 사용자에게 불편함을 줄 수 있습니다.

그렇기에 게시글이 없다는 사실을 명확하게 알려주는 것이 좋습니다.

 

이럴 때 JSP에서 제공하는 <c:if> 태그를 사용해 조건에 따라 화면에 내용을 보여줄 수 있습니다.

 

3-1. 빈 목록 안내 메시지 구현 : <c:if> 태그

<c:if> 태그를 추가한 전체 코드는 아래와 같습니다.

 

<table border="1" cellpadding="10" cellspacing="0" style="width:100%;">
    <thead>
        <tr>
            <th>제목</th>
            <th>작성자</th> 
            <th>내용</th>
            <th>작성일</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach var="post" items="${boardList}">
            <tr>
                <td><a href="detail?id=${post.postId}">${post.title}</a></td>
                <td>${post.content}</td>
                <td>${post.userNm}</td>
                <td>${post.regDt}</td>
            </tr>
        </c:forEach>
        <c:if test="${empty boardList}">
	            <tr>
	                <td colspan="5">게시글이 없습니다.</td>
	            </tr>
        </c:if>
    </tbody>
</table>

 

이제 코드를 하나씩 살펴보겠습니다.

 

• test 속성에는 조건식을 적습니다.
• ${empty boardList} 는 boardList 가 비어있을 때, 즉 게시글이 하나도 없을 때를 의미합니다.
• <tr> <td> ... </td> </tr> 안에 게시글이 없을 때 표시할 내용을 입력합니다.
• 조건이 참일 때만 <c:if> 안의 내용이 화면에 출력됩니다.

이렇게 하면 게시글이 하나도 없을 때 "게시글이 없습니다." 라는 문구가 표 안에 표시됩니다.

 

 

4. 마무리

이번 글에서는 게시판 목록 화면에서 중요한 부분인 <table> 태그와 JSP의 <c:forEach> 태그를 통해

게시글을 효율적으로 화면에 출력하는 방법을 살펴보았습니다.

 

이론에 관한 자세한 설명은 추후에 정리해서 올릴 예정이니, 참고 부탁드립니다.

 

수고하셨습니다.

---

📌  참고

 

https://silverji.tistory.com/262

[JAVA]11. 게시판 목록 화면 구현 : 제목 태그(title, h2)

 

https://silverji.tistory.com/267

JSP 기초 : 반복 데이터를 출력하는 forEach 태그