지난 글에서는 뭐가 문제인지, 어떻게 할 구상인지에 대해 글을 써봤고, 이번에는 본격적으로 AI 에게 개발을 시켜볼 차례이다.
# ChatGPT (GPT-4o)
ChatGPT 는 현재 상황을 인식시키고 답을 내놓으라고 할 때 참 착하게 동작해준다. GPT-4o 모델로 image 를 포함한 file 을 upload 하여 일을시킬 수 있어 좀더 여러가지 일을 시킬 수도 있어 좋다.(무료 플랜에서도 제한적으로 사용 가능하다)
ChatGPT 에게 시킬 일 : ChatGPT 에게는 HTML 코드의 일부를 Image 로 캡춰해서 분석하게 한 후 총 남은 댓글의 개수를 가져오는 Javascript 코드를 만들어 내라고 시켰다. (아래 캡쳐의 122,364 라는 숫자를 가져오고 싶은 것이다)
무한정 일을 반복시킬 수는 없으므로 처음에는 남은 댓글 수가 0이 될 때 까지 돌려버리려 했다. (나중에는 정말 진심으로 감사드릴 댓글까지 지워지면 안되겠다 싶어 좀더 시간을 들여 수정 했지만..^^)
위 처럼 Chrome 의 개발자도구에 있는 HTML 코드 일부를 Image 로 캡춰해서 필요한 부분을 가져오는 JS 를 만들어달라고 하니 아래 처럼 코드를 생성해준다
나는 Javascript 를 Chrome 개발자도구의 console 에서 직접 실행시킬것이기 때문에 "DOMContentLoaded" 이벤트 Listener 를 구현할 필요는 없고, 그 안의 내용만 있으면 된다.
요즘은 Client 쪽 JS 를 개발할 일이 없기때문에 왠만한 ECMAScript 표준함수 들에 대해서는 다 까먹고 있었는데 궂이 찾아볼 필요 없이 잘 코드를 뽑아준다. HTML 에는 숫자에 자릿수 구분자 "," 가 들어가 있는데, 이걸 replace 해주어 int 로 변환해주는 코드도 친절하게 넣어준다.
# 좀더 일 주기
잘 해주었다 GPT-4, 그러나 그리 호락한 주인이 아니어서 일을 좀 더 하라고 지시하고 싶은 부분이 있다.
HTML 구조 상 ChatGPT 가 만들어준 코드 처럼 ".txt_count" 클래스로만 가져오면 혹시나 다른데에서도 저 클래스를 쓰는 경우가 생긴다면 잘못된 값을 가져올 수 있으니 (뭐 현재 페이지 코드를 보면 그렇지는 않았지만~), 좀더 querySelector() 의 query 를 specific 하게 쓰거나 다른 코드를 덧붙였으면 하는 주문을 해봤다
💬 const txtCountElement = document.querySelector('.txt_count');
여기서 .txt_count 클래스는 다른곳에도 사용될 수 있으니 조금 변경해줘
🤖
다른 곳에서도 .txt_count 클래스가 사용될 수 있기 때문에, 특정 부모 요소 내에서 해당 요소를 선택하도록 수정하겠습니다. tit_cont 클래스를 가진 요소 내에서 .txt_count 클래스를 선택하도록 변경하겠습니다.
<!DOCTYPE html>
....
중략
...
<script>
// JavaScript to get the number and convert it
document.addEventListener('DOMContentLoaded', (event) => {
// 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
const number = parseInt(txtCount.replace(/,/g, ''), 10);
// Log the number to the console
console.log(number);
});
</script>
</body>
</html>이 코드에서는 .tit_cont 클래스를 가진 부모 요소 내에서 .txt_count 클래스를 가진 자식 요소를 선택합니다. 이를 통해 해당 클래스가 다른 곳에 사용되더라도 정확한 요소를 선택할 수 있습니다.
그래서 일단 전체 댓글의 개수를 가져오는 function 하나는 아래와 같이 getCurCount() 라는 이름으로 만들었다
// 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);
}
이렇게 ChatGPT 에게 HTML 의 Capture Image 를 주고 코드를 만들게 하고 수정까지 요청하여 간단하지만 코드를 하나 만들었으니, 다음에는 CoPilot 을 옆에 앉혀두고 나머지 기능들을 개발 해 나아가자 (다음글 계속)
'AI 응용 > 개발자의 AI' 카테고리의 다른 글
| 티스토리의 댓글 테러, ChatGPT 와 CoPilot 과 함께 처리 #3 (2) | 2024.06.08 |
|---|---|
| 티스토리의 댓글 테러, ChatGPT 와 CoPilot 과 함께 처리 #1 (0) | 2024.06.07 |
| MongoDB 로 Pub/Sub 구현하기 (0) | 2023.02.08 |
| AICC 솔루션 개발을 하려면 뭘 고려해야하나? (0) | 2023.01.28 |
Good Joon
IT Professionalist Since 1999
