[패스트캠퍼스 서포터즈 3기 - Node.js 강의 후기] 2주차 : 무한 스크롤을 통한 데이터 불러오기

본 게시글은 PC버전에 최적화 되어있으며 패스트캠퍼스 서포터즈 3기로 활동하며

"한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online"을 무료로 협찬받아 작성한 게시글입니다.

 

노드 js 노드 js 노드 js 노드 js 노드 js

 

2주차 리뷰가 살짝 늦었따..학교 시험 시간과 겹치느라 한 주를 미뤘달까...^^;;

 

이번 주는 지난 주에 배웠던 스크래퍼를 이용해서 데이터를 가져오는 것을 배웠다.

우선 강의에서 무한 스크롤에 대해서 배웠는데 인스타그램이나 페이스북의 경우 뉴스피드에서 사용자가 스크롤을 내릴 경우 끊임 없이 스크롤이 생성되는 것을 볼 수 있다. 지금까지 이것에 대해 궁금해한 적이 없었는데 강의를 듣고 어떻게 구현하는 거지? 라는 생각이 들었다. 그래서 든 생각은 일정 시간마다 스크롤을 내려주면 된다? 라는 생각이었는데 실제로 맞았다. 강의에서도 두 가지 경우로 나눠서 진행했는데 첫 번째는 API를 이용하지 않고 코드로 직접 구현하는 방식이였고 두 번째는 API를 이용하는 방식이였다.

 

우선 첫 번 째, API를 이용하지 않고 코드로 직접 구현하는 방식이다.

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
    });
    const page = await browser.newPage();
    await page.setViewport({
        width: 1440,
        height: 900,
    })

    await page.goto('https://brunch.co.kr/search');
    await page.click("input.txt_search"); // 검색창 클랙
    await page.keyboard.type("Hello World") // 검색어 입력
    await page.keyboard.press("Enter");
    await page.waitForNavigation(); // 일시적 대기

    let infinteScrollInterval = setInterval(async () => {
        await page.evaluate(() => {
            window.scrollBy(0, window.innerHeight);
        });
    }, 1000); // 1000 ms마다 실행


    setTimeout(async () => {
        clearInterval(infinteScrollInterval);
    }, 1000 * 10); // 10000 ms가 지나면 종료
    // await browser.close();
})();

puppeteer를 이용했다.

goto를 사용해서 탐색하고자 하는 사이트와 연결하고

click를 사용해서 검색창을 클릭하도록 한다.

이후 keyboard.type를 사용해서 검색어를 입력하고

press를 사용해서 Enter를 입력하도록 한다.

 

생각보다 간단했다. 우리가 네이버나 구글에서 무언가를 검색할 때 진행했던 방식을 그대로 코드로 구현하면 됐다.

puppeteer와 관련된 여러 함수들은 구글에 검색하면 찾을 수 있었다.

 

https://github.com/puppeteer/puppeteer

puppeteer/puppeteer

 

그 다음 waitForNavigation을 이용해서 일시적으로 대기를 하는데 그 이유는 페이지의 모든 정보를 받아오기까지 시간이 걸리기 때문이다.

1000ms, 즉 1초마다 현재 보이는 창의 높이만큼 스크롤을 이동한다.

10초가 될 때까지 반복적으로 진행하므로 결국 스크롤이 내려가게 된다.

아래는 위 코드를 실행했을 때의 모습이다.

 

 

요건 강의 영상이랄까...

 

두 번째는 API를 이용하여 데이터를 불러오는 방식이다.

우선 스크롤을 내릴 때 페이지에서 어떤 일이 일어나는지를 알 필요가 있다.

위에서 구현한 코드를 실행하고 F12로 개발자모드를 열면 스크롤을 내릴때마다 호출이 발생하는 것을 확인할 수 있다.

 

특정 코드의 호출이 발생하는데 잘 보면 page number만 1, 2, 3, 4... 이렇게 변하는 것을 확인할 수 있다.

사용자가 스크롤을 내릴때마다 page number만 변하는 것이다.

 

그럼 이 부분을 자동적으로 바뀌게 코드를 구현하면 결국 무한 스크롤이 되는 것이다.

const axios = require("axios"); // axios 호출
const cheerio = require('cheerio'); // cheerio 호출

let article = {};
const crawler = (pageNumber) => {
    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);

페이지 내부의 정보를 저장할 변수 article을 선언하고 page number에 따라 data를 저장하는 코드이다.

page number가 10을 넘어가는 경우 함수는 종료된다.

 

이번 주차는 개인적으로 흥미로웠다. 앞에서 말한 것처럼 무한스크롤 작동방식에 대해 따로 생각해본 적은 없었지만 이번 강의를 들으면서 작동 방식에 대해 알게 됐다. 아쉬웠던 점은 js에 대한 설명이 적다는 것이다. js를 공부해본 적이 있는 사람이라면 강의 수강에 있어서 큰 어려움이 없지만 나 같은 경우에도 java, python, c, c++은 다 해봤지만 js는 아직 들어본 적이 없는 사람이라 동기, 비동기 개념 자체도 아직 정확하게 모르는 상태였다. 강의에서는 기본적으로 안다는? 가정하에 진행을 하고 있는 느낌이다. 물론 약간의 설명을 해주고 있긴하지만 async, await를 처음 접하는 입장에서 추가적인 구글링이 필요했다. 그래도 확실히 강의 덕분에 js 강의 없이도 js에 대한 안목이 조금씩 늘어나는 느낌이다. 요즘에 Android랑 Spring 공부를 하고 있어서 시간이 없는데 시간 날 때마다 js를 공부해야겠다는 생각이 들었다. Spring도 결국에는 프론트엔드에서 어떻게 호출하고 불러오는지 작동 방식을 알 필요가 있기 때문이다. 2주차 끝!

 

node.js node.js node.js node.js node.js

 

"한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online"을 무료로 협찬받아 작성한 게시글입니다.

 

https://bit.ly/3pdy7Wq

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