[국민취업지원제도 일경험프로그램 21일차] 게시판 검색, 페이징 비동기 방식

21일 차 특이사항 

1. 페이징 처리를 다시 만들어야 될 것 같다. 엄청 헤매는 중이다. 

 

2. 모르면 배우자. 솔직히 잘 모르겠다. 기존에 만든 페이지네이션 코드를 어떻게 컨트롤러로 보낼지 감이 안 잡힌다. 검색기능을 비동기 처리하는 것처럼 form 태그로 묶고, 버튼을 누르면 ajax가 작동하는 코드를 만들었는데 실패다. 

 

<div class="pagination">
    <!-- **처음페이지로 이동 -->
    <c:if test="${pageMap.curBlock > 0}">
        <li><a href="javascript:list('1')">처음</a></li>
    </c:if>

    <!-- **이전페이지 블록으로 이동 -->
    <c:if test="${pageMap.curBlock >= 1}">
        <li><a href="javascript:list('${pageMap.prevPage}')">이전</a></li>
    </c:if>
	
    <!-- **하나의 블럭에서 반복문 수행 시작페이지부터 끝페이지까지 -->
    <c:forEach var="num" begin="${pageMap.blockBegin}" end="${pageMap.blockEnd}">
        <!-- **현재 페이지이면 하이퍼링크 제거 -->
        <c:choose>
            <c:when test="${num == pageMap.curPage}">
                <li><span style="color: red">${num}</span></li>
            </c:when>
            <c:otherwise>
                <li><a href="javascript:list('${num}')">${num}</a></li>
            </c:otherwise>
        </c:choose>
    </c:forEach>

    <!-- **다음페이지 블록으로 이동 -->
    <c:if test="${pageMap.curBlock <= pageMap.totBlock}">
        <li><a href="javascript:list('${pageMap.nextPage}')">다음</a></li>
    </c:if>

    <!-- **끝페이지로 이동 -->
    <c:if test="${pageMap.curPage <= pageMap.totPage}">
        <li><a href="javascript:list('${pageMap.totPage}')">끝</a></li>
    </c:if>
</div>

 

Ajax 비동기 방식의 2가지 방법 

1. 같은 jsp를 복제하고, 컨트롤러에서 반환하는 방법 

2. @ResponsBody를 써서 일부 데이터만 jsp로 가져오는 방법. 

 

게시판 같은 경우 1번이 훨씬 편하다. 2번은 javascript로 코드 변환이 필요하다. 

 

3. 대분류 - 소분류 - 소소분류 - 소소소분류 → 이런 경우에 jsp 만드는 것 대신 일부 데이터만 가져오는 2번이 좋다. 

 

게시판 페이징, 검색 개념 

1. 구글링 할 때, '게시판 처음, 중간 끝, 다음' 이런식으로 구현하고자 하는 기능을 자세히 입력해서 검색해 보자. 

 

2. 게시판은 시작부터 페이징이 적용되어 있다. 페이징을 하기 위한 초기값을 설정해줘야 한다. 

if(paramMap.isEmpty()) {
paramMap.put("pageNo", 1);
paramMap.put("listSize", 10);	
}

3. select row_number() over(order by seq desc) rnum, bs.* from board_study bs  이렇게 쓰면 rnum과 seq가 정렬된다. 

 

4. 검색을 해놓고 자른다.  검색 쿼리문이 먼저 나와야 된다. 

 

5. 4페이지는 31페이지~40페이지, 5페이지는 41페이지~50페이지. 이 원리를 알아야 된다. 페이징 계산식은 카피해서 사용한다.  

 

6. 개발자도구 Disable JavaScript 체크하면 복사가 가능하다. 

 

7. map에 해도 상관은 없으나 페이징 vo를 만들어서 쓰는 것이 좋다. 

 

8. vo는 map을 안 썼을 때 만드는 것이다. 

 

9. sql 반복되면 include 태그 쓰면 좋다. 

 

10. vo에서 이전, 다음, 맨끝, 1~16까지 계산식이 작동된다.  

 

11. colspan - 가로줄 병합 , rowspan - 세로줄 병합. 

 

12. 1111 . 부적합한 열 유형 - 어디서 잘못됐는지 표시가 되니까 보고 수정하라. 

 

13. SQL STATEMENT - ID가 잘못된 경우가 많다. 

 

14. 쿼리문에 오타 발생하는 경우 BAD SQL이 나온다. 

 

15. <td colspan="3"> 하면 페이징 번호 부분이 테이블의 3열에 맞춰서 묶인다. 

<td colspan=" 7">로 주면 테이블에 맞춰 깔끔하게 묶이는 모습을 볼 수 있다. 

 

colspan="7"

 

16. 이건 왜 줘야 되는 걸까? 1페이지는 paramap에 아무것도 없기 때문에 페이징 1에 해당하는 게시글 10개를 보여준다. 그 이후 2페이지를 누르면 pageNo, listSize 있어야 pageVO에서 계산이 가능하다. form 태그 안에 아래 값을 넣어주지 않으면 부적합한 열 유형 오류가 나온다. 

<input type = "hidden" name = "pageNo" id = "pageNo" value = "1">
<input type = "hidden" name = "listSize" id = "listSize" value = "10">

 

17. 검색어 받고 함수 작동, 쿼리문으로 가서 조건에 맞는 리스트를 뽑아온다. list에 데이터가 쌓여있다. 데이터가 담긴 시점. paramMap은 return이 되기 전까지 데이터가 남아있다.

 

18. javascript에서 c:if문 가능. 

 

19. pageMap의 curBlock이 0보다 크면 li태그를 생성한다. 

<c:if test="${pageMap.curBlock > 0}">
        <li><a href="javascript:list('1')">처음</a></li>
</c:if> 해석

 

다시 정리해보자

오늘은 게시판 페이징, 검색 기능을 만들고 비동기 방식 처리까지 완료했다. 이해하는데 시간이 많이 걸렸다. 조금씩 알아가고 있다는 점에서 나를 칭찬한다. 지금까지 했던 내용을 정리해서 처음 게시판을 처음 만드는 사람도 따라 할 수 있도록 글을 써봐야겠다.