내일 배움 캠프 23_08_17 TIL

오늘은 데이터 크롤링을 위해서 express로 간단한 서버를 만들고 그 서버를 통해서 데이터를 크롤링해오고

그 데이터를 클라이언트에서 요청해서 받아온 후 DB에 저장하는 로직을 구현해보았다

 

const axios = require("axios");

const cheerio = require("cheerio");

const log = console.log;

const getHtml = async () => {

  try {

    return await axios.get(

      // "https://cu.bgfretail.com/product/view.do?category=product&gdIdx=17686"

      "https://cu.bgfretail.com/product/product.do?category=product&depth2=4&sf=N"

    );

  } catch (error) {

    console.error(error);

  }

};

function sleep(ms) {

  return new Promise((r) => setTimeout(r, ms));

}

getHtml()

  .then(async (html) => {

    // axios 응답 스키마 `data`는 서버가 제공한 응답(데이터)을 받는다.

    // load()는 인자로 html 문자열을 받아 cheerio 객체 반환

    const $ = cheerio.load(html.data);

    await sleep(3000);

    const data = {

      mainContents: $(

        // "#listForm > div.prodDetailWrap > div > div.prodDetail-e > p"

        "#dataTable > div.prodListWrap > ul > li:nth-child(1) > div > div.prod_wrap > div.prod_text > div.name > p"

      ).text(),

    };

    return data;

  })

  .then((res) => log(res));

아래와 같이 Cheerio를 이용해서 데이터를 크롤링해오려 했는데 이 때 메인페이지 에서는 데이터가 들어오지 않는

현상이 발생했는데 이는 페이지가 유저가 들어왔을 때 useEffect처럼 데이터를 불러오는 것 같다고 생각이됐다

그래서 어떻게 해야하지 고민을 하다가

 

const express = require("express");

const puppeteer = require("puppeteer");

const cors = require("cors");

const app = express();

const port = 3001;

app.use(cors());

app.get("/data", async (req, res) => {

  try {

    const browser = await puppeteer.launch();

    const page = await browser.newPage();

    await page.goto(

      "https://cu.bgfretail.com/product/product.do?category=service&depth2=4&sf=N"

    );

    async function scrapeData() {

      const items = await page.evaluate(() => {

        const items = [];

        const nameElements = document.querySelectorAll(

          "#dataTable > div.prodListWrap > ul > li > div > div.prod_wrap > div.prod_text > div.name > p"

        );

        const priceElements = document.querySelectorAll(

          "#dataTable > div.prodListWrap > ul > li > div > div.prod_wrap > div.prod_text > div.price > strong"

        );

        const imgElements = document.querySelectorAll(

          "#dataTable > div.prodListWrap > ul > li > div > div.prod_wrap > div.prod_img > img"

        );

        for (let i = 0; i < nameElements.length; i++) {

          const name = nameElements[i].textContent.trim();

          const price = priceElements[i].textContent.trim();

          const img = imgElements[i].getAttribute("src");

          items.push({ name, price, img });

        }

        return items;

      });

      return items;

    }

    let previousHeight = await page.evaluate("document.body.scrollHeight");

    while (true) {

      await page.evaluate(`window.scrollTo(0, ${previousHeight})`);

      await page.waitForTimeout(1000);

      const newHeight = await page.evaluate("document.body.scrollHeight");

      if (newHeight === previousHeight) {

        break;

      }

      previousHeight = newHeight;

      const loadMoreButton = await page.$(

        "#dataTable > div.prodListBtn > div.prodListBtn-w > a"

      );

      if (loadMoreButton) {

        await loadMoreButton.click();

        await page.waitForTimeout(2000);

      }

    }

    const finalData = await scrapeData();

    await browser.close();

    res.json(finalData);

  } catch (error) {

    console.error("Error:", error);

    res.status(500).json({ error: "An error occurred" });

  }

});

app.listen(port, () => {

  console.log(`Server is running on port ${port}`);

});

이 puppeteer를 사용했는데 이 puppeteer는 백그라운드에서 실행되는 브라우저로

유저의 눈에는 보이지 않지만 서버에서 페이지를 실행해서 거기에 있는 데이터를 크롤링 할 수 있도록 해주는 라이브러리이다 위 코드에서는 더보기 버튼을 클릭해야만 다음 데이터를 패치해오기 떄문에 html요소를 동작시켜서

다음 데이터를 패치해오고 또 저장하는 방식으로 동작하게 구현해 두었다

하지만 이것도 너무 방대한 양을 패치를해오기 때문인지 아니면 Timeout으로 해놓았기에 중간에 캔슬이 되는것인지

