[JSP] 게시판 만들기 11 _ 게시판 보기 기능

 

1. BbsDAO 클래스에 getBbs() 메서드 만들기

 
`getBbs(int bbsID)` 메서드는 특정 bbsID를 기반으로 게시글 데이터를 데이터베이스에서 조회하여 반환한다.
즉 하나의 글 내용을 불러오는 메서드이다.
 
처음에 적은 코드(틀림)

 public Bbs getBbs(int bbsID) {
    String SQL = "SELECT * FROM BBS WHERE bbsID = ?";
    try (PreparedStatement psmt = conn.prepareStatement(SQL);
             ResultSet rs = psmt.executeQuery()) {
        psmt.setInt(1, bbsID);
        if (rs.next()) {
            Bbs bbs = new Bbs();
            bbs.setBbsID(rs.getInt(1));
            bbs.setBbsTitle(rs.getString(2));
            bbs.setUserID(rs.getString(3));
            bbs.setBbsDate(rs.getString(4));
            bbs.setBbsContent(rs.getString(5));
            bbs.setBbsAvailable(rs.getInt(6));
            return bbs;
        }
    } catch (Exception e) {
        e.printStackTrace();
    } 
    return null;
}

 
위 코드로 썼다가 오류 나서 코드 수정했다.
finally 안 쓰고 자원해제를 쉽게 하려고 하다가 대참사

psmt.executeQuery()는 ResultSet을 반환하는 메서드라서 psmt = conn.prepareStatement(SQL)이랑 같은 try블럭에 포함시킬 수 없다.
 
수정된 코드

