Node.js 7 일차 (웹 크롤링)

크롤링 -> 내가 원하는 데이터를 가져오는 것

이번시간에는 웹 사이트에서 내가 원하는 데이터를 가져오는 크롤링을 해보겠다

먼저 인프런 사이트를 크롤링 하기 위해서 inflearn.js 라는 폴더를 만들어준다

npm install axios cheerio

그다음 터미널 창으로 axios 모듈과 cheerio 모듈을 설치해준다

const axios = require("axios");
// 사이트의 html을 가져와주는 모듈

const cheerio = require("cheerio");
// 가져온 html을 파싱하는 함수

axios 는 사이트의 html을 가져와주는 모듈이고 cheerio는 가져온 html을 파싱하는 모듈이다

이제 여기서 주소를 복사해서 붙여넣으면

https://www.inflearn.com/courses?s=%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

이런식으로 나오는데

// html을 가져오기
const getHTML = async(keyword) => {
    try{
        return await axios.get("https://www.inflearn.com/courses?s=" + encodeURI(keyword))
        // 한글이 들어가면 에러가 나서 인코딩이 필요함
    }catch(err) {
        console.log(err);
    }
}

우선 트라이 캐치문으로 에러를 잡아주고

필요한 부분만 잘라서 get 안쪽에 넣어준다. keyword에는 한글이 들어갈꺼기 때문에 인코딩은 필수다.

s=%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 => 이렇게 나오는 이유는 한글이라서 그런가??

이제 파싱을 해볼껀데 먼저 f12를 눌러 개발자 모드로 들어가고 동그라미 부분을 클릭하고 화면에 마우스를 올려놓으면 선택한 부분이 어떤 클래스에 있는지 알 수 있다. 이를 이용하여 파싱을 진행하겠다

// html 파싱하기
const parsing = async (keyword) => {
    const html = await getHTML(keyword);
    const $ = cheerio.load(html.data);
    const $courseList = $(".course_card_item")

    let courses = [];
    $courseList.each((idx, node) => {
        courses.push({
            title : $(node).find(".course_title").text(),
            instructor: $(node).find(".instructor").text(),
            price: $(node).find(".price").text(),
            rating: $(node).find(".star_solid").css("width"),
            img: $(node).find(".card-image > figure > img").attr("src")

        })
    });

    console.log(courses);

}

parsing("자바스크립트");

먼저 키워드를 넣으면 콘솔에 찍어주는 parsing 함수를 만들고
html안에 사이트 화면의 html을 불러와 저장하고
$ 라는 html 데이터를 파싱하는 객체를 정의하고
$courseList 라는 .course_card_item 이라는 클래스를 파싱하는 객체를 정의한다

courses라는 배열을 만들어 text가 들어갈 객체를 정의하고
node에서 각각 클래스를 찾아 택스트화 시킨후 push를 통해 배열에 저장한다

마지막으로 parsing 함수를 "자바스크립트"를 넣어서 실행시켜주자

그러면 이와 같은 결과창이 뜬다

const axios = require("axios");
// 사이트의 html을 가져와주는 모듈

const cheerio = require("cheerio");
// 가져온 html을 파싱하는 함수

// html을 가져오기
const getHTML = async(keyword) => {
    try{
        return await axios.get("https://www.inflearn.com/courses?s=" + encodeURI(keyword))
        // 한글이 들어가면 에러가 나서 인코딩이 필요함
    }catch(err) {
        console.log(err);
    }
}

// html 파싱하기
const parsing = async (keyword) => {
    const html = await getHTML(keyword);
    const $ = cheerio.load(html.data);
    const $courseList = $(".course_card_item")

    let courses = [];
    $courseList.each((idx, node) => {
        // const title = $(node).find(".course_title").text()
        courses.push({
            // title: $(node).find(".course_title:eq(0)").text(), 
            // 노드가 2개여서 2번씩 찍히는데 eq(0)로 첫번째 노드만 가져온다
            title : $(node).find(".course_title").text(),
            instructor: $(node).find(".instructor").text(),
            price: $(node).find(".price").text(),
            rating: $(node).find(".star_solid").css("width"),
            img: $(node).find(".card-image > figure > img").attr("src")

        })
    });

    console.log(courses);

}

parsing("자바스크립트");

풀코드