모르겠지만 완벽히 원하는대로 모든 데이터를 패치해오는것이 아니기에 다른 방법을 생각해보려한다

또 Express를 이용해서 서버를 구현한 이유는 그냥 데이터를 클라이언트 사이드에서 가져오려하면 CORS에러가 발생하기에 서버를 두어서 서버에서 데이터를 크롤링해오고 그 데이터를 가공해서 클라이언트 사이드에서 이용하기 위해

구현해보았다. 다만 크롤링할 사이트가 변경됐는데 이 사이트는 사이트 구조가 특이해서 코드를 많이 바꿔야 할 것 같다.

 

마지막으로 오늘 CS관련해서 CPU,램,보조기억장치,주기억장치,메모리, 등 여러 CS관련 지식을 공부했는데

공부하면서 메모장에 정리해두었던 내용을 아래에 서술해놓으려 한다.

--------------------------------------------------------------------------------------------------------

입력장치는 사용자가 컴퓨터에게 명령을 요청하거나 데이터를 입력하게해주고
장치로는 키보드,마우스,터치스크린,마이크,스캐너,카메라 등 매우 다양

출력장치란 컴퓨터가 사용자에게 데이터를 보여주거나 처리결과를 보여주는 창구가 출력 장치이며
푸드트럭으로 비유하자면 메뉴판이나 수령대로 비유가 가능

--------------------------------------------------------------------------------------------------------
CPU란 컴퓨터가 사용자의 명령에 대한 작업을 수행하는 처리장치이다.

CPU의 내부를 보면 ALU(Arithmetic Logic Unit)과 CU(Control Unit)으로 나뉘어져있음

산술논리장치 (ALU) : 비교, 판단, 연산을 담당한다 [요청한 데이터를 연산하고 수행하는 역할]

제어부(CU)와 내부 버스 : 명령어의 해석과 올바른 실행을 위하여  CPU를 내부적으로 제어한다[스케쥴(순서)을/를 제어하는 역할]
--------------------------------------------------------------------------------------------------------
메모리 유닛 : 레지스터 [처리할 명령어를 저장하고 있는다]
            캐시 메모리(L1)[처리속도를 높여주는 역할을 한다]

레지스터는 여러가지 목적에 따라 다양한 레지스터가 존재하는데
-메모리 주소 레지스터(MAR) :읽고 쓰기 위한 주기억장치의 주소를 저장한다.
-프로그램 카운터 (PC) : 다음에 수행할 명령어의 주소를 저장
-명령어 레지스터 (IR) : 현재 실행 중인 명령어를 저장
-메모리 버퍼 레지스터(MBR) : 주기억장치에서 읽어온 데이터나 저장할 데이터를 임시로 저장
-누산기(AC,ACCUMULATOR) : 연산 결과를 임시로 저장

레지스터 : 레지스터는 연산에 필요한 데이터를 저장하고 빠른속도로 접근할 수 있는 저장공간

프로세서 레지스터 : 프로세서에 위치한 고속 메모리로 극히 소량의 데이터나 처리 중인 중간 결과와도 같은 프로세서가 바로 사용할 수 있는 데이터를 담고 있는 영역을 레지스터라고 한다. 컴퓨터 구조에 따라 크기와 종류가 다양하며 용도에 따라 범용 레지스터와 특수목적 레지스터로 나뉜다.

{범용 레지스터 : 연산에 필요한 데이터나 연산 결과를 임시로 저장한다., 특수목적 레지스터 : 특별한 용도로 사용하는 레지스터이다.}
--------------------------------------------------------------------------------------------------------
제어부: 제어부는 주기억 장치에 저장되어 있는 명령어를 순서대로 호출하여 해독하고, 제어 신호를 발생시켜서
컴퓨터의 각 장치를 동작하도록 하는 장치이다

내부버스 : 내부버스는 기억, 연산, 제어 기능을 실현하기 위한 CPU와 주기억 장치, 입출력 장치, 외부 기억 장치, 주변 장치,
통신 처리 장치 등의 제어부 사이를 연결하는 버스이다.
--------------------------------------------------------------------------------------------------------
연산장치 : 연산장치는 논리연산을 수행하는 디지털 회로이다.
--------------------------------------------------------------------------------------------------------

CPU의 동작 : 컴퓨터는 모든 데이터를 기계어(0과1)로 저장하는데
이 기계어를 모스부호처럼 하드웨어적으로 CPU가 알아볼 수 있게 변환한게 "어셈블리어"이고
이 어셈블리어를 사람이 알아볼 수 있게 소프트웨어적으로 변환한게 "프로그래밍 언어"이다.
즉, 기계어(저장공간) > 어셈블리어(CPU) > 프로그래밍 언어(사람)

