chatGPT 사용해서 오류 고쳐보기

//비전공자가 혼자 공부하는 공간입니다

 

 

스택오버플로우를 참고하여 checkbox 체크한 것들을 리스트에 추가하는 것은 성공하였다. 

const checkboxes = document.querySelectorAll('input[type=checkbox]');

function getChecked() {
    let checked = [];

    const ul = document.getElementById('urIngredients');
    ul.innerHTML = "";

    for (let i = 0; i < checkboxes.length; i++) {
        let checkbox = checkboxes[i];
        if (checkbox.checked) {
    
            const li = document.createElement('li');
            li.innerHTML = document.querySelector('label[for="' + checkbox.id + '"]').textContent.trim();
            ul.appendChild(li);
          }
        }
        return checked;
    };

그런데 체크하면 'No selected ingredients' 라는 문구는 사라지게 만들고 싶은데 p.remove();를 해도 되지 않아서 

요즘 핫한 chatGPT 한 번 사용해볼겸 오류를 고쳐보려고 한다. 

 

질문하자마자 코드를 바로 써주니까 너무 신기하다

근데 자꾸 내가 원하는대로 되지가 않는데 아무래도 내가 아직 내 코드에 대한 설명이 부족한 단계여서 그런가 싶기도 하다

 

중간중간 간단한 질문에 바로 답해줘서 편하다

 

제일 신기한 건 시리랑 다르게 대화내용을 전부 기억하고 있어서 사람과 의견 주고 받는 느낌? 한 가지 아쉽다는 건 실제 사람과 대면하면 실물을 보여주면서 설명을 할 수 있는데 챗지피티는 아직 사진을 보여주면서 설명하는 기능이 없는 것 같다 그게 좀 답답

 

여러번의 의견 충돌(?) 끝에 마지막으로  코드를 받아봤다

const checkboxes = document.querySelectorAll('input[type=checkbox]');

function getChecked() {
    let checked = [];

    const ul = document.getElementById('urIngredients');
    const p = document.getElementById('noItem');

    for (let i = 0; i < checkboxes.length; i++) {
        let checkbox = checkboxes[i];
        if (checkbox.checked) {
            checked.push(checkbox.id);
        }
    }
    
    if (checked.length > 0) {
        p.style.display = "none";
        ul.innerHTML = "";
        for (let i = 0; i < checked.length; i++) {
            const li = document.createElement('li');
            li.innerHTML = document.querySelector('label[for="' + checked[i] + '"]').textContent.trim();
            ul.appendChild(li);
        }
    } else {
        p.style.display = "block";
        ul.innerHTML = "";
    }
};

오 드디어 성공! 체크하면 p 태그가 사라지고 체크를 다 풀면 p 태그가 다시 나오게 하기 

 

 

chatGPT 가 추가해 준 코드를 공부해보자 

Array.push

push가 array에 새로운 element 를 추가하는 것은 알고 있었지만 이렇게도 사용할 수 있구나 

근데 왜 굳이 .push를 쓸까 싶어서 챗지피티에 물어봤다

영어를 안 쓴지 하도 오래 되어서 broken english가 되었지만 그래도 잘 이해하고 답변을 준다 

혼자 독학하다가 드디어 너무 간단하고 멍청한 것(?) 도 창피함 없이 물어볼 수 있는 선생님이 생긴 것 같아 좋다

 

 

종합해보면, chatGPT 사용하면 구글링하는 시간을 훨씬 단축할 수 있고 더 빠르게 배울 수 있긴 하다

그치만 현업으로 일하고 있는 사람들에게는 분명 혁신이겠지만 

아직 코린이 단계인 나는 챗지피티가 '양날의 검' 일지도 모른다는 생각이 든다

구글링 하는 것보다는 시간이 단축되지만 코드 수정을 요구할때마다 내가 아니라 챗지피티를 공부시키는 느낌이랄까 ㅋㅋㅋㅋㅋ

혼자서 구글링하면서 스택오버플로우 찾아보고 남의 코드를 내 코드에 응용해보고 하는 것들이 분명 시간은 느려도 도움이 훨씬 클 것 같고 

챗지피티를 사용하면 시간은 단축되지만 직접 생각해보는 시간을 덜 갖게 되고 응용해보려는 노력을 덜 하게 될 것 같다 

제대로 활용하지 않는다면 그냥 복붙복붙이 되지 않을까 하는 느낌 

 

 

공부할 땐

✅ 1. 일단 논리적으로 생각해보고 틀리더라도 시도해보기

✅ 2. 구글링해서 찾아보기 (스택오버플로우 등)

✅ 3. 정 안되겠다 싶을 때 chatGPT 사용

✅ 4. 붙여넣기에서 끝내지 않고 chatGPT 에서 알려준 코드 분석해보고 이해하기 

 

 

 

//비전공자가 혼자 공부하는 공간입니다