🤖 ChatGPT와 함께 공부하는 JavaScript 3일차 - 텍스트 컬러 변경 미션

오늘 JS 미션은 입력창에 입력한 색상으로 텍스트의 색상을 변경하는 기능을 구현하는 것이었다.

순차적으로 구현하다가 간단한 실수로 인해 문제가 발생했다.

🚩 내가 작성한 코드

const text = document.querySelector('text');
const input = document.querySelector('#colorInput');
const button = document.querySelector('#changeColor');

botton.addEventListener("click", function(){
    let color = input.value;
    console.log(color);
    text.style.color = color;
});

📍 발생한 문제

• 클래스 선택자(.)를 사용하지 않고 'text'로만 요소를 선택해서 원하는 요소를 찾지 못했다.
• 버튼 요소를 변수명 button으로 선언했는데 이벤트 처리에서는 오타로 인해 botton을 사용하여 오류가 발생했다.

🔧 올바른 수정 코드

const text = document.querySelector('.text'); // 클래스 선택자로 수정
const input = document.querySelector('#colorInput');
const button = document.querySelector('#changeColor');

button.addEventListener("click", function(){ // 오타 수정(botton → button)
    let color = input.value;
    console.log(color);
    text.style.color = color;
});

📌 코드 한 줄씩 상세 분석

1. const text = document.querySelector('.text');

• HTML에서 클래스가 .text인 요소를 선택해 변수에 저장한다. DOM 조작을 위해 요소를 변수에 저장한다.
• 왜 이렇게 해야 할까?
  자바스크립트가 HTML 요소를 조작하려면 어떤 요소를 조작할지 정확히 알려줘야 한다.
  그래서 변수 text에 조작할 요소를 미리 담아두는 것. 변수에 저장하지 않으면 매번 요소를 다시 찾기 번거롭기 때문.

2. const input = document.querySelector('#colorInput');

• 사용자의 입력값을 가져오기 위한 입력창 요소를 선택하여 변수에 저장한다.
• 왜 이렇게 해야 할까?
  사용자가 입력한 값을 가져오려면 입력창(input)이 필요하다. 입력창을 자바스크립트에서 쉽게 사용하려면 역시 변수에 담아두는 것이 편리하다. 변수를 사용하면 입력값을 쉽게 여러 번 불러올 수 있음.

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

• 사용자가 버튼을 클릭했을 때 실행될 동작을 설정한다.

4. let color = input.value;

• 버튼 클릭 시 입력창에서 사용자가 입력한 값을 변수 color에 저장한다.
• 왜 이렇게 해야 할까?
  사용자가 입력창에 입력한 값을 자바스크립트가 읽어와야 텍스트의 색상을 바꿀 수 있다.
  그래서 입력창의 값을 읽어서 임시로 변수 color에 저장을 시킨다. 이렇게 하면 다음 줄에서 바로 사용할 수 있다.

5. console.log(color);

• 입력된 값이 제대로 넘어오는지 디버깅을 위해 콘솔에서 확인한다.
• 왜 이렇게 해야 할까?
  자바스크립트가 올바르게 입력값을 가져왔는지 확인하는 디버깅 목적.
  

6. text.style.color = color;

• 저장된 색상 값을 이용하여 실제로 텍스트의 색상을 바꾼다.
• 왜 이렇게 해야 할까?
  이전 줄에서 저장한 값을 활용해 실제로 텍스트의 색상을 변경한다. CSS 스타일을 자바스크립트에서 실시간으로 수정하는 방법.

📌 의사코드로 바꿔보기

1. 클래스가 "text"인 요소를 변수에 저장한다.
2. 아이디가 "colorInput"인 입력창 요소를 변수에 저장한다.
3. 아이디가 "changeColor"인 버튼 요소를 변수에 저장한다.

4. 버튼이 클릭되었을 때 다음 작업을 한다:
   a. 입력창에 사용자가 입력한 값을 가져와서 변수에 저장한다.
   b. 가져온 값을 콘솔창에 출력해 확인한다.
   c. 저장된 값을 이용해 텍스트 요소의 색상을 변경한다.

✅ 배운 점

 

• 클래스 선택자 사용 시 반드시 마침표(.) 붙이기 -> 매일하는 실수
• 변수명 철자 오류 확인하기 -> 매일하는 실수
• 코드가 잘 작동하지 않을 때 콘솔 창에서 오류 확인하기