🤖 ChatGPT와 함께 공부하는 JavaScript 2일차 - 카운터앱 미션

오늘의 미션은 바로 카운터 앱 만들기이다.

제일 이해하기 어려운 DOM 조작과 숫자연산이다..😓

숫자연산 이론은 들으면 아하! 그렇군! 하고 이해는 되지만 막상 하려고 하면

엥..? 상태가 되어버린다...❓

제일 힘들어 하는 부분이 나와서 연습할겸 복습도 하고 공부도하고!

오늘은 추가 도전과제 까지 있어서 흥미롭다..!👍

🚩 내가 쓴 코드

minusBtn.addEventListener('click', function(){
    let current = parseInt(result.textContent);
    result.textContent = current - 1;

    if(current > 0){
        result.textContent = current2 - 1;
    }else{
        alert("0 미만으로 내려갈 수 없습니다");
    }
});

📍 발생한 문제

• 존재하지 않는 변수 current2를 사용했다.
• 조건문을 사용하기 전에 이미 값을 감소시키는 연산을 실행해, 조건과 상관없이 값이 무조건 1씩 감소했다.
• 이로 인해 버튼을 클릭할 때마다 계속해서 숫자가 0 이하인 -1, -2로 감소했다.

🔧 올바른 수정 코드

minusBtn.addEventListener('click', function(){
    let current = parseInt(result.textContent);

    if(current > 0){ // 숫자가 0보다 클 때만 감소
        result.textContent = current - 1;
    }else{
        alert("0 미만으로 내려갈 수 없습니다");
    }
});

📖 수정된 코드와의 비교 및 상세 분석

1. 변수명 사용:
   • 잘못 사용한 변수명 current2를 올바른 변수명 current로 수정했다.
2. 조건문 위치:
   • 조건문(if)을 값 변경 연산보다 먼저 위치시켜 조건을 정확히 판단하도록 했다.
   • 조건문이 나중에 위치하면 이미 값이 감소되어 있으므로 조건문이 제대로 동작하지 않는다.

📌 parseInt()란? (추가설명)

• parseInt()는 문자열을 숫자로 바꾸는 JavaScript 내장 함수이다.
• DOM에서 가져오는 텍스트 값은 기본적으로 문자열 형태로 반환된다. 숫자 연산을 수행하기 위해서는 반드시 숫자형으로 변환해야 한다.

parseInt() 사용 예시 코드

내가 어려워했던 실제 코드:

addBtn.addEventListener('click', function(){
    let current = parseInt(result.textContent);
    result.textContent = current + 1;
});

위 코드에서 result.textContent는 문자열이기 때문에 숫자로 변환하지 않으면

결과가 "01" 처럼 문자열로 연결된다. 그래서 parseInt()를 사용해서 숫자로 변환해주는 것이다.

let text = "10";
console.log(text + 1); // 결과: "101" (문자열로 처리)
console.log(parseInt(text) + 1); // 결과: 11 (숫자로 처리)

📌 DOM(Document Object Model)이란?

• DOM은 HTML 문서를 JavaScript로 쉽게 접근하고 조작할 수 있도록 구조화한 객체 모델이다.
• DOM 조작이란 HTML 요소를 선택하고, 내용을 변경하거나 이벤트를 처리하는 작업이다.

예시

// DOM으로 요소 선택
const result = document.querySelector('.number');

// DOM으로 요소 내용 변경
result.textContent = "변경할 텍스트";

 

💡 전역 변수란?

• 전역 변수(global variable)는 프로그램 전체에서 접근 및 변경 가능한 변수를 말한다.
• 함수나 이벤트 처리기 등 여러 곳에서 같은 값을 관리할 때 유용하다.
• 전역 변수로 카운터를 관리하면, 버튼 클릭 시 숫자 증가/감소를 효과적으로 구현할 수 있다.

전역 변수 사용 예시

// 전역 변수로 초기값 설정
let count = 0;

// 증가 버튼 클릭 시 동작
addBtn.addEventListener('click', function(){
    count++;
    result.textContent = count;
});

// 감소 버튼 클릭 시 동작 (0 미만 방지)
minusBtn.addEventListener('click', function(){
    if(count > 0){
        count--;
        result.textContent = count;
    } else {
        alert("0 미만으로 내려갈 수 없습니다");
    }
});

이 방법은 DOM에서 텍스트를 가져오지 않아도 변수를 통해 숫자 값을 관리하므로 간편하고 명확하다.

✅ 배운 점

• 조건문은 항상 연산 전에 사용하여 논리적 오류를 예방하자.
• 정확한 변수명 사용으로 코드 오류를 방지하자.
• DOM의 개념과 활용법, 그리고 parseInt() 함수의 쓰임을 이해하고 적절히 활용하자.
• 전역 변수 개념을 이해하고 필요한 상황에서 적극 활용하자.

📚 ChatGPT가 추가 학습 팁!

• 조건문(if)을 쓸 때는 항상 조건을 먼저 체크한 후 값을 변경하거나 연산을 해야 원하는 결과가 나온다.
• 변수 이름을 지을 때는 철자를 정확하게 하고, 가능한 의미를 쉽게 파악할 수 있도록 작성하는 습관을 갖자.
• JavaScript에서 DOM 요소의 텍스트는 기본적으로 문자열이다.
  숫자 연산을 하기 위해서는 parseInt() 같은 함수를 써서 숫자로 변환해야 한다.
• 에러가 발생할 때마다 브라우저의 개발자 도구(console)를 활용해서 문제가 되는 부분을 찾아보자.
  에러 메시지를 잘 읽으면 문제를 빠르게 해결할 수 있다.