[Next.js] 멜론 아티스트 상세페이지 크롤링

    const artistDetail = async (id: any) => {
        const html = await axios.get(`https://www.melon.com/artist/detail.htm?artistId=${id}`);
        const $ = cheerio.load(html.data)
        const result = new Array()

        const award = $('#d_artist_award').text().replace(/\t|\n+/g, "")
        const article = $('#d_artist_intro').text().replace(/\t|\n+/g, "")

        const debutSong: any[] = [];
        $('.debutsong_info > dl > dt > a').each(function(this: any) {
            debutSong.push($(this).text())
        })

        const info = new Array()
        const infoTitle: any[] = [];
        const infoContent: any[] = [];
        $('.section_atistinfo03 > dl').each(function(this: any) {
            $(this).find('dt').each(function(this: any, idx: number) {
                infoTitle.push($(this).text())
            })
            $(this).find('dd').each(function(this: any, idx: number) {
                infoContent.push($(this).text().replace(/\t|\n+/g, ""))
            })
            for (let i = 0; i < infoTitle.length; i++) {
                info[i] = {[infoTitle[i]]: infoContent[i]}
            }
        })

        result[0] = {'debutSong': debutSong, 'article': article, 'award' : award, 'info': info}
        return result;
    }

 

수상내역과 아티스트 소개를 가져오게 되면 '/n /t' 의 문자열이 포함되어 나와서

replace로 빈문자열 대체를 해주었다.

 

아티스트 활동정보는 태그에 클래스가 지정되어 있지 않아서

접근해 each문을 돌려도 한 묶음으로 나오는 문제가 발생했고,

 

이는 $(this).find 메서드를 통해 해당 태그 안으로 접근하여

each 문을 돌려서 해결하였다.

 

많이 하니까 멜론 상세페이지 접근이 거부당했다..