개괄
이제 겨우 포트 3000과 8080은 연결했다.
그런데 내가 만들어야 하는것은 FE에서 준 query를 가지고 youtube에 get 방식으로 요청을 보내서 받은 response를 파싱해서 다시 FE로 보내주어야 프론트에서 그것을 렌더링할 수 있고, 그 기능을 실제로 구현해야 한다!
youtube api를 쓰면 쉽게 파싱할 수 있지만, 화이트카드를 계속 발급받으면서 Auth를 하는데 번거로움이 있어 그냥 대가리 박고 파싱하기로 했다.
문제 발생
근데 이거 어케함?
8080에 요청이 들어올때 response를 쥐어주는 법, request로 파싱하는 법은 알았다.
근데 내가 클라이언트 입장에서 다른 서버에 요청을 보내고 받아오는 것은 한번도 해보지 않은 기술이라 벌벌 헤멨다.
어찌저찌 유튜브에서 받아온 html(유튜브는 SSR 방식을 이용하기 때문에, 쉽게 말하면 빈 템플릿을 보내고 그 안에 이런저런 요청받은 정보들을 가져와서 렌더링한다). 은 또 어떻게 파싱할꼬...
시도해본 것들
일단 처음으로 youtube에 get 메서드로 통신하기 위해서는 여러 방법이 있었다.
- HttpUrlConnection 사용하기 -> 너무 옛날 기술이라 요즘엔 잘 사용하지 않는다고 함
- RestTemplate -> Spring 3 이후에 나온 기술, 현재는 또 Depricated당했다.
- WebClient -> Spring 5 이후에 나온 기술
그중에 RestTemplate를 사용해보기로 했다.
UriComponentsBuilder를 이용해 Uri에 쿼리를 담아 보냈는데,
텅 빈 ResponseBody만 온다..
다음 코드의 문제점은 뭘까?
8080포트에서는 200번대로 다 떴는데, status code를 로그로 찍어보니 300번대가 떴다.
왜 301이 떴지? 하면서 온갖 생각을 다 하다가 하나를 생각해냈다.
HTTPS
HTTPS 프록시 기술을 사용하기 때문에 리다이렉팅을 하는 과정에서 불러오지 못했던 것이었다.
이걸가지고 3~4시간을 헤메다니...
아무튼 성공했고, 다음과 같은 responseBody를 받았다.
이거를~ 어떻게~ 파싱할까요~?
이 긴 String 사이에 JSON이 숨어있다. 그 숨겨진 JSON을 꺼내서 우리가 원하는 타이틀로 바꿀것이다.
jsoup은 html parser라 html이 변동되면 사용할 수 없기 때문에
youtube api를 쓰지 않으려면 일일히 파싱을 해 주어야 한다. (CSR은 깡통 html만 주기 때문에 jsoup을 쓸 수 없다.)
파싱은 JSONParser를 이용해서 파싱하려고 했다.Json.simple 라이브러리를 이용해서 바꾸어 주려고 하니
이 안에 파싱을 할 때 JSONObject로 파싱되는지, JSONArray로 파싱되는지에 따라 계속 확인해주어야 하고, 계속 형변환을 해 주었다.
JSONParser를 쓰는 레퍼런스들은 많아서 찾아볼만했지만 보통은
[{곤충1 : 잠자리}, {곤충2 : 매미}] 등의 단순화된 스트링에서만 파싱을 했고,
{asdfasdfdsfa:{asdfsdafsdfa{asdfdsaffdsafds:gdfadsaffdsafsadfdsa:sdaffsadfsadfdas:···}···}···}등의 구조를 알아보기 힘든 긴 JSON을 파싱하는 레퍼런스들은 없었기에, 일일히 해 주어야 했는데,
이 문장을 1억줄 쓰려니 생각만 해도 아찔했다.
바로 ObjectMapper의 등장이다.
ObjectMapper에서 readTree로 데이터를 읽으면 JsonNode로 반환한다. 더욱이나 좋은것은, get 메서드 안에 index와 fieldname을 둘 다 혼용해서 쓸 수 있기에 형변환을 안해주어도 된다는 점이 매우매우 마음에 들었다.
알게 된 것
머리를 박으면서 코딩을 하다보니 알게된것들이 있었다.
1. BE api의 flow
MusicParsercontroller에서 MusicParserService를 const injection을 통해서 주입하고 GetMapping으로 /search에서 FE에서 날려준 request를 가지고 MusicparserService.method(request)한다는 것
2. RestTemplate의 흐름
resttemplate 구현 => getForObject로 json형식의 string값을 받고(getForEntity써서 entity로 결과 반환받아도된다.)
=> 그다음에 그걸 service단의 muisicparser로 가져가서 파싱하고 =>그다음에 프론트에 정보 줌
그럼 이제 파싱을 해서 프론트로 던져주는 작업을 해 보자.
'웹개발 > 항해' 카테고리의 다른 글
TIL - 팩토리 메서드 디자인 패턴과 함께하는 버스 공장 만들어보기 (0) | 2023.02.06 |
---|---|
항해 3주차, 객체지향의 길목에서 - Week I learned (0) | 2023.02.05 |
항해 2주차, 객체지향으로 가는 길 - Week I learned (0) | 2023.01.30 |
항해 OT주차 - Week I Learned(수정중) (0) | 2023.01.15 |
항해 웹개발 종합반 5주차, 서버 구동 (1) | 2023.01.07 |