CPU가 명령어를 읽고 수행하는 동작
1. 명령어 인출
-CU가 이번에 수행할 명령어 정보를 가져온다
2. 명렁어 해독
-명령어 정보를 성공적으로 인출했으면 명령어를 해독해야하는데 이 때 보통 opcode라고 하는 명령어 코드를 인출하고
opcode의 성격에 맞게 레지스터들을 준비시킨다.
3. 실행
-해독된 명령어를 수행하는것으로, 산술/논리 관련된 연산이라면 ALU가 주체가 되어서 실행됨
4. 반영
-명령어의 수행 결과를 반영함으로써 명령어 수행의 한 사이클이 끝난다.

--------------------------------------------------------------------------------------------------------

CPU의 성능

클럭
-CPU 내부에서 일정한 주파수를 가지는 신호로, 이 신호로 모든 명령어가 동작되게 된다.
-1Hz면 1초에 한 번의 주기, 1기가 헤르츠라고 하면 1초에 1기가만큼(1024메가), 즉 10억번 정도
다라서 클럭 주파수가 빠를수록 더 좋은 성능의 중앙 처리 장치이다.

코어
-코어란 중앙처리 장치 역할을 하는 블록을 뜻한다
-즉, 멀티 코어들은 싱글 코어에 비해서 마치 여러 개의 CPU가 작동하듯이 많은 연산을 병렬로 빠르게 처리할 수 있다.
-물론 CPU만 좋다고 성능이 좋은게 아니라 메모리도 중요하다
--------------------------------------------------------------------------------------------------------
메모리

캐시 메모리(L2,L3) :캐시 메모리란 컴퓨터의 전원이 꺼지면 지워지는 메모리지만 제일 빠르게 조회가 가능한 공간이다 아주 비쌈
여기서 아까 CPU 구성에 있던 L1캐시메모리와는 다른 메모리 그룹에 속한 L2캐시메모리, L3 캐시메모리이다.

L2,L3 캐시메모리는 메인 메모리에 있는 데이터를 캐시 메모리에 불러와 놓고, CPU가 필요한 데이터를
캐시에서 먼저 찾도록 하여 시스템 성능을 향상시켜 준다.

L2,L3 캐시메모리와 CPU 레지스터의 차이:
L2,L3 캐시메모리는 CPU와 별도의 공간이며, 메인 메모리와 CPU 간의 속도차이를 극복하기 위한 것이다!
CPU 레지스터는 CPU안에서 연산을 처리하기 위하여 데이터를 저장하는 공간이다.

--------------------------------------------------------------------------------------------------------

메인메모리 = 주기억장치 = RAM

-RAM은 Random Access Memory의 약자이다
-RAM은 DRAM과 SRAM이 있는데 주기억장치는 주로 DRAM을 의미하며 SRAM은 캐시나 레지스트리를 의미한다
-컴퓨터의 CPU가 현재 처리중인 데이터나 명령만을 일시적으로 저장하는 휘발성 메모리이다.
  *전원이 꺼지면 메인 메모리에 저장된 내용들은 모두 사라지기 때문에 컴퓨터가 꺼진 이후에더 데이터를 유지하려면
     데이터를 하드디스크에 저장해야 한다.
-보조기억장치(하드디스크)보다 접근속도가 빠르다
-모든 프로그램은 컴퓨터에서 실행되기 위해 메모리의 일부를 사용한다.
-HDD-RAM-CPU 와 유사한 방식으로 연산과정의 중간에 위치
-HDD에 비해 월등히 빠른 속도로 CPU가 정보를 원활히 이용가능하다.
-CPU가 사용하기 좋도록 각종 정보를 임시 저장하는 휘발성 저장장치이다.

SRAM vs DRAM

SRAM
- 정적 메모리이며 전원 공급이 되는 동안은 기록된 내용이 지워지지 않아서 재충전이 필요 없으며 또한
   접근 속도가 빠르고 가격이 비싸다는 특징이 있으며 주로 캐시메모리나 레지스터로 사용된다.

DRAM
-동적 메모리이며 전원이 계속 공급되더라도 주기적으로 재충전되어야 기억된 내용을 유지할 수 있으며
 주로 대용량의 기억장치에 사용되며 가격이 저렴하다 또 주로 RAM 이라고 표현되는 것은 거의 DRAM을 가르킨다.

--------------------------------------------------------------------------------------------------------
보조 기억장치

보조 기억장치란 컴퓨터 전원이 꺼져도 지워지지 않는 저장공간이다.
-사용자가 사용하고자 하는 데이터와 프로그램을 반영구적으로 저장한다
-전원을 끄더라도 저장된 데이터나 정보가 날아가지 않는 비휘발성 메모리이다.
-따라서 우리가 프로그램이나 파일을 설치하면 이곳에 반영구적으로 저장된다.

