💻 코딩 일기 : [Spring] '웹 크롤링' 편

🔔 '웹 크롤링하고 DB에 저장하기'에 대해서 알아보자!

💟 웹 크롤링 하는 방법

웹 크롤링 : 웹 크롤링을 통해 데이터를 수집하고, 이를 데이터베이스에 저장하는 방법입니다.

• Java에서 웹 크롤링을 하기 위해서는 Jsoup 라이브러리를 사용하여 웹 페이지에서 데이터를 추출합니다.
• 크롤링된 데이터를 DB에 저장합니다.

💟 적용하기

ProductController.java

@RestController
@RequestMapping("/api/product")
@RequiredArgsConstructor
public class ProductController {
    private final ProductService service;

    @GetMapping("/list")
    public List<Product> product() throws IOException {
        return service.getProduct();
    }
}

• 클라이언트의 요청을 처리하고 서비스를 호출하여 데이터를 반환합니다.

ProductService.java

@Service
@RequiredArgsConstructor
@Transactional(rollbackFor = Exception.class)
public class ProductService {

    private final ProductMapper mapper;
    private static String product_url = "링크";

    public List<Product> getProduct() throws IOException {
        List<Product> productList = new ArrayList<>();
        Document document = Jsoup.connect(product_url).get();

        Elements contents = document.select("section div.cards-wrap article.card-top");

        for (Element content : contents) {
            Product product = Product.builder()
                    .image(content.select("div img").attr("abs:src")) //이미지
                    .title(content.select("h2").text()) // 제목
                    .url(content.select("a").attr("abs:href"))  // 링크
                    .build();
            productList.add(product);

            // 데이터가 이미 존재하는지 확인
            if (mapper.countByImage(product.getImage()) == 0) {
                mapper.insertProduct(product);
            }
        }
        return productList;
    }
}

• 크롤링을 수행하고 크롤링된 데이터를 DB에 저장하는 로직을 작성합니다.

• 크롤링을 통한 데이터 수집

  • Jsoup.connect(PRODUCT_URL).get() : Jsoup을 사용하여 해당 URL에서 HTML 문서를 로드하고 이를 Document 객체로 반환합니다.
  • document.select : HTML 문서에서 필요한 데이터를 포함하는 요소들을 선택합니다. CSS 선택자에 맞는 요소들을 가져옵니다.
  • 각 요소를 순회하면서 이미지 url, 제목, 링크를 추출하여 Product 객체를 생성합니다.

• 데이터가 DB에 없으면(count가 0) DB에 저장하고 그렇지 않으면 DB에 저장합니다.

ProductMapper.java

@Mapper
public interface ProductMapper {

    @Insert("INSERT INTO product (image, title) VALUES (#{image}, #{title})")
    int insertProduct(Product product);

    @Select("SELECT COUNT(*) FROM product WHERE image=#{image}")
    int countByImage(String image);
}

• insertProduct : 상품을 DB에 저장합니다.
• countByImage : 해당 상품이 현재 DB에 있는지 조회합니다.

Product.jsx(React)

export function ProductList() {
  const [productList, setProductList] = useState([]);
  useEffect(() => {
    axios.get(`/api/product/list`).then((res) => setProductList(res.data));
  }, []);

  return (
    <div>
      <Table>
        <Thead>
          <Tr>
            <Th>이미지</Th>
            <Th>제목</Th>
          </Tr>
        </Thead>
        <Tbody>
          {productList.map((product) => (
            <Tr key={product.title}>
              <Td onClick={() => (window.location.href = product.url)}>
                <Image src={product.image} />
              </Td>
              <Td>{product.title}</Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </div>
  );
}

export default ProductList;

• GET 요청을 보내고 서버에서 데이터를 받아와 화면에 표시합니다.

product 테이블 생성

CREATE TABLE product (
                         id INT AUTO_INCREMENT PRIMARY KEY,
                         image VARCHAR(500) NOT NULL,
                         title VARCHAR(500) NOT NULL
);

• 필요한 데이터 DB에 저장할 수 있게 테이블을 생성합니다.