public Bbs getBbs(int bbsID) {
    String SQL = "SELECT * FROM BBS WHERE bbsID = ?";
    PreparedStatement psmt = null;
    ResultSet rs = null;

    try {
        psmt = conn.prepareStatement(SQL);
        psmt.setInt(1, bbsID);
        rs = psmt.executeQuery();
        if (rs.next()) {
            Bbs bbs = new Bbs();
            bbs.setBbsID(rs.getInt(1));
            bbs.setBbsTitle(rs.getString(2));
            bbs.setUserID(rs.getString(3));
            bbs.setBbsDate(rs.getString(4));
            bbs.setBbsContent(rs.getString(5));
            bbs.setBbsAvailable(rs.getInt(6));
            return bbs;
        }
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // 명시적으로 리소스를 닫기
        try {
            if (rs != null) {
                rs.close();
            }
            if (psmt != null) {
                psmt.close();
            }
            if (conn != null && !conn.isClosed()) {
                conn.close(); // 연결 닫기
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    return null;
}

 

---

2. view.jsp 페이지 만들기

 
실제로 게시글 내용을 보여주는 페이지이다.
글 제목을 클릭하면 컨텐츠를 보여주는 역할을 한다. 
레이아웃이 유사한 `write.jsp` 복사해서 생성해주었다. 
 
이렇게 작성자가 본인이면 수정, 삭제 버튼이 하단에 뜨도록 만들어 주고 테스트!

<div class="container mt-5">
    <div class="row card shadow-sm">
        <table class="table table-striped" style="text-align: center; border: 1px solid #dddddd">
            <thead>
                <tr>
                    <th colspan="3" style="background-color: #eeeeee; text-align: center;">게시판 글보기 </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="width: 20%;">글제목</td>
                    <td colspan="2"><%= bbs.getBbsTitle() %></td>
                </tr>
                <tr>
                    <td>작성자</td>
                    <td colspan="2"><%= bbs.getUserID() %></td>
                </tr>
                <tr>
                    <td>작성일자</td>
                    <td colspan="2"><%= bbs.getBbsDate().substring(0, 11) + bbs.getBbsDate().substring(11, 13) + "시" + bbs.getBbsDate().substring(14, 16) + "분" %></td>
                </tr>
                <tr>
                    <td>내 용</td>
                    <td colspan="2" style="min-height: 200px; text-align: left;"><%= bbs.getBbsContent() %></td>
                </tr>
            </tbody>
        </table>
        <a href="bbs.jsp" class="btn btn-primary" style="width: auto;">목록</a>
        <%
            if(userID != null && userID.equals(bbs.getUserID())) {
        %>
            <a href="update.jsp?bbsID=<%= bbsID %>" class="btn btn-primary">수정</a>
            <a href="deleteAction.jsp?bbsID=<%= bbsID %>" class="btn btn-primary">삭제</a>
        <% 		
            }
        %>
    </div>
</div>

 
어쩐지 잘 되더니 오류났다

 
public Bbs getBbs(int bbsID) 메서드에 이상 있는 것 같아 확인해보았다.
아까 전에 자원 해제를 간단하게 줄이다가 잘못된 부분이 있었다. 
 
try (PreparedStatement psmt = conn.prepareStatement(SQL); ResultSet rs = psmt.executeQuery()) 
 
이 부분이 잘못되었다.
try문 안에다가 psmt.executeQuery()까지 써 줘 버려서 오류가 난 것. 

psmt는 PreparedStatement로 SQL을 준비하는 데 사용되고, psmt.executeQuery()는 ResultSet을 반환하는 메서드이기 때문에 두 개를 같은 try 구문에 포함시킬 수 없다. try문을 두 번 써서 psmt가 반환한 ResultSet을 try 블록 내에서 처리하도록 하던가 finally를 써서 자원해제를 따로 해 주어야 한다. 나는 finally를 쓰는 방법으로 수정했다.
 
다시 실행해보니 이번에는 꺽쇠가...; 

꺽쇠 수정 했는데 총체적 난국이다.
 
- 일단 내용 부분 min-height 안먹힘
- 목록버튼이 width 100% 먹혔고 수정, 삭제 버튼 안보임...;; 

 
일단  card 랑 shadow-sm 클래스 빼 주고 삭제와 수정 버튼에 style="width: auto;"  줘서 크기를 줄였다.
버튼 사이에 ` ` 넣어 주어서 스페이스바 한 칸씩 띈 간격을 만들어주었다.
 

 

 
이제 내용 칸 min-height만 늘리면 된다!
min-height가 안먹혀서 그냥 명시적으로 height 로 했다. 
어차피 글 내용에 따라 높이가 늘어나기 때문에 상관 없을 것 같다.

 
목록 버튼도 눌러주고 
잘 작동한다. 

 
이제 특수문자 처리를 해 주어야 한다.
만약 처리하지 않고 이대로 특수문자를 입력해서 글을 써 보면 입력한 양식과 다르게 나온다.
하지만 요즘에는 브라우저가 좋아져서 알아서 처리가 된다.  

하지만 특수문자 처리는 보안과 콘텐츠 정확성 측면에서 여전히 중요하다. 물론 브라우저가 일부 특수문자를 자동으로 처리해 주긴 하지만, 보안 문제(특히 XSS)와 예상치 못한 출력을 방지하기 위해서 수동으로 특수문자를 처리하는 습관을 가지는 것이 좋다.

 

아래처럼 글을 쓰고 내용을 확인 해 보면

 
작성한 글과 다르게 출력된다. 일단 엔터를 쳤는데 인식이 안 되고 이어져서 출력된다. ㅋㅋ;

 
특수문자 처리하는 법은 replaceAll() 메서드를 이용한다.

현재 <만 처리했지만, HTML 안전성을 보장하려면 다른 특수문자(>, &, ", ')도 변환해야 한다.

<%= bbs.getBbsContent().replaceAll(" ","&nbsp;").replaceAll("<", "&lt;") %>

 
원래는 StringEscapeUtils 라이브러리를 활용하면 HTML 이스케이핑을 더 간단히 처리할 수 있다. 난 지금 JSP만으로 만들고 있어서 replaceAll()메서드로 특수문자 처리를 해주고 있다. 만약 Maven 프로젝트를 하면 pom.xml 파일에 의존성 주입을 해줘서 아래처럼 모든 특수문자 처리를 해 줄 수 있다.
 

<%= StringEscapeUtils.escapeHtml4(bbs.getBbsContent()) %>

 
나는 이렇게 하나씩 처리해주었다. 

 
새로고침해서 페이지 확인
나머지는 잘 처리된 것 같은데 공백이  ;; &nbsp; 로 바뀌어서 보기가 안 좋다;
 

 
그냥 replaceAll(" ", "&nbsp;")는 빼 버렸다.
 
JSP에서는 기본적으로 <c:out> 같은 태그가 HTML 특수문자를 이스케이프 처리한다고 한다.
나는 지금 <%=를 사용하기 때문에 HTML이 그대로 렌더링된다.

escapeXml를 해제 해 주어야 공백이 &nbsp;로 치환되지 않고 정상적으로 출력이 잘 된다고 한다.
이걸 해제 해 주려면 JSTL + escapeXml="false" 해서 JSTL <c:out> 태그에서 escapeXml 속성을 비활성화해 주어야 한다.
아,,, 귀찮아서 패스한다....왜냫면 
 
JSP에서 JSTL을 사용하려면 JSTL 라이브러리(JAR 파일)을 프로젝트에 추가해야 한다는데?
나는 Maven 프로젝트가 아니기 때문에 JAR 파일을 수동으로 다운로드하고, WEB-INF/lib 폴더에 추가해주어야 한다.

빨리 빨리 진행하기 위해 해제하는 법 정도만 익히고 굳이 jar 파일 다운받지는 않을 것이다^^;;;

 
여기까지 했으면 이제 크로스 사이트 스크립팅(Cross-Site Scripting, XSS) 공격을 해 보자
 
크로스 사이트 스크립팅은 웹 애플리케이션에서 사용자 입력을 제대로 검증하지 않고 그대로 출력할 때 발생하는 보안 취약점이라고 한다. 예를 들면 게시글 제목에 악성 스크립트를 넣어서 누르면 이를 실행하도록 유도하는 것이다.
 

제목에 Hello World!를 띄우는 스크립트문을 작성해 보았다. 
그대로 스크립트가 실행되어서 Hello World! 라는 창이 뜨는 걸 기대했는데
브라우저에서 자동으로 막아주는지 아예 제목이 안 적히고 공백으로 출력된다. 

 
 
view.jsp 전체 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter"%>
<%@ page import="bbs.Bbs"%>
<%@ page import="bbs.BbsDAO"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
	<%
		String userID = null;
		if (session.getAttribute("userID") != null) {
			userID = (String) session.getAttribute("userID");
		}
		int bbsID = 0;
		if(request.getParameter("bbsID") != null) {
			bbsID = Integer.parseInt(request.getParameter("bbsID"));
		}
		if (bbsID == 0)  {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('유효하지 않은 글입니다.')");
			script.println("location.href = 'bbs.jsp'");
			script.println("</script>");
		}
		Bbs bbs = new BbsDAO().getBbs(bbsID);
	%>
	<nav class="navbar navbar-expand-lg bg-body-tertiary">
		<div class="container-fluid">
			<a class="navbar-brand" href="#">JSP 웹사이트</a>
			<button class="navbar-toggler" type="button"
				data-bs-toggle="collapse" data-bs-target="#navbarNav"
				aria-controls="navbarNav" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarNav">
				<ul class="navbar-nav">
					<li class="nav-item"><a class="nav-link" aria-current="page"
						href="main.jsp">Home</a></li>
					<li class="nav-item"><a class="nav-link active" href="bbs.jsp">게시판</a></li>
				</ul>
				<%
				if (userID == null) { // 로그인 하지 않은 사용자에게 보여줄 화면
				%>
				<ul class="navbar-nav ms-auto">
					<li class="nav-item dropdown"><a
						class="nav-link dropdown-toggle" href="#" role="button"
						data-bs-toggle="dropdown" aria-expanded="false"> 접속하기<span
							class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a class="dropdown-item" href="login.jsp">로그인</a></li>
							<li><a class="dropdown-item" href="join.jsp">회원가입</a></li>
						</ul></li>
				</ul>
				<%
				} else { // 로그인 한 사용자에게 보여줄 화면
				%>
				<ul class="navbar-nav ms-auto">
					<li class="nav-item dropdown"><a
						class="nav-link dropdown-toggle" href="#" role="button"
						data-bs-toggle="dropdown" aria-expanded="false"> 회원관리<span
							class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a class="dropdown-item" href="logoutAction.jsp">로그아웃</a></li>
						</ul></li>
				</ul>
				<%
					}
				%>
			</div>
		</div>
	</nav>

	<div class="container mt-5">
		<div class="row">
			<table class="table table-striped"
				style="text-align: center; border: 1px solid #dddddd">
				<thead>
					<tr>
						<th colspan="3"
							style="background-color: #eeeeee; text-align: center;">게시판
							글보기</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td style="width: 20%;">글제목</td>
						<td colspan="2"><%= bbs.getBbsTitle() %></td>
					</tr>
					<tr>
						<td>작성자</td>
						<td colspan="2"><%= bbs.getUserID() %></td>
					</tr>
					<tr>
						<td>작성일자</td>
						<td colspan="2"><%= bbs.getBbsDate().substring(0, 11) + bbs.getBbsDate().substring(11, 13) + "시" + bbs.getBbsDate().substring(14, 16) + "분" %></td>
					</tr>
					<tr>
						<td>내 용</td>
						<td colspan="2" style="height: 200px; text-align: left;"><%=bbs.getBbsContent()
							.replaceAll("<", "&lt;") // 작은 괄호 <
							.replaceAll(">", "&gt;") // 큰 괄호 >
							.replaceAll("&", "&amp;") // 앰퍼샌드 &
							.replaceAll("\"", "&quot;") // 큰따옴표 "
							.replaceAll("'", "&#x27;") // 작은따옴표 '
							.replaceAll("\n", "<br>")); // 줄바꿈 처리 %></td>
					</tr>
				</tbody>
			</table>
			<a href="bbs.jsp" class="btn btn-primary" style="width: auto;">목록</a>&nbsp;
			<%
			if (userID != null && userID.equals(bbs.getUserID())) {
			%>
			<a href="update.jsp?bbsID=<%=bbsID%>" class="btn btn-primary"
				style="width: auto;">수정</a>&nbsp; <a
				href="deleteAction.jsp?bbsID=<%=bbsID%>" class="btn btn-primary"
				style="width: auto;">삭제</a>
			<%
			}
			%>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 
 
오늘은 여기까지;