--------------------------------------------------------------------------------------------------------

CPU와 메모리

CPU와 메모리의 동작
1. 주기억장치가 입력장치에서 입력받은 데이터 또는 보조기억장치에 저장된 프로그램을 읽어온다.
2. CPU는 프로그램을 실행하기 위해 주기억장치에 저장된 프로그램 명령어와 데이터를 읽어와 처리하고 결과를 다시 주기억
     장치에 저장한다.
3. 주기억장치는 처리 결과를 보조기억장치에 저장하거나 출력장치로 보내서 출력시킨다.
4. CPU내의 제어장치가 1~3번 과정에서 명령어가 순서대로 실행되도록 각 장치들을 제어한다

CPU와 메모리의 구조

구조로는 하버드 구조와 폰 노이만 구조가 있고

하버드 구조의 장단점으로는
-장점 : 메모리가 두개이기 때문에 역할이 나누어져 있으며 속도가 빠르다
-단점 : 구성이 많기 때문에 비싸며, 복잡한 구성으로 고장이 날 확률이 높다

폰노이만 구조
-보조기억장치에서 데이터들이 CPU에서 연산되기 위해서 하나의 메모리에 올라간다.
-제어장치는 산술논리장치에 데이터가 메모리 어디에 위치한지 알려주는 역할을 한다.
-프로그램 메모리와 데이터 메모리가 구분되어 있지 않고 하나의 버스를 가지고 있으며. 이로 인해서 병목현상이 일어난다.

개선된 구조
-하버드 구조 + 폰노이만 구조를 둘 다 사용하고 있으며 이로써 CPU의 캐시 메모리 향상에 관여
-CPU 내부 -하버드 구조 : CPU 내부에 캐시를 둬서 RAM과 CPU 간의 속도 차이를 줄이려고 노력
-CPU 외부 - 폰노이만 : 메모리 하나에 하나의 버스를 가지는 구조이기 때문에 병목현상이 존재
--------------------------------------------------------------------------------------------------------
추가정보!
M1 칩이란 CPU와 여러 요소들을 합쳐서 만든 칩으로 장치간의 거리가 짧고 통합 메모리 구조이기 때문에
CPU의 효율을 극대화 할 수 있다.
하지만! 하나의 칩 형태이기 때문에 RAM을 추가 한다던지 자유도가 떨어지고
사전에 정해진 형태로만 메모리간에 통신하기 때문에 메모리별 최적화가 적용되어있는 일부 프로그램은 동작하지 않을 수 있다.

CPU의 성능
32비트 OR 64비트
이 둘은 데이터를 처리할 수 있는 수준으로 구분하면되고
64비트 프로세서의 개발을 통해 4GB 이상의 RAM을 처리할 수 있었다.

L2/L3 캐시
L2와 L3 캐시는 처리 중에 CPU가 사용할 수 있는 속도가 빠른 캐시 메모리로
캐시 메모리를 가지고 있을수록 CPU의 성능이 빨라진다

주파수
주파수는 프로세서의 작동 속도를 가리키며
멀티 코어 프로세서 이전에 주파수는 서로 다른 CPU 사이에서 가장 중요한 선능 메트릭스이었고
CPU 프로세서 구매 시 주파수 성능도 꼭 고려해야할 중요한 요소 중 하나이다

CPU의 동작
데이터를 가져오기, 디코딩, 실행 이 세 단계가 CPU의 핵심이자 전부

1. 데이터 가져오기 (fetch)
데이터는 이진수(011010..)로 표시되며 RAM에서 CPU로 전달된다.
각 실행 작업은 모든 작업의 작은 부분일 뿐이므로 CPU는 다음에 어떤 실행이 나올지 알아야 한다.
이 때 멸영어는 프로그램 카운터(PC)에 의해 보관되며 그런 다음 PC와 명령문은 IR에 배치되며 PC의 길이는 다음 명령문의 주소를 참조하기 위해 증가된다.
2. 디코딩(Decoding)
일단 명령을 가져와 IR에 저장하면 CPU는 명령 해독기라는 회로로 명령을 전달한다
명령어는 CPU의 다른 부분으로 전달하여 작동을 위해 전달되는 신호로 변환되는데 이것을 디코딩이라 한다.

3. 실행(Excute)
마지막 단계에서 디코딩된 명령문은 완료될 CPU의 관련 부분으로 전송하며
결과는 대체로 CPU 레지스터에 기록되며, 이 레저시터는 이후 명령문에 의해 참조 될 수 있으며
이는 계산기의 메모리 기능처럼 생각하면 될 것 같다!