['21.07.19] 이미지 검색 추가

['21.07.18] 간단한 프론트 개발#1

 

앞선 글에서 말한 것 처럼, 이미지 크기가 너무 작았다. 

 

따라서 영화 API를 통해 썸네일을 가져오는 것이 아니라 별도 이미지 검색을 해서 가져와보도록 하자.

 

전체적인 구성은 영화 검색 API를 사용하는 것과 동일하다.

 

 

1.application.yml

---

Uri Components Builder를 활용하여 url을 생성할 때 직접 입력하는 것이 아닌 String 객체로 불러올 수 있도록

 

application.yml에 image 검색에 대한 요청 url을 입력하자.

 

해당 url을 naver 개발자 센터에서 확인할 수 있다.

네이버 개발자 센터 - 검색 - 이미지

naver:
  url:
    search:
      movie: https://openapi.naver.com/v1/search/movie.json
      image: https://openapi.naver.com/v1/search/image

 

 2. Request 보내고 Response 받기

---

이전에 NaverClient class에 영화 검색에 대한 serchMovie() method를 작성했다.

 

이 번에는 searchImage() method를 작성한다. 구성은 동일하다.

 

Url 생성 --> JSON형태 Header 생성 --> HttpEntity생성 --> ResponseType 지정 --> ResponseEntity 생성

 

    public SearchImageRes searchImage(SearchImageReq searchImageReq){


        //url 생성
        URI uri = UriComponentsBuilder.fromUriString(naverImageSearchUrl)
                .queryParams(searchImageReq.toMultiValueMap())
                .build()
                .encode()
                .toUri();


        //JSON형태 header생성
        var headers = new HttpHeaders();
        headers.set("X-Naver-Client-Id", naverClientId);
        headers.set("X-Naver-Client-Secret", naverClientSecret);
        headers.setContentType(MediaType.APPLICATION_JSON);


        //HttpEntity

        //httpentity에 헤더
        var httpEntity = new HttpEntity<>(headers);

        var responseType = new ParameterizedTypeReference<SearchImageRes>(){};


        var responseEntity = new RestTemplate().exchange(
                uri,
                HttpMethod.GET,
                httpEntity,
                responseType
        );

        return responseEntity.getBody();

    }

 

 

3. 영화 검색 후, 이미지 검색하는 로직 추가

---

기존에 영화검색후 Response에서 이미지 링크를 가져오는 것을 삭제해준다.

 

이후 동일 query로 이미지 검색을 실시하여, 해당 reponse에서 이미지 link를 가지고

 

MovieDTO 객체에 setImage()를 진행한다.

        if(searchMovieRes.getTotal() > 0){
            //naver 영화 검색 결과가 존재
            MovieDTO movieDTO = new MovieDTO();

            var temp = searchMovieRes.getItems().stream().findFirst();

            if(temp.isPresent()) {



                movieDTO.setTitle(temp.get().getTitle().replaceAll("<[^>]*>",""));
                movieDTO.setActor(temp.get().getActor());
                movieDTO.setDirector(temp.get().getDirector());
                movieDTO.setLink(temp.get().getLink());
                movieDTO.setSubtitle(temp.get().getSubtitle());
                //movieDTO.setImage(temp.get().getImage());
                movieDTO.setUserRating(temp.get().getUserRating());
              

            }

            //이미지 검색
            SearchImageReq searchImageReq = new SearchImageReq();
            searchImageReq.setQuery("영화"+query);
            SearchImageRes searchImageRes =  naverClient.searchImage(searchImageReq);

            if(searchImageRes.getTotal() > 0){
                var tempImageItem = searchImageRes.getItems().stream().findFirst();

                if(tempImageItem.isPresent()){
                    var imageItem = tempImageItem.get();
                    movieDTO.setStateCode(StateCode.SC_OK);
                    movieDTO.setImage(imageItem.getLink());
                }
            }
            else {

                log.info("해당 이미지가 없습니다.");
                movieDTO.setStateCode(StateCode.SC_NoResult);

            }

            return movieDTO;
        }
        else{
            //naver 영화 검색 결과가 없음
            log.info("{} 의 Naver 영화검색 결과가 없습니다.",query);
            MovieDTO movieDTO = new MovieDTO();
            movieDTO.setStateCode(StateCode.SC_NoResult);

            return  movieDTO;
        }
    }

 

 

4. 결과 화면

---

 

이미지가 좀더 고퀄로 변경되었다 ㅋㅋㅋ

 

5. 앞으로 해야할 일

---

1) 이미지는 Naver 이미지 검색 API를 따로 사용하여 가져오기. --> 고화질

2) Delete 되도록 코드 이해하고, 고쳐놓기

3) DB에 저장된 영화에 대하여 comment추가할 수 있도록 기능 추가.

 

 

 

6. GitHub : 210718, Front End#2, image search

---

bsh6463/MovieManager