KeyBoard 이벤트 활용해보기

나의 코드

1. BoardController

// localhost:8080?title=제목
    @GetMapping("/board")
    public ResponseEntity<?> boardList(@RequestParam(name = "title", required = false) String title) {
        List<BoardResponse.DTO> boardList = boardService.게시글목록보기(title);
        return ResponseEntity.ok(Resp.ok(boardList));
    }
    @GetMapping("/")
    public String list(@RequestParam(name = "title", required = false) String title, HttpServletRequest request) {
        //  HttpServletRequest request 얘는 가방같은 역할 화면에 뿌리기 위해 담아둠
        List<BoardResponse.DTO> boardList = boardService.게시글목록보기(title);
        request.setAttribute("models", boardList);
        return "board/list";
   }

• 코드설명

2. BoardService

 public List<BoardResponse.DTO> 게시글목록보기(String title) {

        List<BoardResponse.DTO> dtos = new ArrayList<>();
        List<Board> boardList = null;
        if(title == null){
            Sort sort = Sort.by(Sort.Direction.DESC, "id");
            boardList = boardRepository.findAll(sort);

        }else{
            boardList = boardRepository.mfindAll(title);
        }

        for(Board board : boardList){
            BoardResponse.DTO dto = new BoardResponse.DTO(board);
            dtos.add(dto);
        }
        return dtos;
    }

• 코드설명

3. list.mustache

{{>layout/header}}

<div class="container p-5">

    <div class="d-flex justify-content-end mb-2">
        <form>
            <input class="form-control me-2" type="text" placeholder="Search" id="title">
        </form>
    </div>

    <div id="board-box">
        {{#models}}
            <div class="card mb-3">
                <div class="card-body">
                    <h4 class="card-title mb-3">{{title}}</h4>
                    <a href="/board/{{id}}" class="btn btn-primary">상세보기</a>
                </div>
            </div>
        {{/models}}
    </div>
</div>

<script>

    // 1. 디자인에 데이터 렌더링
    function boardItem(board){
        return `<div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title mb-3">${board.title}</h4>
                <a href="/board/${board.id}" class="btn btn-primary">상세보기</a>
            </div>
        </div>`;
    }

    // 2. 통신+CSR 클라이언트사이드렌더링
    async function getBoardList(title){
        let response = await fetch(`/board?title=${title}`);
        let responseBody = await response.json();

        if(response.ok){
            $("#board-box").empty(); // remove 는 dom을 제거, empty는 안에 있는 내용을 제거
            let boardList = responseBody.body;
            for (board of boardList){
                let dom = boardItem(board);
                $("#board-box").append(dom);
            }
        }else{
            alert(responseBody.msg);
        }
    }

    // 3. 키보드 이벤트 처리
    $("#title").on("keyup", function(e){
        // 1. 값 가져오기
        let title = e.target.value;

        // 2. fetch 요청
        getBoardList(title);
    });
</script>

{{>layout/footer}}

• 코드설명

javascript
코드 복사
function boardItem(board){
    return `<div class="card mb-3">
        <div class="card-body">
            <h4 class="card-title mb-3">${board.title}</h4>
            <a href="/board/${board.id}" class="btn btn-primary">상세보기</a>
        </div>
    </div>`;
}

javascript
코드 복사
async function getBoardList(title){
    let response = await fetch(`/board?title=${title}`);
    let responseBody = await response.json();

    if(response.ok){
        $("#board-box").empty(); // remove는 DOM 자체를 제거, empty는 안에 있는 내용만 제거
        let boardList = responseBody.body;
        for (board of boardList){
            let dom = boardItem(board);
            $("#board-box").append(dom);
        }
    }else{
        alert(responseBody.msg);
    }
}

javascript
코드 복사
$("#title").on("keyup", function(e){
    // 1. 값 가져오기
    let title = e.target.value;

    // 2. fetch 요청
    getBoardList(title);
});