카카오 지도 크롤링 시도하기(Flask, Selenium, bs4)

개요

먼저 말하자면 크롤링 실패다. 어떤 방법으로 크롤링을 해야할지 모르겠다. 현재 시도한 것은 크롤링은 되지만, 크롤링을 시도할 브라우저를 띄우는 것 부터 해서 카카오 지도 url에 들어가서 크롤링을 하는 것 까지의 시간이 지연된다. 그렇게 크롤링에 실패 했고, 카카오 지도 API에서 제공해주는 데이터만을 이용해서 프로젝트를 완성해야 할 것 같다. 코드는 이렇다.

 

frontend 코드

const SearchContainer = () => {

  const [searchName, setSearchName] = useState("");

  const searchCafeButton = async(e) => {
    e.preventDefault()
    try {
      const response = await axios(`http://localhost:5000/searchCafes?searchName=${searchName}`)
      setSearchResult(response.data)
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <S.SearchContainer>
      <S.SearchInner>
        <S.Logo>MyCafeFinder</S.Logo>
        <S.SearchForm onSubmit={searchCafeButton}>
          <S.SearchInput
            type="text"
            value={searchName}
            onChange={(e) => setSearchName(e.target.value)}
            placeholder="찾으시는 카페 있으신가요?"
          />
          <S.SearchButton>
            <Search fill="#919191" />
          </S.SearchButton>
        </S.SearchForm>
      </S.SearchInner>
    </S.SearchContainer>
  );
};

export default SearchContainer;

 

backend 코드

from flask import Flask, jsonify, request
from flask_cors import CORS
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from bs4 import BeautifulSoup
import time

app = Flask(__name__)
CORS(app)

@app.route('/searchCafes', methods=['GET'])
def get_searchCafe_data():
    searchName = request.args.get('searchName')

    # Selenium WebDriver 설정
    options = webdriver.ChromeOptions()
    # options.add_argument("headless") #크롬창 숨기기
    options.add_argument('--no-sandbox')
    options.add_argument('--disable-dev-shm-usage')
    driver = webdriver.Chrome(options=options)

    driver.get("https://map.kakao.com/")
    time.sleep(3)

    image = driver.find_element(By.CSS_SELECTOR, "div.coach_layer")
    image.click()
    search_input = driver.find_element(By.CSS_SELECTOR, "#search\\.keyword\\.query")
    search_input.send_keys(searchName)

    search_button = driver.find_element(By.CSS_SELECTOR, "#search\\.keyword\\.submit")
    search_button.click()

    # 검색 결과가 로드될 때까지 대기하기
    WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, "a.link_name")))

    soup = BeautifulSoup(driver.page_source, 'html.parser')

    searchCafes = []
    for item in soup.select("ul.placelist > li"):
        name = item.select_one('a.link_name').get_text(strip=True)
        address = item.select_one('div.addr').get_text(strip=True)
        rating = item.select_one('em.num').get_text(strip=True) if item.select_one('em.num') else '평점 없음'
        review = item.select_one("a.review").get_text()
        period = item.select_one("span.openhourTitle").get_text()

        searchCafes.append({
            'name': name,
            'address': address,
            'rating': rating,
            'review' : review,
            'period' : period,
        })

    driver.quit()
    return jsonify(searchCafes)

if __name__ == '__main__':
    app.run(debug=True)

 

프론트쪽에서 검색된 검색어를 백엔드쪽으로 보내고, 백엔드에서는 크롬 브라우저를 열고, 카카오 지도 주소로 들어가서  해당 검색어를 입력한 뒤 크롤링 한다. 하지만 프론트 단 까지 데이터를 가져오는 시간이 너무 오래 걸린다. 다른 방법을 찾아 봤지만 내 구글링 실력이 별로인지 해답이 나오지 않았다. 그래서 어쩔 수 없이 주어진 데이터를 사용해서 프로젝트를 마무리 하기로 했다.

 

마무리

크롤링 부분을 더 공부하기 위해선 파이썬도 많이 공부해야 되는데 아직 프론트쪽도 너무 부족해서 나에겐 너무 과분한 부분인거 같다. 아직,, 그래서 주어진 데이터로 프로젝트를 완성할 예정이고,  더 공부해 볼 생각이다.