크롤링과 스크래핑은 웹에서 데이터를 수집하고 분석하는 데 유용한 기술입니다. Next.js는 서버 사이드 렌더링과 함께 사용되어 웹 애플리케이션을 구축하는 데 매우 편리한 도구입니다. 이번 튜토리얼에서는 Next.js를 사용하여 웹 페이지에서 데이터를 크롤링하고 스크래핑하는 방법을 알아보겠습니다.
1. Cheerio 설치하기
Cheerio는 jQuery와 유사한 형식으로 HTML을 파싱하는 라이브러리입니다. 이를 사용하여 웹 페이지에서 필요한 데이터를 추출할 수 있습니다. 먼저 프로젝트 폴더에서 다음 명령어를 사용하여 Cheerio를 설치합니다.
npm install cheerio
2. 크롤링 및 스크래핑 코드 작성하기
Next.js의 페이지 파일에서 데이터를 크롤링하고 스크래핑할 수 있습니다. 예를 들어, pages/index.js에 다음과 같은 코드를 작성해 보겠습니다.
import cheerio from 'cheerio';
import axios from 'axios';
export default function Home({ data }) {
return (
<div>
<h1>크롤링 및 스크래핑 예제</h1>
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
);
}
export async function getStaticProps() {
const url = 'https://example.com';
try {
const response = await axios.get(url);
const $ = cheerio.load(response.data);
const data = [];
$('.item').each((index, element) => {
const id = $(element).attr('id');
const title = $(element).find('.title').text();
data.push({ id, title });
});
return {
props: {
data,
},
};
} catch (error) {
console.log(error);
return {
props: {
data: [],
},
};
}
}
위 코드에서는 getStaticProps 함수를 사용하여 서버 사이드에서 웹 페이지를 크롤링하고 데이터를 추출합니다. cheerio를 사용하여 HTML을 파싱하고, 추출한 데이터를 data 배열에 저장한 후 컴포넌트에서 사용할 수 있도록 전달합니다.
3. 실행 및 결과 확인하기
프로젝트 폴더에서 다음 명령어를 사용하여 Next.js 애플리케이션을 실행합니다.
npm run dev
웹 브라우저에서 http://localhost:3000로 접속하면 크롤링 및 스크래핑한 데이터가 화면에 표시됩니다. 웹 페이지의 변경이 있을 때마다 데이터를 업데이트하려면 getStaticProps 함수를 getServerSideProps로 변경하여 실행합니다.
위의 예제 코드는 간단한 크롤링 및 스크래핑 예제이며, 실제로는 웹 사이트의 접근 권한이나 데이터 구조 등 고려해야 할 사항이 많을 수 있습니다. 필요한 경우 더 복잡한 크롤링 및 스크래핑 로직을 구현하고 추가 설정을 할 수 있습니다.
마무리
이번 튜토리얼에서는 Next.js를 사용하여 크롤링 및 스크래핑을 구현하는 방법에 대해 알아보았습니다. Next.js의 강력한 기능을 활용하여 여러 웹 페이지에서 데이터를 추출해 보세요. 크롤링과 스크래핑은 데이터 분석과 개발에 중요한 역할을 할 수 있으므로, 실제 프로젝트에서도 유용하게 활용할 수 있습니다.