Plmography 프로젝트 작업 로그 #13 - 백엔드로 api 옮기기 (22.12.25 TIL)

주말 동안 독감 때문에 죽다 살아난 일요일,,오늘은 프론트에서 받아온 api 를 백엔드로 옮기고, 프론트에서는 서버에서 받은 데이터를 화면에 출력하는 작업을 진행했다.

api key 를 백엔드에서 어떻게 숨기나 고민했는데, jwt 토큰을 발급하는 것처럼 application.properties 에 숨겨놓고 @Value 어노테이션으로 가져오면 되겠다 싶어서 그대로 해봤더니 성공했다!

이렇게 key 를 불러온 후에 실제 영화 정보를 가져오는 작업을 해주었다. BufferReader로 읽어온뒤 InputStreamReader 로 받아온 값을 UTF-8로 변환해 주어야 깨지지 않고 잘 들어온다. 그리고 Service로 그 값을 넘겨준다. 

 

@GetMapping("/saveApi")
    public String saveApi() throws IOException {
        String result = "";

        try {
            for (int i = 1; i <= 500; i += 1) {
                String apiURL = "https://api.themoviedb.org/3/movie/popular?api_key=" + KEY
                        + "&language=ko&page=" + i;

                URL url = new URL(apiURL);

                HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
                urlConnection.setRequestMethod("GET");
                urlConnection.setRequestProperty("Content-type", "application/json");

                BufferedReader bf = new BufferedReader(new InputStreamReader(urlConnection.getInputStream(), "UTF-8"));

                result = bf.readLine();

                getApiService.saveApiInfo(result);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        return "ok";
    }

서비에서는 전달 받은 result 를 JsonParser 로 파싱 후 원래 Array로 되어있던 값을 쪼개어 Json 형식으로 만들고 그 정보를 JsonObject contents에 넣는다. 그 값을 Repository 에 넣어주는데, ImgUrl을 추가로 넣어주어야 + .jpg 형태로 이미지 값을 불러올 수 있다. API에서 값으로 받아올때 "" 로 .jpg가 감싸져 있어서 정규식을 사용하여 없애주어야 한다.

 

public String saveApiInfo(String result) {

        JsonObject jsonObject = JsonParser.parseString(result).getAsJsonObject();

        JsonArray list = (JsonArray) jsonObject.get("results");

        for (int i = 0; i < list.size(); i += 1) {
            JsonObject contents = (JsonObject) list.get(i);

            String imageUrl = "https://image.tmdb.org/t/p/original";
            String match = "[\"]";

            contentRepository.save(
                    Content.builder()
                            .description(contents.get("overview").toString().replaceAll(match, ""))
                            .korTitle(contents.get("title").toString().replaceAll(match, ""))
                            .engTitle(contents.get("original_title").toString().replaceAll(match, ""))
                            .releaseDate(contents.get("release_date")
                                    == null ? ""
                                    : contents.get("release_date").toString().replaceAll(match, ""))
                            .genres(contents.get("genre_ids").toString().replaceAll(match, ""))
                            .imageUrl(imageUrl + contents.get("poster_path").toString().replaceAll(match, ""))
                            .createdAt(dateTime)
                            .updatedAt(dateTime)
                            .build()
            );
        }
        return "ok";
    }

다음은 contentRespository 를 작성한 후 model 인 Content 를 만들어주면 된다. Content 를 respository 에 저장하기 위해서는 @Builder 어노테이션을 선언해주어야 한다.

이렇게 한 후 프론트에서 apiService 를 만든 후 axios 로 값을 받아오면 프론트로 출력 완성! (페이지네이션도 같이 해주었다.)