Loading...

Spring/Blog-V2 / / 2022. 3. 24. 21:01

스프링 47강. 와일드카드

반응형

자바 1.7 이후부터 우항 제네릭은 타입 생략이 가능하다.
List<String> lists = new ArrayList<>();

그리고 어차피 메서드에는 리턴타입이 정해져 있으니까 그 타입만 리턴할 수 있는데
이때 와일드 카드 사용하면 정해진 타입이 아닌

동적으로 리턴이 가능하다. <?>
무엇이든 리턴가능!

 

@RestController
public class BoardTblApiController {

    private BoardTblRepository boardTblRepository;

    public BoardTblApiController(BoardTblRepository boardTblRepository) {
        this.boardTblRepository = boardTblRepository;
    }

    @GetMapping("/search")
    public ResponseDto<?> search(@RequestParam(defaultValue = "") String keyword) {

        List<BoardTbl> boards = boardTblRepository.mSearch(keyword);

        // MessageConverter 발동 - 자바 오브젝트를 JSON으로 변환
        return new ResponseDto<>(1, "성공", boards); // 제네릭 생략 가능
    }
}

 

 

 

<script>
    async function search() {
        let response = await fetch("/api/search");
        let responseParse = await response.json();
        console.log(responseParse);
    }

    search();
</script>

 

이제 이 code를 통해 제이쿼리로 그림을 그려줘야 한다.

 

<script>
    $("#btn-search").click(() => {
        let keyword = $("#keyword").val();

        console.log(keyword);

        search(keyword);
    });

    async function search(keyword) {

        let response = await fetch("/api/search?keyword=" + keyword);
        let responseParse = await response.json();

        console.log(responseParse);

        if (responseParse.code == 1) {
            $("#board-box").empty();

            for (boardTbl of responseParse.data) {
                $("#board-box").append(trRender(boardTbl));
            }
        }
    }

    // tr 그림 그리는 함수 -> 하나의 행을 리턴하는 함수
    function trRender() {
        return `<tr>
            <td>id</td>
            <td>title</td>
            <td>content</td>
            <td>createDate</td>
            </tr>`;
    }

    search("");
</script>

 

 

 

<script>
    $("#btn-search").click(() => {
        let keyword = $("#keyword").val();

        console.log(keyword);

        search(keyword);
    });

    async function search(keyword) {

        let response = await fetch("/api/search?keyword=" + keyword);
        let responseParse = await response.json();

        console.log(responseParse);

        if (responseParse.code == 1) {
            $("#board-box").empty();

            for (boardTbl of responseParse.data) {
                $("#board-box").append(trRender(boardTbl));
            }
        }
    }

    function trRender(boardTbl) {
        return `<tr>
            <td>${boardTbl.id}</td>
            <td>${boardTbl.title}</td>
            <td>${boardTbl.content}</td>
            <td>${boardTbl.createDate}</td>
        </tr>`;
    }

    search("");
</script>

 

 

 

파일을 리턴 받으면 전체 페이지가 새로고침 되어 검색바 까지 비워졌는데

부분 랜더링을 함으로써 board-box만 새로고침이 일어나

검색창에 글자가 지워지지 않는다.

 

ajax 통신 : 비동기 자바스크립트 통신, json 다운로드하는 것!

fetch(), axios(), $.ajax()

 

좋은 점

 

1. 페이지 전체 리로딩 안 함 -> 부분 리로딩 가능 (json을 토대로 CSR 하면 되니까)

2. UX가 좋아짐(검색하면 글자 안 날아감!!)

 

 

 

[출처]

 

https://cafe.naver.com/metacoding

 

메타코딩 : 네이버 카페

코린이들의 궁금증

cafe.naver.com

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

 

메타코딩

문의사항 : getinthere@naver.com 인스타그램 : https://www.instagram.com/meta4pm 깃헙 : https://github.com/codingspecialist 유료강좌 : https://www.easyupclass.com

www.youtube.com

반응형