'2024/06/08'에 해당되는 글 1건

ChatGPT 가 HTML 내에서 전체 댓글 수를 가져오는 코드를 만들어줬고, 나는 이를 JS 함수를 만들어 붙여넣기만 했다.

이번에는 실제로 현재 페이지의 전체 댓글 선택 버튼을 클릭하고, 변경메뉴 내의 "휴지통으로 이동" 버튼을 클릭하는 코드를 CoPilot 과 함께 작성해서 완성하려 한다.

# 코딩 동반자 CoPilot 

CoPilot 은 왜 이름을 이렇게 지었는지 사용할수록 이해가 된다. 묻고 대답하는 ChatGPT 와 같은 형태 보다는 IDE 의 AutoCompletion 기능을 적극 활용하여 내가 개발하고 있는 코드를 보고 있다가 '아.. 이런 코드 작성하려고 하는거지?' 하며 끊임없이 나의 코드를 자동완성 해주려고 노력해준다.

또는 코드를 개발 시작하기 전에 의사(pseudo)를 코드가 아닌 주석으로 입력해주면 그 의사에 맞는 코드를 뿅~ 하고 만들어주며, 반대로 코딩에 심취한 나머지 주석을 안달고 넘어간 코드에 주석도 달아준다.

CoPilot 도 채팅 기능이 추가되고 지금은 File 내용을 붙여넣지 않아도 파일 자체를 참조할 수 있도록 지정해줄 수도 있어 좀더 광범위한 질답이 가능하며, 출시 예정인 CoPilot Workspace 기능이 나오면 이제 Code Snippet 수준이 아니라 요구사항을 기반으로 Project 자체를 CoPilot 과 함께 개발이 가능해진다.

# 코드 개발 시작

아무 이름의 .js 파일을 Visual Studio Code 로 생성 했고, 파일을 열고 일단 ChatGPT 가 만들어준 코드를 내용으로 하는 함수를 위에 붙여 두었다. 그리고 댓글관리 페이지의 HTML 을 크롬 브라우져로 개발자 도구 로 부터 복사해 와 .html 파일로 저장했다.

이제 CoPilot 에게 내가 만들고 싶은 JS 코드를 // 주석으로 설명한다

// ChatGPT 가 만든, 현재 댓글 수를 가져오는 함수
function getCurCount() {
    // Select the h3 element containing the specific txt_count
    const titContElement = document.querySelector('.tit_cont');

    // Select the span element containing the number within the h3 element
    const txtCountElement = titContElement.querySelector('.txt_count');

    // Get the text content from the span element
    const txtCount = txtCountElement.textContent;

    // Remove commas from the string and convert it to a number
    return parseInt(txtCount.replace(/,/g, ''), 10);
}

// list.html 에서 id 가 "checkComments" 인 input 을 클릭하고 "휴지통으로 이동" 이름의 버튼을 누르는 함수
function delComments() {
    // id 가 checkComments 인 element 를 가져와
    var checkComments = document.getElementById("checkComments");
    checkComments.click();

    // type 은 button 이고 class 는 btn_g , value 는 "휴지통으로 이동" 인 input 을 가져옴
    var delButton = document.querySelector("input[type=button].btn_g[value='휴지통으로 이동']");
    delButton.click();
}

// 3초에 1번 씩 getCurCount() 가 100 보다 크면 delComments() 를 실행한다 
setInterval(() => {
    if (getCurCount() > 100) {
        delComments();
    }
}, 3000);

코드 에서 getCurCount() 부분은 ChatGPT 가 만들어준 코드이고, 그 아래 delComments() 부터는 // 주석을 이용해 내가 만들고 싶은 코드의 주석을 넣어준 것이다. 처음부터 완전히 깔끔한 코드를 만들어주는것은 아니지만 내가 일부 수정하거나 주석의 내용을 보완/변경 해 나아가면서 좀더 내가 원하는것과 일치한 코드를 만들게할 수 있다.

# 브라우져에서 실행 시키기

간단히 저정도의 코드를 만들어서 Chrome 의 개발자 도구 내 console 에 붙여넣고 실행하면 나를 대신하여 댓글 삭제를 진행해준다.

