TIL(#2) - 3.02

오늘은 Naver 검색 API를 이용하여 지역,여행지, 숙소까지 데이터를 가져와 클라이언트 서버에 내려받는 코드를 짜 보았다.

일단, 설계 구조는 이러하다.

• HTML에서 지역들을 카드 형태로 만든다
• 지역카드를 "onclick()"할 시 해당 지역의 관련있는 명소들이 최대 5개까지 카드형태로 등장(Naver API max display가 5개로 제한되어있음)
• 지역카드 중 하나를 클릭했을 시 숙박소들이 최대 5개까지 카드형태로 등장
• 클릭한 3개의 지역, 명소, 숙박들이 정해지고 저장버튼을 누르면 Mongo DB에 저장
• 저장된 MongoDB를 Mypage에 불러와 내려받기

이 첫 세파트를 오늘 진행했다.

네이버 API 개발자 가이드

HTML에서 ajax를 만들어 원하는 키워드를 데이터로 보내준다. 그런 이후에 그 키워드를 Naver API를 통해 검색하고 그 검색된 딕셔너리(Json)를 다시 클라이언트에 보내줘서 보이게끔한다.

네이버 검색 API를 사용하기위해서는 네이버 API를 신청해야 하고 신청한 것을 기반으로 ID & PW가 주어지게 된다.

네이버 검색 API 예제

def accommodation_attraction(value):
   client_id = "ID"
   client_secret = "PW"
   encText = urllib.parse.quote(value)
   url = "https://openapi.naver.com/v1/search/local.json?query=" + encText +  "&display=5" + "&sort=comment" # json 결과
   # url = "https://openapi.naver.com/v1/search/blog.xml?query=" + encText # xml 결과
   request = urllib.request.Request(url)
   request.add_header("X-Naver-Client-Id", client_id)
   request.add_header("X-Naver-Client-Secret", client_secret)
   response = urllib.request.urlopen(request)
   rescode = response.getcode()
   if(rescode==200):
      response_body = response.read()
      result = response_body.decode('utf-8')
      print(result)
      return result
   else:
      print("Errosr Code:" + rescode)

해당 function은 숙소 리스트를 받아오기 위한 function이고 jsonify할 function을 하나 더 만들어준다.

예제

def test_post3():
   place_receive = request.form['place_give'] + "숙박"
   result_return2 = accommodation_attraction(place_receive)
   print(jsonify({'accommodations' : result_return2}))
   return jsonify({'accommodations' : result_return2})
 

***주의사항: Json데이터를 넘겨줄 때 accommodations라고 정의해서 넘겨줬기 때문에 html에서 사용할 때에는 json parse를 꼭 써줘야한다!

        success: function (response) {
            places_receive = JSON.parse(response['places'])['items'];
            for (let i = 0; i < places_receive.length; i++) {
                place_name = places_receive[i]['title'];
                place_url = places_receive[i]['link'];
                place_category = places_receive[i]['category'];
                place_phone = places_receive[i]['telephone'];
                place_address = places_receive[i]['address'];
                console.log(place_name, place_url, place_category, place_phone, place_address);

해당 코드들을 이해하는 데에 너무 오랜시간이 걸렸다...