Pagination - Dynamic list

9.12(목)

1. data-*

<tr th:each="dto: ${result.list}">
                    <td>[[${dto.bno}]]</td>
                    <td>
                    <td th:data-bno="${dto.bno}">
                        <img th:if="${dto.fileName != null}" th:src="'http://localhost:8081/attach/s_' + ${dto.fileName}">
                        [[${dto.title}]]
                    </td>
                    <td>[[${dto.writer}]]</td>
                    <td>[[${#temporals.format(dto.regDate, 'yyyy-MM-dd') }]]</td>
                    <td>[[${dto.viewCnt}]]</td>
                </tr>

👉 th:data-bno=${dto.bno} 처럼 data-bno 변수에 dto.bno 값을 할당하여 script태그에서 사용이 가능하다.

script

const bno = target.getAttribute("data-bno")

👉 여기서 getAttribute는 html요소에서 특정 속성값을 읽어오는 역할인데, data-bno의 속성값을 읽어와서 bno변수에 대입하는것.

---

2. 예외처리 - (기존에 없는 bno를 주소창에 입력시)

👉 기존에 없는 bno값을 입력했을때는 NoSuchElementException 해당 예외가 발생하는데, 오류페이지가 뜨지않고 사용자가 만든 404.html로 이동시키는 방법.

2-1. BoardControllerAdvice.java

package org.demo.springdemo.board.controller;

@ControllerAdvice
@Log4j2
public class BoardControllerAdvice { // 존재하지않는 BNO를 주소창에 입력했을때

    @ExceptionHandler(NoSuchElementException.class)
    public String notFound(NoSuchElementException e) {

        log.error("not found : "+e.getMessage());

        return "redirect:/404.html";
    }

}

---

3. 인터셉터를 이용한 cookie - 조회

3-1. ViewCntInterceptor

package org.demo.springdemo.board.controller.interceptor;


@Log4j2
public class ViewCntInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        log.info("preHandle-------------");


        int value = (int)(Math.random()*100);

        log.info("-----------------" + value);

        Cookie viewCookie = new Cookie("view", "123" + value);
        viewCookie.setMaxAge(60*60*24);
        viewCookie.setPath("/");
        response.addCookie(viewCookie);

        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        log.info("postHandle-------------");
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        log.info("afterCompletion-------------");
    }
}

👉 preHandle : 요청이 컨트롤러의 핸들러 메서드에 도달하기 전에 호출, 요청처리전에 사전 작업을 수행하므로 해당 구간에서 cookie를 생성한다.

---

3-2. BoardController

    @GetMapping("/read/{bno}")
    public String read(@CookieValue("view")String viewValue, @PathVariable("bno") Long bno, Model model) {

        log.info("Reading board: "+bno);
        log.info("viewValue: "+viewValue);


        boolean existed = false;

        if(viewValue != null){
            existed = Arrays.stream(viewValue.split("%")).anyMatch(str -> str.equals(bno+""));
        }

        if(!existed) {

            log.info("View Count... update........................");

        }

        Optional<BoardReadDTO> result = boardService.get(bno);

        BoardReadDTO boardReadDTO = result.orElseThrow();

        model.addAttribute("board", boardReadDTO);

        return "/board/read";
    }

👉 @CookieValue("view")를 통해 view라는 키를 가진 cookie긔 값을 읽어내고, viewValue는 cookie가 % 로 연결되어있는 형태이다.

👉 %로 이어져있는 쿠키를 나누어 게시글 번호와 비교하여 이미 본 게시글인지 판단하고, existed가 false인경우엔 조회수를 업데이트 해야한다.

👉 Optional인 result값에 service의 get메소드를 넣은 값을 할당한뒤에 이 result가 존재하는 result일때만 줄수있기 때문에 orElseThorw를 사용한것이고, BoardReadDTO에 넣어주는 이유는 나중에 HTML에서 사용하기 위해서는 Optional의 형태로 사용할수 없으므로 DTO의 형태로 변환을 시켜주는것이다.

---

4. 좋아요 버튼 - DB

insert into tbl_reply (bno,reply, replyer)
values (100,'Reply...','user00')
;

👉 100번게시글에 Reply...라는 댓글을 user00이라는 사람이 달았다.

create table tbl_reply_favorite (
    rno int not null,
    mid varchar(50) not null,
    regDate timestamp default now()
);

👉 tbl_reply_favorite 테이블생성

ALTER table tbl_reply_favorite
add constraint pk_reply_favorite
primary key (rno,mid)
;

👉 favorite테이블에는 복합pk를 가지는데, rno와mid이다.
👉 여기서 rno는 댓글의 순서이고,mid는 좋아요를 누른 사람이다.

insert into tbl_reply_favorite (rno,mid) values (1,'r1');
insert into tbl_reply_favorite (rno,mid) values (1,'r2');
insert into tbl_reply_favorite (rno,mid) values (1,'r3');
insert into tbl_reply_favorite (rno,mid) values (1,'r4');

insert into tbl_reply_favorite (rno,mid) values (2,'r1');
insert into tbl_reply_favorite (rno,mid) values (2,'r2');

👉 더미데이터를 통해서 100번게시글에 대해서, 1번댓글에는 r1,r2,r3,r4인원이 좋아요를 눌렀고 2번댓글에는 r1,r2인원이 좋아요를 누른상태이다.

select rno, min(reply), min(replyer), count(fno), sum(choice)
from(
        select reply.rno rno, reply, replyer, fa.rno fno,
               if(fa.mid = 'r1',1,0) choice
        from
            tbl_reply reply left join tbl_reply_favorite fa on reply.rno = fa.rno
        where
            reply.bno = 100
    ) r1

group by rno

👉 현재 주체는 r1이 주체라고 가정하고 본다.

👉 이때 해당 sql을 사용한다면, 우선 댓글의 전체인 rno, 댓글의 내용, 댓글작성자, 좋아요를 누른사람의 인원수, 본인이 좋아
요를 눌렀는지 확인 을 첫째줄 select로 알수있다.

👉 헷갈릴수있는 부분이 sum(choice)인데, 우선 내부 sql문을 보면 if문이 보이는데, 만약 fa의 mid가 r1일때 1이고 r1이 아니면 0 이라고 하자, 그때, sum값이 1 이라고 하면 r1이 한번은 포함되어있다는 말이니까 해당 rno에는 내가 좋아요를 누른 횟수가 있다는 말이 되는것이다.

👉 이렇게 sum을 이용해서 sql문을 짠 이유는 group by 를 통해 하나에 댓글에 대해 여러 좋아요가 있는데, 그것을 한줄로 통합시키기 위해서 집합의 느낌으로 만들었기 때문이다.

---

5. 동적 list.html

👉 현재 list페이지는 크게 4가지로 구분된다.
👉 페이지 버튼을 누르는 pagination, 검색버튼을 누르는 searchBtn, 초기화버튼인 claerBtn, 각각의 게시물버튼인 table로 나뉘어진다

5-1. script태그 내부에서 공통적인 값

const {page, size, type, keyword} = [[${pageRequest}]]

    console.log(page,size,type,keyword)

    const selectTag = document.querySelector("select[name='type']")
    const keywordInput = document.querySelector("input[name='keyword']")

    if(type){
        selectTag.value=type
    }


    const bno = [[${bno}]]

    const result = [[${result}]]

    const myModal = new bootstrap.Modal(document.querySelector('#exampleModal'), null)

    if(bno){
        myModal.show()
    }

👉 첫번째는 구조할당을 통해 pageRequest의 값을 page, size, type, keyword로 각각 받고있다.
👉 selectTag와 keywordInput은 select속성중에 name값이 type인부분을 참조하는 selectTag이고, input속성중에 name값이 keyword인 부분을 참조하는 keywordInput이 있다.

👉 이때 type이 있을때 type은 select이므로 선택한 type을 할당받고있다.

👉 Mymodal에서는 modal을 querySelect를 통해 참조하고, 받아온 bno가 있을 경우에 modal창을 띄운다

---

5-2. pagination

document.querySelector(".pagination").addEventListener("click", e=> {
        e.preventDefault()
        e.stopPropagation()

        const target = e.target

        const pageNum = target.getAttribute("href")


        if(!pageNum){
            return;
        }


        let formStr = `
              <form id="tempForm" action="/board/list">
                <input type="hidden" name="page" value='${pageNum}'>`

        if(type){
            formStr += `<input type="hidden" name="type" value='${type}'>`
        }
        if(keyword){
            formStr += `<input type="hidden" name="keyword" value='${keyword}'>`
        }

        formStr += `</form>`

        document.querySelector("#tempDiv").innerHTML = formStr
        document.querySelector("#tempForm").submit()



    },false)

👉 우선 페이지 버튼을 눌렀을때에 해당하는 이벤트를 걸어주고, 버튼을 눌렀을때 href의 속성을 갖고오게 되면 pageNum을 가져오게 된다.

👉 pageNum이 없으면 return으로 끝나게 되고, form태그를 통해 page를 hidden으로 board/list에 넘기게 된다. 이후에는 페이지를 넘겼을때도 기존에 검색해뒀던 type과 keyword를 물고있기 위해서 type과 keyword가 있을경우에 formStr로 묶어 tempDiv의 innerHTML으로 보내게된다.

👉 여기서 tempDiv는 html의 가장 외부에 존재하므로 다른 modal에 영향을 주지않고 값을 전달할수있다.

👉 이후에 tempForm으로 submit을 하는데 경로는 아까와 똑같은 board/list이다.

---

5-3. searchBtn

document.querySelector(".searchBtn").addEventListener("click", e=> {
        e.preventDefault()


        let formStr = `
          <form id="tempForm" action="/board/list">
            <input type="hidden" name="page" value="1">` // 검색시 항상 1페이지로

        if(keywordInput.value && selectTag.value){
            formStr += `<input type="hidden" name="type" value='${selectTag.value}'>`
            formStr += `<input type="hidden" name="keyword" value='${keywordInput.value}'>`
        }
        formStr+= `</form>`

        document.querySelector("#tempDiv").innerHTML = formStr
        document.querySelector("#tempForm").submit()

    })

👉 해당 부분은 select인 type을 정하고 keyword를 입력한 이후에 search 버튼을 누르게된 경우이다.

👉 우선 form의 경로는 아까와 똑같고, 다른부분은 value가 1 이라는것인데, 아까는 PageNum 이였지만, 지금은 검색을 하게되면 항상 1번페이지로 가야하므로 1을 value값으로 주었다.

👉 그리고 keyword와 selectTag가 있을경우에 hidden값으로 넣어줄수있따.

---

5-4. clearBtn

document.querySelector(".clearBtn").addEventListener("click", e=> {
        e.preventDefault();
        self.location="/board/list"
    })

👉 해당버튼을 누르게되면 /board/list로 새로고침을 하기때문에 url에 담겨있던 page, keyword, type등이 없어지므로 물고있던 값 역시 없어진다.

---

5-5. table

document.querySelector(".table").addEventListener("click", e=>{
        e.preventDefault()
        e.stopPropagation()

        const target = e.target
        const bno = target.getAttribute("data-bno") // bno추출
        if(!bno){return}

        let formStr = `
        <form id="tempForm" action="/board/read/${bno}">
           <input type="hidden" name="page" value='${page}'>`

        if(type){
            formStr += `<input type="hidden" name="type" value='${type}'>`
        }
        if(keyword){
            formStr += `<input type="hidden" name="keyword" value='${keyword}'>`
        }

        formStr+= `</form>`

        document.querySelector("#tempDiv").innerHTML = formStr

        document.querySelector("#tempForm").submit()


    },false)

👉 해당 부분은 table로 게시글을 선택했을때 게시글의 read로 넘어가게 된다.
우선 getAttribute를 통해 설정해둔 data-bno값을 추출하고 bno가 없으면 return된다.

👉 bno가 있을경우엔 /board/read/${bno}의 경로로 이동되고, type과 keyword가 있을경우에 역시 물고간다.

---

6. Filter / Interceptor / Aop

Filter : 웹 애플리케이션의 요청과 응답을 가로채는 컴포넌트

Interceptor : spring MVC와 같은 프레임워크에서 요청 처리 특정 시점에 개입할수있는 매커니즘

AOP : 핵심 비지니스 로직과 별도로 공통적인 관심사항(로깅, 트랜잭션)