request.setAttribute(name(이름), value(데이터));
서버(컨트롤러)에서 JSP(뷰)로 데이터를 전달할 때 사용하는 메서드
| name | JSP(뷰)에서 사용할 변수명 (문자열) |
| value | 저장할 데이터 (객체, 리스트, 문자열 등) |
JSP(뷰)에서는 request.getAttribute("boardDatas")로 데이터를 가져와서 바로 사용할 수 있다!!
별도의 변수 선언은 필요하지 않다.
request.setAttribute()를 사용하는 경우
1. 뷰(JSP)에서 데이터를 출력해야 할 때 사용
2. 게시글 상세 조회 (DETAILPAGE)
request.setAttribute()를 사용하지 않는 경우
1. 데이터를 JSP에서 직접 사용할 필요가 없을 때
2. response.sendRedirect("페이지.jsp")를 사용할 때 → 새로운 요청이 발생하므로 request 데이터가 유지되지 않음
3. 주로 로그인, 로그아웃, 회원가입, 삭제 등의 작업 후 페이지 이동 시 사용
<input type="hidden">
폼 전달 시 컨트롤러에게 필요한 정보를 전달하기 위한 코드.
hidden으로 설정하여 사용자에게는 보이지 않는다.
action이나 처리에 필요한 값들을 보낸다.
Document.getElementById()
주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고 이를 나타내는 element 객체를 반환.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="model.dto.ReplyDTO, java.util.ArrayList"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 상세 페이지</title>
<script type="text/javascript">
function deleteConfirm(rnum, bnum) {
console.log("삭제 호출");
var flag = confirm("정말 삭제하시겠습니까?"); // 사용자에게 확인창을 띄우는 코드
if (flag) { // 만약 사용자가 확인(true)을 선택하면
location.href = "controller.jsp?action=DELETEREPLY&rnum=" + rnum + "&bnum=" + bnum;
} // 컨트롤러에게 댓글 삭제 요청을 보낸다. 글 번호와 댓글 번호는 함수에 들어온 그대로!
}
function updateReply(rnum, bnum, content) {
console.log("변경 호출"); // 로그
var elem = document.getElementById("reply_" + rnum); //수정할 댓글의 <li> 요소를 찾음
elem.innerHTML = `<form action="controller.jsp" method="POST"> // 해당 <li> 요소의 출력폼을 입력폼으로 변경한다.
<input type="hidden" name="action" value="UPDATEREPLY">
<input type="hidden" name="rnum" value="` + rnum + `">
<input type="hidden" name="bnum" value="` + bnum + `"> // 글 번호, 댓글 번호, updatereply 액션은 그대로
<input type="text" name="content" value="` + content + `" required> // 내용만 입력할 수 있도록 함
<input type="submit" value="변경완료"> // 버튼 누르면 컨트롤러.jsp로 이동해서 컨트롤러가 처리
</form>`;
} // 기존 댓글을 수정 폼으로 변경
// 수정 완료 버튼을 누르면 controller.jsp?action=UPDATEREPLY로 요청을 보냄
</script>
</head>
<body>
<h1>글 상세</h1>
<table border="1">
<tr> <!-- 컨트롤러에서 보내준 값들을 출력! -->
<td>번호</td>
<td><%=request.getAttribute("bnum")%></td>
</tr>
<tr>
<td>제목</td>
<td><%=request.getAttribute("title")%></td>
</tr>
<tr>
<td>내용</td>
<td><%=request.getAttribute("content")%></td>
</tr>
<tr>
<td>작성자</td>
<td><%=request.getAttribute("writer")%></td>
</tr>
<tr>
<td>조회수</td>
<td><%=request.getAttribute("cnt")%></td>
</tr>
<tr>
<td>작성일</td>
<td><%=request.getAttribute("regdate")%></td>
</tr>
<% if(request.getAttribute("writer").equals((String)session.getAttribute("mid"))){ %>
<tr>
<td colspan="2" align="right"><a href="controller.jsp?action=UPDATEBOARDPAGE&bnum=<%=request.getAttribute("bnum")%>">글 내용 변경</a> <a href="controller.jsp?action=DELETEBOARD&bnum=<%=request.getAttribute("bnum")%>">글 삭제</a></td>
</tr>
<% } %>
</table>
<!-- 만약 글 작성자와 현재 세션에 있는 아이디가 같다면 글 내용 바꿀 수 있게 변경 링크 만들어주기... UPDATEBOARDPAGE로 이동 -->
<!-- 글 삭제 버튼도 같이 -->
<hr>
<div id="reply">
<form action="controller.jsp" method="POST">
<input type="hidden" name="action" value="INSERTREPLY">
<input type="hidden" name="writer" value="<%= session.getAttribute("mid") %>">
<input type="hidden" name="bnum" value="<%= request.getAttribute("bnum") %>">
<%
if (session.getAttribute("mid") == null) {
%>
<input type="text" value="댓글을 작성하려면 로그인" disabled>
<%
} else {
%>
<input type="text" name="content" required>
<input type="submit" value="댓글작성">
<%
}
%>
</form> <!-- hidden을 통해서 action명과 현재 세션에 로그인 한 사용자 아이디, 글 번호를 컨트롤러에게 보내준다. -->
<!-- 만약 비로그인 상태라면 로그인하라는 창 띄우고 아니면 댓글 작성할 칸을 보여줌 -->
</div>
<h3>댓글 목록</h3>
<ul>
<% // 댓글 목록을 가져온다. 단순 검색정보나 단순 출력일 경우에는 request로 전달.
// request의 반환형이 Object이므로 강제형변환
ArrayList<ReplyDTO> datas = (ArrayList<ReplyDTO>) request.getAttribute("datas");
if (datas == null || datas.isEmpty()) { // 댓글 데이터가 없으면
%>
<li>출력할 댓글이 없습니다!</li>
<%
} else { // 있으면
for (ReplyDTO data : datas) { // 댓글 데이터를 순회하면서
%>
<li id="reply_<%= data.getRnum() %>"> <!-- 댓글 번호 출력xxx 댓글번호별로 id 지정! id = "reply_댓글번호. 댓글 식별 가능해짐-->
<strong><%= (data.getWriter() == null || data.getWriter().equals("null")) ? "탈퇴한 회원" : data.getWriter() %></strong>
: <%= data.getContent() %> <!-- 작성자의 아이디를 가져왔을 때 null이면 탈퇴한 회원입니다 표시 -->
<%
if (data.getWriter() != null && data.getWriter().equals(session.getAttribute("mid"))) {
%> <!-- null이 아니고 현재 세션에 로그인 한 아이디와 같다면 -->
<button onclick="updateReply(<%= data.getRnum() %>, <%= data.getBnum() %>, '<%= data.getContent() %>')">수정</button>
<!-- 글번호, 댓글번호, 바꿀 내용 -->
<button onclick="deleteConfirm(<%= data.getRnum() %>, <%= data.getBnum() %>)">삭제</button>
<!-- 글번호, 댓글번호 -->
<% // 삭제, 수정 버튼 띄워줌
// 뒤에 있는 요소들은 JS에 넣어줄 인자값들
}
%>
</li>
<%
}
}
%>
</ul>
<hr>
<h5><a href="controller.jsp?action=MAINPAGE">메인으로 돌아가기</a></h5>
</body>
</html>실행 흐름 정리
▶ 사용자가 "글 내용 변경" 버튼 클릭
- controller.jsp?action=UPDATEBOARDPAGE&bnum=1로 이동
- 컨트롤러에서 boardDAO.selectOne(boardDTO) 실행 → 해당 글의 데이터 조회
- updateBoard.jsp로 이동하여 기존 내용이 포함된 입력 폼 표시
▶ 사용자가 "내용 변경" 버튼 클릭
- 수정된 내용을 입력한 후 "내용 변경" 버튼 클릭
- controller.jsp?action=UPDATEBOARD 요청 전송 (POST 방식)
- 컨트롤러에서 boardDAO.update(boardDTO) 실행 → DB에서 글 내용 수정
- 수정된 글을 반영한 DETAILPAGE로 이동하여 결과 확인
function updateReply(rnum, bnum, content) {
console.log("변경 호출"); // 로그
var elem = document.getElementById("reply_" + rnum); //수정할 댓글의 <li> 요소를 찾음
elem.innerHTML = `<form action="controller.jsp" method="POST"> // 해당 <li> 요소의 출력폼을 입력폼으로 변경한다.
<input type="hidden" name="action" value="UPDATEREPLY">
<input type="hidden" name="rnum" value="` + rnum + `">
<input type="hidden" name="bnum" value="` + bnum + `"> // 글 번호, 댓글 번호, updatereply 액션은 그대로
<input type="text" name="content" value="` + content + `" required> // 내용만 입력할 수 있도록 함
<input type="submit" value="변경완료"> // 버튼 누르면 컨트롤러.jsp로 이동해서 컨트롤러가 처리
</form>`;
}innerHTML은 JavaScript에서 HTML 요소의 내부 내용을 변경할 때 사용하는 속성
HTML 태그 안의 내용을 JavaScript 코드에서 동적으로 변경할 수 있도록 함
백틱(`) ( 템플릿 리터럴)
기존 큰따옴표(" ")나 작은따옴표(' ') 대신 사용할 수 있음
✔ 문자열 안에서 변수나 표현식을 쉽게 삽입할 수 있도록 지원 (${} 문법 사용)
HTML을 여러 줄로 작성 가능 → 가독성 증가
✔ ${}를 사용해 변수를 쉽게 삽입 가능
✔ + 연산자를 사용하지 않아 코드가 깔끔해짐
out.println 뒤에 response.sendRedirect를 사용하면 오류 발생.
>> out.println으로 이미 응답을 한 상태에서 또 응답을 보내는 것이므로
동일하게 자바스크립트로 보내면 해결 완료
'웹 개발' 카테고리의 다른 글
| POJO란? (0) | 2025.03.29 |
|---|---|
| JSTL과 EL (0) | 2025.03.28 |
| FrontController (0) | 2025.03.27 |
| ACTION/CONDITION (0) | 2025.03.11 |
| JSON (0) | 2025.03.06 |