이미지 크롤링하기 (feat. axios & cheerio)

hzn·2023년 4월 16일

PROJECT🏝

목록 보기

18/24

axios와 cheerio로 이미지 URL 크롤링하기

0. 설치하기

yarn add axios cheerio

1. axios로 데이터 받아오기

const getLinkMetaData = async (e: ChangeEvent<HTMLTextAreaElement>) => {
	axios({
      	method: 'get',
      	url: e.target.value,
    	}).then(({ data, status }) => {
  		console.log(data)
...
  })

console.log(data)

axios로 받아온 해당 주소의 data.

이 중 필요한 부분은 property="og:image"인 meta 태그의 content의 값이다.

2. cheerio로 데이터 추출하기

1) 받아온 데이터 소스를 cheerio에 로드

   const $ = cheerio.load(data);

2) each()를 사용해 여러 항목 처리하기

  $('meta').each((_, el) => { // meta 태그인 각 항목에 대해 실행
        const isMetaImage = $(el).attr('property') === 'og:image'; // property가 'og: image'인지 T/F
        if (isMetaImage) {
          const imgUrl = $(el).attr('content'); // 해당 태그(항목)의 content 속성의 값

          // 2000자 이상의 경우 크롤링 불가
          if (imgUrl && imgUrl?.length >= 2000) {
            return;
          } else {
            setImageLink(imgUrl); // imageLink state 바꿔주기
          }
        }
      });

전체 코드

해당 Input의 onBlur 시 실행되는 함수 getLinkMetaData 전체 코드 (크롤링해온 이미지 주소를 imageLink state로 넣어주는 함수)

  const getLinkMetaData = async (e: ChangeEvent<HTMLTextAreaElement>) => {
    axios({
      method: 'get',
      url: e.target.value,
    }).then(({ data, status }) => {
      // axios 에러 처리
      if (status !== 200) {
        alert('이미지 정보를 불러오는데 실패했습니다.');
      }

      const $ = cheerio.load(data);
      $('meta').each((_, el) => {
        const isMetaImage = $(el).attr('property') === 'og:image'; // "image"
        if (isMetaImage) {
          const imgUrl = $(el).attr('content');
          if (imgUrl && imgUrl?.length >= 2000) {
            return;
          } else {
            setImageLink(imgUrl);
          }
        }
      });
    });
  };