[패스트 캠퍼스] 한 번에 끝내는 NODEJS 웹 프로그래밍 강의 후기 : 프론트엔드 part1(크롤링3)

 #node.js #크롤링 #패스트캠퍼스 

 

 

노드js 프론트엔드 part1(API를 활용한 무한스크롤 크롤링)

지난 nodejs강의를 통하여 브런치 사이트를 검색하고 무한 스크롤을 만들어 보았다.

API를 활용한 간편한 무한스크롤 프로그래밍과

획득한 데이터를 JSON 파일로 저장하는 프로그래밍을 만들어보자.

 

API를 활용한 무한스크롤

브런치 페이지를 개발자 도구를 통하여 확인해 보자.

Network - XHR - Header부분을 확인해 보자.

Request URL정보가 있다.

URL을 분석해 보자.

https://api.brunch.co.kr/v1/search/article
?q=hello%20world
&page=1
&pageSize=20
&highlighter=y
&escape=y
&sortBy=accu

브런치 사이트의 API를 호출하고 Request Parameter값이 주어진다.

우리는 Page를 변경해야하기 때문에 Page를 변경하는 노드js 프로그래밍을 해보자.

const crawler = (pageNumber) => {
    return axios
    .get(
        'https://api.brunch.co.kr/v1/search/article?q=hello%20world&page${pageNumber}=&pageSize=20&highlighter=y&escape=y&sortBy=accu'
    )
};

pageNumber변수를 받아 page number를 변경하도록 노드js를 변경하였다.

 

전체 코드를 보면 아래와 같다.

const axios = require("axios");
const cheerio = require('cheerio');

let article = {};
const crawler = (pageNumber) => {
    return axios
    .get(
        'https://api.brunch.co.kr/v1/search/article?q=hello%20world&page${pageNumber}=&pageSize=20&highlighter=y&escape=y&sortBy=accu'
    )
    .then((response) => {
        const data = response.data;
        article[pageNumber] = data.data.list;
        console.log("current page number : ", pageNumber);
        const nextNumber = pageNumber + 1;
        if (nextNumber < 10) {
            crawler(nextNumber);
            return; 
        }
        console.log(article);
    });
};

crawler(1);

nodejs강의를 통하여 웹페이지의 API를 활용한 무한스크롤을 개발해 보았다.

그럼 조회된 데이터를 JSON 파일로 저장해보자.

 

획득한 데이터를 JSON 파일로 저장

nodejs강의를 통해 nodejs에서 파일 저장을 위해서는 file system(fs)가 필요하다.

파일 시스템에서 중요한 것은 Read, Write, Update, Delete가 있다.

노드js를 이용하여 file system write를 구현해보자.

const fs = require("fs");

const crawler = (pageNumber) => {
        fs.writeFile("brunch_article.json", JSON.stringify(article), (err, data) => {
            if (err) {
                console.error(err);
                return;
            }
            console.log("Sucess file write");
        });
    });
};

노드js를 실행해보니 "Sucess file write"로그가 정상적으로 조회된다.

* Shift + Option + F 를 눌러 

 

nodejs강의를 활용하여 가져온 데이터를 맵함수로 필요한 값만 재정의 해 보자.

        const sampleArray = [
            { title: "안녕하세요", nickname: "한상훈"},
            { title: "헬로 월드", nickname: "패스트캠퍼스"},
        ];

        const onlyTitleArray = sampleArray.map(element => {
            return element.title;
        });

        console.log(onlyTitleArray);

        const data = response.data;
        article[pageNumber] = data.data.list.map(item => {
            return {
                title: item.title,
                contentSummary: item.contentSummary,
                contentId: item.contentId,
            };
        });

아래와 같은 결과가 나온다.

 

 

마무리

nodejs강의에서 지난시간 puppeteer를 이용한 무한스크를을 프로그래밍 해 보았고

API를 활용한 크롤링과 검색된 데이터를 JSON형태로 저장해 보았다.

API가 제공되는 웹페이지에서 단순하게 데이터만 조회가 가능하다면 간편한 방법으로 API를 활용하고

추가적인 Action(클릭, 검색 단어 변경 등)이 필요 할 경우 puppeteer를 활용하여 크롤링을 프로그래밍 할 수 있다.

 

관련글

1.https://bit.ly/3pdy7Wq

한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online | 패스트캠퍼스