1. 브라우저 콘솔 하단에 위에 만든 코드를 Copy & Paste 해놓고 엔터를 친다!

2. 자동으로 화면에 Click 이벤트를 보내며 돌아가는 모습을 구경하고 있으면 된다

# 좀더 나은 방향으로..

위의 ChatGPT 와 CoPilot 이 만들어준 코드로 붙여놓고 실행하면 대략 1페이지(15 댓글)을 지우는데에 3~5초 가량의 시간이 소요된다.

1. "8,157 Page * 4초(평균잡아) = 약 9시간" 의 시간이 소요된다. 물론 자동으로 돌고 있을 것이라 그냥 기다려주면 되긴 하지만 왠지 좀더 빠르게 진행되었으면 하는 욕심이 든다..

2. 게다가 현재 방식은 댓글 중 저 요상한 이름의 공격자와는 관계 없는 댓글들 까지도 모두 삭제해버리는 피해를 감수해야 한다.

위 두가지 고민을 해소하기 위해 약간의 시간을 더 투자해 개선을 해보기로 한다! 어떻게~? "영혼의 단짝 코 파일러~ㅅ 과 함께" 

나의 계획은 이렇다

1. 댓글목록 조회는 Ajax 로 XHR GET 요청을 하고 가져온 목록을 화면에 Rendering 하는데, 이때 Query String 으로 page=? 형태로 하여 현재 페이지에 뿌려줄 15개의 항목을 가져온다. 대략 조회는 1~2 초 정도가 소요된다. --> 이 요청을 내가 직접 JS 로 가져오고 병렬로 요청하면 아마도 시간이 대폭 단출 될 것이다!

2. 휴지통으로 이동 버튼 클릭 시에도 Ajax 로 XHR DELETE 요청을 하는데, 이때 form-data 형태로 지울 댓글들의 ID 를 "," separate 하여 보낸다! 15개 기준으로는 2~5초 가량이 소요된다. --> 이 요청에 15개가 아닌 더 많은 수의 item 을 한번에 넣어 보낼 수 있다면? 굿굿~!

3. 1번 + 2번 모두 가능하다면 1 번에서 가져온 item 들 중에서 작성자와 IP 필드가 있을 것이고, 이걸 패턴 매치하여 나쁜놈만 걸러서 삭제할 수 있다! 굿굿굿~!

그래서 일단 1~3 번을 수동으로 테스트 해봤는데~~! 오예~ 모두 가능한 상황이다!

# 개선된 코드

CoPilot 과 함께 난 // 주석으로 일을 시키고~ CoPilot 이 열심히 만들고 주인님이 빠꾸 해 가면서 만들어낸 코드는 아래와 같다.
(짧은 시간에 VERSION 3 가 되어버렸는데, VERSION 2는 유사한 방식이나 작업을 fromPage ~ toPage 의 범위로 하게 하였으나 이러면 중간에 삭제 대상이 아닌 댓글들로 목록이 꽉 차게 되면 문제가 생길 수 있어 방식을 변경했다)

아래 코드에서 blockersNamePattern 과 blockersIps 의 내용을 바꾸어서 실행하면 된다.
blockersNamePattern 은 해당 문자열이 author 내용 내에 일부 매치만 되어도 true 가 되므로 잘 생각해서 한다.

실행은 Chrome 개발자도구 Console 에 모든 코드를 붙여넣고 실행한 후,
deleteCommentsForBatchSize(<한번에 delete 요청 보낼 댓글 수>) 를 하면 된다.

////////////////////////////////////////////////////////////
//--- VERSION 3 
// 이거 쓰자.. 브라우져 console 에 다 붙여놓고 deleteCommentsForBatchSize(500) 이런식으로 실행하면 됨   
////////////////////////////////////////////////////////////

let totalCount = 0;
blockersNamePattern = ["Mmz","MjPAz","-1","if(now", "@@"];
blockerIps = ["158.247.***.145"];

function containsBlockerNamePattern(author, ip) {
    for (let i = 0 ; i < blockersNamePattern.length ; i++) {
        if (author.includes(blockersNamePattern[i]))
            return true;
    }

    for (let i = 0 ; i < blockerIps.length ; i++) {
        if (ip.includes(blockerIps[i]))
            return true;
    }

    return false;
}

