백엔드에서 크롤링하기 (3) - 리액트와 연동, 데이터 범위 설정

일일이 페이지 주소나 포스트맨에 /csvDatabase 를 입력하지않고도 해당 성별의 라디오 버튼만 누르면 직접 해당 주소로 GET 요청을 보낼 수 있게 작성했다.

[ 리액트컴포넌트.js ]

const handleGenderChange = async (e) => {
        setGender(e.target.value);
        if (e.target.value === 'female') {
            try {
                const csvDataToDB = await csvToDatabaseRequest(); // GET 요청 보내주는 파일에서 가져온 함수 호출
                setCsvDataToDB(csvDataToDB);   // DB 상태 화면 단에 업데이트
            } catch (error) {
                console.error('Error fetching fashion data:', error);
            }
        }
    };

[ FashionService.java ]

for (int i = 0; i < 20; i++) {	// 데이터 20개 가져오기
            Element element = contents.get(i);
            Fashion fashion = Fashion.builder()
                    .image(element.select("a img").attr("abs:src")) // 이미지
                    .subject(element.select("a span ").text()) // 설명
                    .build();
            fashionList.add(fashion);
        }

근데 여기서 생각지 못한게 있었는데 이렇게 되면 해당 라디오 버튼을 누를 때마다 DB에 데이터가 누적된다는 것이었다....
그래서 핸들러이벤트를 추가하여 라디오 버튼 클릭 시 GET요청을 처음 한번만 보내도록 리팩토링할 예정이다.

위 사진은 20개 데이터만 가져온 모습이다.

• 추후에 라디오 버튼은 제거되었습니다.