🤖 ChatGPT와 함께 공부하는 JavaScript 4일차 - 이미지 숨기기/보이기 토글 기능 미션

오늘은 이미지 숨기기/보이기 토글 기능이다. 조금은 쉬운 미션으로 보이나 if문 활용에 대한 거라 걱정이다.

그리고 항상 addEventListener 기능을 쓸때 안을 어떻게 써야할지 아직 막막하다..ㅠㅠ

많이 써봐야 알수 있겠지..언제쯤 그날이 올까..🥹

🚩 처음 작성한 코드

const image = document.querySelect("#image");
const button = document.querySelect("#button");

botton.addEventLisnter("click", function(){
    if(image.style.display === 'none'){
        image.style.display = 'block';
    }else{
        image.style.display = 'none';
    }
});

작성했는데 안돼서 뭐지..? 했다 '설마 hidden 인가? 해서 hideen은 아닌데..?' 라고 바꿔보았지만 역시나 되질 않았다. 

블로그를 통해 찾아보았지만 여전히 똑같았다..다시 보니..내가 또 오타를 냈다..

📍 발생한 문제

• DOM 선택 메서드를 querySelect로 잘못 표기했다.
• 이벤트 리스너 메서드를 addEventLisnter로 오타를 냈다.
• 버튼 변수명 선언 시 사용한 button을 이벤트 처리할 때는 botton으로 오타를 냈다.

🔧 올바른 수정 코드

const image = document.querySelector("#image");
const button = document.querySelector("#button");

button.addEventListener("click", function(){
    if(image.style.display === 'none'){
        image.style.display = 'block';
    }else{
        image.style.display = 'none';
    }
});

📖 코드 한 줄씩 상세 분석

1. const image = document.querySelector("#image");

• HTML에서 id가 image인 요소를 선택해 image라는 변수에 저장한다.
• 왜?: JavaScript에서 요소를 조작하기 위해 미리 선택해 둔다.

2. const button = document.querySelector("#button");

• 버튼 요소를 선택하여 button이라는 변수에 저장한다.
• 왜?: 버튼 클릭 이벤트를 관리하기 위해 버튼 요소를 미리 저장한다.

3. button.addEventListener("click", function(){ ... });

• 버튼 클릭 이벤트를 감지하여 클릭 시 실행할 코드를 설정한다.
• 왜?: 사용자가 버튼을 클릭할 때 동작이 수행되도록 한다.

4. if(image.style.display === 'none'){

• 이미지가 현재 보이지 않는 상태인지 확인한다.
• 왜?: 이미지가 숨겨져 있는지 보이고 있는지 상태를 판단하기 위함이다.

5. image.style.display = 'block';

• 이미지가 숨겨져 있다면 이미지를 보이게 설정한다.
• 왜?: CSS 스타일을 직접 바꿔 이미지가 보이도록 만든다.

6. image.style.display = 'none';

• 이미지가 보이고 있다면 숨기게 설정한다.
• 왜?: CSS 스타일을 직접 바꿔 이미지를 숨기도록 만든다.

👍 성공한 결과 화면

See the Pen Untitled by 7xfe user (@7xfe-user) on CodePen.

📖 문제 원인 분석 및 주의점

• JavaScript의 메서드명과 변수명은 정확히 일치해야 한다.
• DOM 요소 선택 시 정확한 메서드명을 기억하자 (querySelector).
• 이벤트 처리 시 정확한 메서드명을 확인하자 (addEventListener).
• 변수 선언과 사용할 때 철자가 정확히 일치하는지 항상 확인하자.

📌 의사코드 정리

1. 아이디가 "image"인 이미지 요소를 변수에 저장한다.
2. 아이디가 "button"인 버튼 요소를 변수에 저장한다.

3. 버튼 클릭 이벤트를 감지한다.
    a. 클릭될 때마다 이미지의 현재 상태(보임/숨김)를 체크한다.
    b. 이미지가 숨겨져 있다면 이미지를 보이게 한다.
    c. 이미지가 보이고 있다면 이미지를 숨긴다.

✅ 배운점

• DOM 선택 및 이벤트 처리 메서드 이름 정확하게 기억하고 사용하기
• 변수명을 선언한 뒤 사용할 때는 반드시 정확히 일치하는지 확인하기
• 오타 발생 시 브라우저 콘솔창에서 오류 메시지 확인하기

📚 ChatGPT가 추가 학습 팁!

• 오타로 인해 코드가 정상 작동하지 않을 때는 브라우저 콘솔창(F12)을 열어 빠르게 원인을 찾자.
• 메서드명이나 속성을 사용할 때 공식 문서나 기존 예시를 참고하여 정확하게 작성하는 습관을 갖자.