1. JavaScript 공부에 대한 고민..😮💨
아직 초짜인 상태라 JavaScript에 대해 지식이 매우 부족한 상태였다.😱
Html이나 CSS의 경우 마크업언어이기도 하고 예전에 정말 빡시게 배운걸 기억했다. (1일 1클론코딩 시킴..)
무작정 치면서 습득을해야 빠르다는걸 알게되어 시작했다..!⌨️
하지만 어떻게 습득을 해야할까..? 내가 아는 지식이 너무 얕아서
ChatGPT의 도움을 받기로 했다...! 🤖
2. 첫번째 미션 🚩
오늘의 미션은 랜덤 배경색 버튼 만들기이다. 🎨
지금까지 배운 JavaScript로 미션을 수행해야한다.
다행히 나는 이미 내 수준과 어디까지 배웠는지 이미 학습을 시킨상태라 어렵지 않았다.
미션 힌트까지 주고 동작하는 방법 그리고 피드백까지 해준다니..!👍
❌ 내가 풀어본 코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
padding: 0;
margin: 0;
}
#color_btn{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button{
width: 20%;
height: 10vh;
border: none;
font-size: 1.5em;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
<title>Document</title>
</head>
<body>
<div id="color_btn"><button class="color-change">PUSH</button></div>
<script>
const body = document.querySelector('body');
const colorChange = document.querySelector('.color-change');
// const button = document.getElementclass("color");
colorList.addEventListener("click", function(){
const rndColor = Math.floor(Math.random()* 255);
body.style.backgroundColor = color;
});📍 오류 원인
자바스크립트에서 사용한 colorList라는 변수는 HTML이나 JS 어디에서도 정의되지 않았다.
위 코드에서 버튼 선택자를 이미 아래와 같이 정의해 놓고 있었는데,
잘못된 변수명 colorList를 사용해서 생긴 문제였다!!!!!!!1
🔧 해결 방법
기존에 올바르게 정의된 변수명 colorChange를 사용하여 아래와 같이 수정했다.
이렇게 수정하니 정상 작동되었다.
const body = document.querySelector('body');
const colorChange = document.querySelector('.color-change');
colorChange.addEventListener("click", function(){
const rndColor = `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`;
body.style.backgroundColor = rndColor;
}); //ChatGPT가 고쳐준 코드💡 랜덤 RGB 값 생성 코드 분석
RGB 색상은 rgb(R, G, B) 형식으로 세 가지 숫자(각 0~255)를 조합하여 만든다. 각각의 값을 랜덤으로 만들기 위해 아래 코드가 반복된다. 이 코드가 세 번 반복되는 이유는, 각 색상(R, G, B)이 서로 독립적으로 랜덤한 값을 가져야 다양한 색을 표현할 수 있기 때문이다. 만약 하나의 랜덤값만 세 번 반복하면 RGB가 같은 숫자가 되어 흑백 계열만 나오게 된다.
반복 줄이는 팁: 함수로 만들어서 사용하면 코드가 더 깔끔해진다.
// 랜덤 숫자 생성 함수
function randomNumber() {
return Math.floor(Math.random() * 256);
}
// 이벤트 리스너
colorChange.addEventListener("click", function(){
const rndColor = `rgb(${randomNumber()}, ${randomNumber()}, ${randomNumber()})`;
body.style.backgroundColor = rndColor;
});✅ 배운 점
- 변수명 실수로 인해 오류가 발생할 수 있으니 주의하자.
- RGB 색상을 랜덤하게 만들 때는 R, G, B 값을 각각 독립적으로 랜덤화해야 한다.
- 반복되는 코드는 함수로 만들면 좋다.
📚 ChatGPT가 추가 학습 팁!
- 변수명을 직관적으로 명확히 정의하고 일관성 있게 유지하는 습관을 기르자.
- 코드를 작성할 때마다 브라우저 개발자 도구 콘솔 창을 열어서 자주 확인하면, 문제를 빨리 발견하고 수정할 수 있다.
- 처음부터 모든 코드를 혼자서 작성하기 어렵다면, 강의나 블로그 등을 참고하는 것도 좋은 방법이다. 중요한 것은 복사-붙여넣기가 아니라 직접 코드의 의미를 생각하며 따라 적는 것이다.
- 문제 발생 시 당황하지 말고, 에러 메시지를 잘 읽고 정확한 위치를 찾아보자.
'AI 실험실𖦹 > 데일리 코드 미션' 카테고리의 다른 글
| 🤖 ChatGPT와 함께 공부하는 JavaScript 5일차 - 간단한 디지털 시계 만들기 미션 (0) | 2025.04.03 |
|---|---|
| 🤖 ChatGPT와 함께 공부하는 JavaScript 4일차 - 이미지 숨기기/보이기 토글 기능 미션 (0) | 2025.03.29 |
| 🤖 ChatGPT와 함께 공부하는 JavaScript 3일차 - 텍스트 컬러 변경 미션 (0) | 2025.03.27 |
| 🤖 ChatGPT와 함께 공부하는 JavaScript 2일차 - 카운터앱 미션 (0) | 2025.03.22 |
