3. Search Bible (iframe 수정)

단점

저번 글에서도 얘기했듯이 Search Bible에는 iframe을 사용하여 웹사이트를 그대로 가져온다는 치명적인 단점이 있었다. 그래서 이번 시간에는 이러한 단점을 해결할 것이다.

방법

먼저 iframe으로 웹사이트를 보여주고 있다는 단점을 해결하기 위해서 성경을 보여주는 사이트를 크롤링 하기로 했다.

세팅

먼저 JS로 사이트를 크롤링 하는 방법을 찾아보니 cheerio라는 크롤링을 위한 라이브러리가 있어 cheerio를 사용하기로 결정했다. 먼저 cheerio를 다운로드 받기 위해 yarn add cheerio를 한다.

시작

❗️원래는 HTML을 가져오는 함수를 만드려고 했는데 클라이언트 사이드에서 크롤링을 하려고 하니 CORS오류가 나서 API로 만들기로 결정했다.

먼저 HTML을 가져오는 API를 만들기 위해 pages 폴더안에 api라는 폴더를 만든다. 그리고 api 폴더안에 getHTML.ts라는 파일을 만들면 API를 만들기 위한 준비는 끝난다.

import cheerio from 'cheerio';
import { NextApiRequest, NextApiResponse } from 'next';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const {
    query: { version, book, verses },
  } = req;
  const url = `https://ibibles.net/quote.php?${version}-${book}/${verses}`;
  const fetchData = await fetch(url, { mode: 'no-cors' });
  const $ = cheerio.load(await fetchData.text());
  const html = $('body').html();
  return res.send({
    html,
  });
};

HTML을 가져오는 코드는 다음과 같이 구성했다. 먼저 성경 버전 (한국어 or 영어), 성경, 장&절을 query로 받아온다. 그리고 이렇게 받아온 정보를 토대로 URL을 만든 다음에 그 URL로 fetch를 보낸다.

❗️여기서 no-cors를 사용하지 않으면 cors오류가 났다. 하지만 나는 먼지라 이 오류에 대해 잘 모르기에 그냥 no-cors 모드를 사용했다.

fetch해서 받아온 데이터에서 cheerio를 이용해 HTML을 뽑아낸다. 그리고 그렇게 뽑아낸 HTML을 String 형식으로 return 한다. 그러면 React에서 지원하는 dangerouslySetInnerHTML라는 기능을 이용해서 String을 HTML로 바꿔준다.

❗️ 이름에서부터 알 수 있듯이 사실 이 기능을 절대 사용하면 안 된다. 해커가 저 부분을 이용해서 사이트를 공격할 수도 있기 때문이다.

끝!

오늘은 이렇게 Serach Bible의 치명적인 단점이였던 iframe을 없애 보았다. 사실 iframe을 없앤 이유가 다크모드를 적용하기 위함이였기 때문에 다음 시간에는 다크모드를 구현해 보겠다.