function collectAllCommentIdsUntilLimit(limit) {
    // Create an array to store all comment IDs
    const allCommentIds = [];
    const fetchPromises = [];
    let page = 1; // Initialize page number

    // Function to delay execution
    const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

    // Function to fetch comments and process them
    const fetchAndProcessComments = () => 
        fetch(`https://goodjoon.tistory.com/manage/comments.json?filter=&searchType=writer&searchKeyword=&page=${page}`)
            .then(response => response.json())
            .then(data => {
                // Extract the comment IDs from the response and push them to the allCommentIds array
                const commentIds = data.items
                    .filter(item => containsBlockerNamePattern(item.author, item.ip))
                    .map(item => item.id);
                totalCount = data.totalCount;
                console.log("Page: " + page);
                console.log("commentIds to delete: " + commentIds.length);
                allCommentIds.push(...commentIds);

                // Check if the limit is reached or not
                if (allCommentIds.length < limit ) {
                    page++; // Increment page number for the next fetch
                    return delay(500).then(fetchAndProcessComments); // Continue fetching with delay
                }
            });

    // Start the fetching process
    fetchPromises.push(fetchAndProcessComments());

    // Return a promise that resolves when the limit is reached or all comments are fetched
    return Promise.all(fetchPromises).then(() => allCommentIds);
}

function deleteComments(ids) {
    // Create a FormData object
    const formData = new FormData();

    // Append the IDs to the FormData object
    formData.append('ids', ids.join(','));

    // Make a DELETE request to the comments API
    console.log(ids.length + " 개 삭제 요청 보냄... 기다려..");
    return fetch('<https://goodjoon.tistory.com/manage/comments.json>', {
        method: 'DELETE',
        body: formData
    })
        .then(response => {
            // response 를 출력
            console.log(response);
            return response.json();
        })
        .then(data => console.log(data))
        .then(() => console.log("삭제 완료!"));
}

let timeoutHandle = null;
let itemsPerPage = 15;

function deleteCommentsForBatchSize(batchSize) {
    // Collect all comment IDs from the specified pages
    collectAllCommentIdsUntilLimit(batchSize).then(ids => {
        // Delete the collected comment IDs
        console.log("totalCount: " + totalCount);
        if (ids.length >0 ) { // 총 댓글 수가 (pageTo - pageFrom) * itemsPerPage 보다 크거나 같으면
            console.log("삭제할 댓글 수: " + ids.length);
            deleteComments(ids).then( () =>
                timeoutHandle = setTimeout(() => deleteCommentsForBatchSize(batchSize), 1000)   // 1초 뒤에 deleteIdsOfPage(pageFrom, pageTo) 를 실행
            );
        } else {
            console.log("삭제할 댓글이 없음");
        }
    });
}

테스트 하다보니 제약사항이 있었다!

1. collectAllCommentIdsUntilLimit() 코드 내에 delay 를 위한 Promise 에 전달되는 timeout 값은 500ms 정도가 적당하다. 더 짧게 하다 보니 Tistory 서버가 앞단에서 500번대 에러를 내며 한동안 응답하지 않음을 발견했다

2. batchSize 는 delete 시에 큰 영향이 있는데, 한번에 1,000 개를 넣어보니 Tistory 의 Rev. Proxy 서버 쯤에서 너무 응답이 길어져 Response Timeout 을 낸다. 500 개 정도 부터 시작해봐도 될것 같다

이렇게 작성한 코드를 붙여넣고 위에 설명한대로 deleteCommentsForBatchSize() 를 실행시키면 몇시간 딴짓하고 돌아오면 12만개 쯤이야 삭제를 해놨을 것이다~~

# 마치며

이제 Tistory 는 Blog 시장에서 사라져버리는 수순을 기다리고 있는것인지 무언지 정말 실망스러운 운영과 시스템 유지보수가 아쉬움의 선을 넘어선 감정을 갖게 만든다.

무엇이 발전하고 있는지는 모르겠으나 플랫폼이 망가져가고 있는것은 확실히 느낀다.