cheerio(한국어)

Cheerio는 웹 스크래핑을 편리하게 할 수 있는 라이브러리로, JQuery와 유사한 문법을 제공하여 HTML 데이터를 쉽게 분석할 수 있습니다. 비동기로 데이터를 가져와 처리하는 방식을 제공하며, 셀렉터를 이용해 필요한 정보를 추출할 수 있습니다.

Features

  1. 익숙한 문법: Cheerio는 코어 jQuery의 일부를 구현합니다. Cheerio는 jQuery 라이브러리의 모든 DOM 불일치와 브라우저 찌꺼기를 제거하여 아름답고 직관적인 API를 제공합니다.

  2. 빠른 속도: Cheerio는 매우 간단하고 일관된 DOM 모델로 작동합니다. 그 결과, 파싱, 조작 및 렌더링이 놀랍도록 효율적입니다.

  3. 매우 유연: Cheerio는 parse5 파서를 기반으로 작동하며, 선택적으로 @FB55의 관대한 htmlparser2를 사용할 수 있습니다. Cheerio는 거의 모든 HTML 또는 XML 문서를 파싱할 수 있습니다.


Installation

먼저 npm cheerio 설치를 통해 사용할 수 있도록 합니다.

Installation

npm install cheerio

Usage

Cheerio를 사용하기 위해 필요한 모듈을 불러와 문법에 맞게 쉽게 사용할 수 있습니다.

  • Name
    Cheerio 사용법
    Type
    사용법
    Description

    Cheerio를 사용하여 웹 페이지의 HTML을 로드한 후, jQuery와 유사한 방법으로 원하는 요소를 선택하고 처리할 수 있습니다.

주의 사항

  • Name
    문자열 인코딩
    Type
    주의 사항
    Description

    웹 페이지의 문자열 인코딩이 올바르지 않으면, 글자 깨짐 등의 문제가 발생할 수 있습니다. 필요한 경우 인코딩 라이브러리를 사용하여 문자열을 변환하세요.

  • Name
    동적 페이지 처리
    Type
    주의 사항
    Description

    Cheerio는 정적인 HTML 페이지 스크래핑에 적합하며, 자바스크립트로 렌더링되는 동적인 페이지의 내용을 가져오려면 별도의 라이브러리를 사용해야 합니다.

  • Name
    법률 및 서비스 약관 준수
    Type
    주의 사항
    Description

    웹 스크래핑 시, 해당 웹사이트의 법률 및 서비스 약관을 준수하여 민감한 정보나 저작권이 있는 내용을 적절하게 처리해야 합니다.

Usage

const cheerio = require('cheerio');

const htmlString = '<h1>Hello, Cheerio!</h1>';
const $ = cheerio.load(htmlString);

// 요소 선택
const heading = $('h1');

// 텍스트 가져오기
const text = heading.text(); // 결과: "Hello, Cheerio!"

// 속성 가져오기
const attributeValue = $('input').attr('type'); // 예: <input type="text">에서 type 값을 가져옵니다.

// 요소 추가하기
$('body').append('<p>New paragraph</p>');

// 요소 제거
$('p').remove();

Example

서버에서 API 요청을 처리하는 코드입니다. 하지만 lib/lostark/scrapper를 통해, cheerio를 통해 웹 스크래핑 후, 로스트아크 캐릭터 정보를 사용자에게 전달합니다.

사용자 니즈를 충족시키는 캐릭터 검색 결과를 위해서는 최소 700줄 이상의 cheerio 코드가 필요하고, 최소 정보를 넘어 모든 정보를 불러오기 위해서는 더 많은 코드가 필요할 것으로 보입니다.

불필요한 코드 제거 또는 더 좋은 방법이 있을 수 있기 때문에, cheerio라는 기능에 대해서만 글을 읽어주시면 감사하겠습니다.

추가 설명

  • Name
    HTML 로드 및 Cheerio 객체 생성
    Type
    예시
    Description
    • getCharacterInfo 함수에서 입력된 캐릭터 이름을 기반으로 웹페이지 URL을 생성합니다.
    • getHTML 함수를 사용하여 웹페이지를 불러옵니다. 기능을 담당하는 axios.get을 사용하여 웹페이지의 HTML 코드를 가져옵니다.
    • 가져온 HTML 코드를 cheerio.load 함수에 전달하여 Cheerio 객체를 생성합니다. 이 객체를 사용하여 웹페이지 내의 요소를 선택하고 조작할 수 있습니다.
  • Name
    특정 요소 선택 및 정보 추출
    Type
    예시
    Description
    • Cheerio 객체와 선택자를 사용하여 웹페이지에서 원하는 정보를 포함하는 HTML 요소를 선택합니다.
    • 선택한 요소의 내용과 속성을 추출하여 사전 객체에 저장합니다.
  • Name
    요소의 내용 수정 및 추가
    Type
    예시
    Description
    • 변경하거나 추가할 요소를 찾습니다.
    • 찾은 요소의 내용을 수정하거나 새로운 요소를 추가합니다.

searchCharacter.js

import { searchCharacter } from '@/lib/lostark/scrapper'

export default async function handler(req, res) {
    try {
        const { name } = req.query
        const result = await searchCharacter(name)
        return res.status(200).json({ data: result })
    } catch (error) {
        console.error(error)
        return res
        .status(500)
        .json({ message: 'Error retrieving character information' })
    }
}

scrapper.js

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

const NAME = 'name'
const URL_HEADER = 'NEXT_LOSTARK_WEB_URL'

const getHTML = async (url) => {
    try {
        return await axios.get(url)
    } catch (error) {
        console.log(error)
    }
}
const getCharacterInfo = (name) => {
    const URL_PARAMS = `${name}`
    return URL_HEADER + encodeURI(URL_PARAMS)
}
const searchCharacter = async (name) => {
    const URL = getCharacterInfo(name)
    return await getHTML(URL).then((html) => {
        // 아래 LostArkResult 결과는 예시입니다.
        let LostArkResult = {
            Character: '',
            profileEngraveSet: []
        }
        const $ = cheerio.load(html.data, { xmlMode: false })
        let profileEngraveSet = []
        $(
        '.profile-ability-engrave > .swiper-container > .swiper-wrapper > .swiper-slide',
        ).each((i, li) => {
        const children = $(li).children()
            children.each((i, child) => {
                const title = $(child).find('span').text()
                const desc = $(child).find('div').find('p').text()

                profileEngraveSet.push({ title: title, content: desc })
            })
        })
        // Character는 예시입니다.
        const Character = $(
            '#lui-tab1-1 > div > div.collection-graph > div > h4 > span',
        )
    }
    return LostArkResult
}
module.exports = {
    NAME,
    searchCharacter,
}