현재 문제점
1. jsp 의 검색 기능이 모양만 갖춰져 있고 기능 구현이 덜 되어 있음2. 공백 검색 및 sql 인젝션에 취약함
3. 사용자가 검색했던 검색 조건 반환이 이루어지지 않음
> 우선 위 문제점을 해결하기 이전에 view 까지 구현을 하고 문제점을 해결하려고 한다.
view 구현하기
1. 현재 검색을 하는 view 부분이 형태만 있고 구현이 되어 있지 않아 list.jsp의 구현을 마무리 하려고 한다.view 구현 펼치기
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>note list</h1>
<div class="searchOption">
<form action="/note/list" method="get">
제목 검색<input type="checkbox" value="title" name="types">
내용 검색<input type="checkbox" value="content" name="types">
검색어 : <input type="text" name="keyword">
<button type="submit">Search</button>
</form>
</div>
<c:forEach items="${dtoList}" var="dto">
${dto.id} | <a href="/note/read?id=${dto.id}">title : ${dto.title}</a> <br>
<hr>
</c:forEach>
<button id="register-button" type="button">register</button>
<script>
document.querySelector("#register-button").addEventListener("click",function(e){
self.location = "/note/register"
},false)
</script>
</body>
</html>
form 태그의 action 과 method 가 지정되어 있지 않아 작동하지 않았는데 둘 다 지정한 후 확인해보았다.
2. view 구현 확인(url 에 파라미터 직접 입력하여 확인)
3. 현재 view 의 문제점
1. url에 파라미터로 types의 값과 keyword의 값이 들어가있고, 검색결과도 잘 나왔지만
해당 값들이 다시 검색결과 view로 반환되지 않아 검색결과에 사용자의 검색조건이 나오지 않는 문제가 있다.<br><br>
2. 이전 06-04 개발일지에 따라 서버측에서 두 값을 반환하지 않고 view에서 바로 반환받는 방법을 먼저 구현해본다.4. 구현하기 & 문제 발생
펼치기
<form id="searchForm" action="/note/list" method="get">
<%-- DEBUG--%>
<c:forEach items="${param.types}" var="type">
<script>
console.log("types" + "${type}")
</script>
</c:forEach>
<%-- DEBUG--%>
<c:forEach items="${param.types}" var="type">
<c:if test="${type eq 'title'}">
<c:set var="titleStatus" value="true"/>
</c:if>
<c:if test="${type eq 'content'}">
<c:set var="contentStatus" value="true"/>
</c:if>
</c:forEach>
제목 검색<input id="titleCheckbox" type="checkbox" value="title" name="types" <c:if test="${titleStatus}">checked</c:if>>
내용 검색<input id="contentCheckbox" type="checkbox" value="content" name="types" vc:if test="${contentStatus}">checkedv/c:if>>
검색어 : <input type="text" value="${param.keyword}" name="keyword">
<button type="submit">Search</button>
</form>
검색 조건인 title, content 두개의 체크박스 인풋과 검색어에 해당하는 keyword 인풋 총 3개의 인풋의 값을
컨트롤러로 넘겨 검색을 한다.검색결과가 /note/list 로 응답이 올때 list.jsp 에서 types 를 순회하며 title 과 content 의 값이 있으면 변수를 생성하고 값을 true 로 한 다음 해당 체크박스에 체크를 하도록 한다(검색조건 표시 유지)
keyword 도 그대로 가져와 검색어 입력창에 유지시켜준다.
여기까지 계획이 완벽하다 생각했으나 사소한건데 스트레스 받는 오류를 맞이하게 되었다.
검색을 했을때 title과 content 둘 다 체크를 하고 java 를 검색 했을때
types:title
types:content
title : true
content: true
의 출력 결과를 예상했는데 둘 다 체크를 했음에도 불구하고 title만 출력이 되는 오류가 있었다. url 과 payload 를 확인해도 title 과 content 라는 밸류가 존재 했으므로 파라미터의 값은 잘 전달 되었으나 출력과정에 문제가 있음을 예상할 수 있었다.
문제 해결
문제가 되는 부분 : types 라는 동명의 파라미터 2개가 응답에서 첫번째 밸류만 출력된다.
찾은 원인 : types 라는 파라미터들이 컨트롤러에서 SearchDTO 의
List<String> types로 바인딩 되는데 나는 당연히 응답때도 List 형태의 types라는 이름으로 파라미터를 내가 반환하고 있는 줄 알았다.
컨트롤러를 다시 보니 아니었다.@GetMapping("/list") public void list(Model model, SearchDTO searchDTO) { log.info("노트 컨트롤러 list(검색 테스트용) 호출"); log.info(searchDTO); model.addAttribute("dtoList", noteService.getSearchList(searchDTO)); }
컨트롤러 그 어디에도 SearchDTO 든 List 타입의 types든 반환하는게 없었다!!! 나 혼자 착각하고 있었다..
list.jsp 에서 param 이 아닌 paramValues를 사용하여 출력했더니 전부 기대한대로 출력되었다.
<%-- DEBUG--%>
<c:forEach var="type" items="${paramValues.types}">
<script>
console.log("types: " + "${type}");
</script>
<c:choose>
<c:when test="${type eq 'title'}">
<c:set var="titleStatus" value="true"/>
<script>
console.log("title: " + "${titleStatus}");
</script>
</c:when>
<c:when test="${type eq 'content'}">
<c:set var="contentStatus" value="true"/>
<script>
console.log("content: " + "${contentStatus}");
</script>
</c:when>
</c:choose>
</c:forEach>
<%-- DEBUG--%>
'포트폴리오 개발일지' 카테고리의 다른 글
| 2024-06-13 검색어 공백 제한하기 1 (0) | 2024.06.17 |
|---|---|
| 2024-06-12 검색조건 유지 두번째 방법 DTO 반환하기 (0) | 2024.06.12 |
| 2024-06-07 노트검색 1.3 오류해결 (0) | 2024.06.09 |
| 2024-06-04 게시판검색 1.3 및 오류발생 (2) | 2024.06.08 |
| 개발일지 쓰는것도 만만치 않다.. (0) | 2024.06.07 |
