개발 낙서장

[JSP] API 연동 및 데이터 출력 본문

Java

[JSP] API 연동 및 데이터 출력

권승준 2024. 12. 13. 21:41

책을 검색하고 조회할 수 있는 간단한 기능을 만들어 봤다.
JSP를 활용했으며 네이버 오픈 API를 통해 도서 정보를 가져왔다.

구조는 다음과 같다.

  1. 클라이언트에서 키워드로 검색
  2. 서버에서 키워드를 가지고 오픈 API 호출
  3. 받은 데이터를 JSON으로 반환
  4. JSP에서 데이터 출력

검색

<div class="input-div">
    <form action="<c:url value="/books/search"/>" method="get">
        <label>
            <input type="text" name="query" style="width: 80%;">
        </label>
        <button type="submit">검색</button>
    </form>
</div>

JSTL의 태그 중 하나인 c:url을 사용해 해당 페이지 주소를 호출하도록 했으며 form과 input을 통해 입력값을 쿼리스트링으로 넘겨줄 수 있게 하였다.

a href가 아니라 c:url 태그를 사용하는 이유는 Context Path 때문이라고 한다. 유동적인 서버 상황에 따라 경로를 찾아주기 때문에 유지보수 측면에서 매우 좋은 것 같다.

Controller

    @GetMapping("/search")
    public ModelAndView searchBook(@ModelAttribute SearchBookRequestDto requestDto) {
        ModelAndView mv = new ModelAndView("test");

        mv.addObject("search", bookService.searchBook(requestDto));

        return mv;
    }

ModelAndView를 통해 JSP 창과 데이터를 담아 반환할 수 있도록 했다.

Service

    public String searchBook(SearchBookRequestDto requestDto) {
        URI uri = UriComponentsBuilder
            .fromHttpUrl(baseUrl)
            .path(path)
            .queryParam("query", requestDto.getQuery())
            .queryParam("display", requestDto.getDisplay() == null ? 20 : requestDto.getDisplay())
            .queryParam("start", requestDto.getStart() == null ? 1 : requestDto.getStart())
            .queryParam("sort", requestDto.getSort() == null ? "date" : requestDto.getSort())
            .encode(StandardCharsets.UTF_8)
            .build().toUri();

        RequestEntity<Void> req = RequestEntity
            .get(uri)
            .header(headerClientId, clientId)
            .header(headerClientSecret, clientSecret)
            .build();

        ResponseEntity<SearchBookResponseDto> exchange = restTemplate.exchange(req, SearchBookResponseDto.class);

        // JSON으로 변환
        ObjectMapper objectMapper = new ObjectMapper();
        String jsonResponse = "";
        try {
            jsonResponse = objectMapper.writeValueAsString(exchange.getBody());
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }

        return jsonResponse;
    }

RestTemplate를 활용해 외부 API를 호출하였고 받은 값을 ObjectMapper를 통해 Json으로 변환해주었다.
그냥 String으로 반환하면 JSP에서 깔끔하게 사용할 수 없고 JSON으로 변환하지 않으면 아예 사용할 수 없다.

JSP

<body>
<h1>S E A R C H</h1>
<div class="book-info-area">
    <script>
        let books = ${search}.items;

        let html = "";
        $.each(books, function (i, v) {
            html += `
                <div class="book-card">
                    <img src="\${v.image}" alt="Book Image">
                    <p class="book-title">\${v.title}</p>
                    <p class="book-author">\${v.author}</p>
                    <p class="book-description">\${v.description}</p>
                    <a href="\${v.link}" class="book-link" target="_blank">View Details</a>
                </div>`;
        })

        $(".book-info-area").append(html);
    </script>
</div>
</body>

ModelAndView에서 보내준 Key 값으로 사용하면 된다.
주의해야 할 점은 JavaScript의 백틱과 JSP의 백틱 표현식이 같은데 JSP가 먼저 실행되기에 js의 백틱은 인식되지 않는다.
따라서 js의 백틱을 JSP와 함께 사용하는 경우라면 js에서는 ${}이 아니라 앞에 백슬래쉬와 함께 \${} 이런 식으로 사용해야 js 백틱도 원활히 동작한다.

ChatGPT와 구글링의 힘을 빌려 css도 간단히 작성해보았다.
토이 프로젝트를 제작하는 셈 치고 조금씩 확장해갈 생각이다.

Redis를 사용해 인기 검색어 혹은 인기 검색 도서를 메인에 보여준다던지
회원과 관리자, 게시판을 추가해 사용자와 관리자 관점으로 도메인을 확장한다던지 등..

저작자표시

'Java' 카테고리의 다른 글

[Spring] Redis로 인기 검색어 구현  (0) 2024.12.18
[JSP] SpringBoot + JSP 설정  (0) 2024.12.12
[JAVA] compareTo  (0) 2024.11.26
[Spring] @RequestPart 테스트 HttpMediaTypeNotSupportedException  (0) 2024.05.17
Spring + Redis Cache  (0) 2024.05.13
'Java' Related Articles more
Comments