강사님의 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<section>
<p class="btn01">
<img src="run/1.png" alt="" srcset="">
</p>
<p class="test">1</p>
</section>
<script>
$(
function(){
let index=1;
setInterval(
function(){
$('.btn01>img').attr('src','run/'+((index%15)+1)+'.png');
$('.test').text(index);
index++;
// if(index>15){
// index = 1;
// }
},100);
}
);
</script>
</body>
</html>리팩토링 전 내 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<section>
<p class="btn">
<button id="btn01">이미지 가져오기</button>
</p>
<p class="box01">
<img id="img" src="images/run1.jpg" alt="sample"></p>
<p class="test">1</p>
</section>
<!-- 사진들 가져와서 버튼 누르면 다음 사진으로 넘어가게 하기 -->
<script>
$(function () {
var index = 1;
$('#btn01').click(function () {
if (index <= 15) {
index++;
var imgName = 'images/run' + index + '.png';
$('p.box01 > img').attr('src', imgName);
$('p.test').text(index);
} else {
index = 1;
$('p.box01 > img').attr('src', 'images/run1.png');
$('p.test').text(1);
}
});
});
</script>
<!-- 1초마다 자동으로 사진 넘어가기 -->
<script>
$(function () {
var index = 1;
setInterval(function () {
var localSrc = "images/run";
if (index <= 14) {
index++;
$('#img').attr('src', localSrc + index + '.png');
$('p.test').text(index);
} else {
index = 1;
$('#img').attr('src', 'images/run1.png');
$('p.test').text(1);
}
}, 100);
});
</script>
</body>
</html>
문제점
<body>
<section>
<p class="btn">
<button id="btn01">이미지 가져오기</button>
</p>
<p class="box01">
<img id="img" src="images/run1.jpg" alt="sample"></p>
<p class="test">1</p>
</section>
<!-- 사진들 가져와서 버튼 누르면 다음 사진으로 넘어가게 하기 -->
<script>
$(function () {
var index = 1;
$('#btn01').click(function () {
if (index <= 15) {
index++;
var imgName = 'images/run' + index + '.png';
$('p.box01 > img').attr('src', imgName);
$('p.test').text(index);
} else {
index = 1;
$('p.box01 > img').attr('src', 'images/run1.png');
$('p.test').text(1);
}
});
});
</script> <!-- 0.1초마다 자동으로 사진 넘어가기 -->
<script>
$(function () {
var index = 1;
setInterval(function () {
var localSrc = "images/run";
if (index <= 14) {
index++;
$('#img').attr('src', localSrc + index + '.png');
$('p.test').text(index);
} else {
index = 1;
$('#img').attr('src', 'images/run1.png');
$('p.test').text(1);
}
}, 100);
})
1. 이미지 가져오기 부분: `run1.png`인데 `run1.jpg` 라고 선언했기 때문에 해당 파일이 불러와지지 않고 `run2.png` 파일부터 정상적으로 보여짐
2. 버튼 누르면 다음 사진 보여지기: 아래 코드에서 `$('p.box01 > img) ~ $('p.test')` 부분처럼, 무조건 실행되어야 하는 코드가 if문에 들어가있어서 코드가 중복된다.
if (index <= 15) {
index++;
var imgName = 'images/run' + index + '.png';
$('p.box01 > img').attr('src', imgName);
$('p.test').text(index);
} else {
index = 1;
$('p.box01 > img').attr('src', 'images/run1.png');
$('p.test').text(1);
3. 사진은 분명 `run15.png` 까지 있는데 `if(index <= 14)`로 설정해야만 엑박이 뜨지 않는 현상
이러한 문제점들이 있어서 원인 파악과 리팩토링을 진행했다.
리팩토링 부분은 같은 수강생에게 도움 받았다.
리팩토링 후 내 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<section>
<p class="btn">
<button id="btn01">이미지 가져오기</button>
</p>
<p class="box01">
<img id="img" src="images/run1.png" alt="sample"></p>
<p class="test">1</p>
</section>
<!-- 사진들 가져와서 버튼 누르면 다음 사진으로 넘어가게 하기 -->
<script>
$(function () {
var index = 1;
$('#btn01').click(function () {
var imgName = 'images/run' + index + '.png';
if (index <= 14) {
index++;
} else {
index = 1;
}
$('p.box01 > img').attr('src', imgName);
$('p.test').text(index);
});
});
</script>
<!-- 0.1초마다 자동으로 사진 넘어가기 -->
<script>
$(function () {
var index = 1;
setInterval(function () {
var localSrc = "images/run";
if (index <= 14) {
index++;
} else {
index = 1;
}
$('#img').attr('src', localSrc + index + '.png');
$('p.test').text(index);
}, 100);
});
</script>
</body>
</html>
1. 오타 수정 완료
2. `$('p.box01 > img) ~ $('p.test')` 부분과 같은 코드를 if문 바깥쪽으로 빼내어서 무조건 실행되게 만들었다.
3. `if(index <= 14)`로 설정해야만 엑박이 뜨지 않는 현상 -> `index++`과 같은 후위 연산자로 인해 발생했다. 14로 설정해두면 결과에 문제가 생기는 건 아니라서 수정했다.
느낀 점
ㅎ.... 내 노트북의 키보드가 잘 눌리지 않아서 오타가 많이 발생하는데, 생각보다 스트레스가 있다.
그리고 리팩토링을 습관화 해야겠다고 생각이 들었다. 나도 코딩 잘하고 싶다 😭
'TIL > JavaScript' 카테고리의 다른 글
| [TIL/JS] Number 보다 parseInt()를 더 권고하는 이유 (0) | 2024.09.06 |
|---|---|
| [TIL/JavaScript] 홀수 인덱스의 요소와 홀수번째 요소 (0) | 2024.07.15 |
| [TIL/JavaScript] 갤러리 만들기 (0) | 2024.07.03 |
| [TIL/JavaScript] 파라미터 이름과 클래스 필드의 이름 일치, this 키워드, constructor() (0) | 2024.07.02 |
| [TIL/JavaScript] script 태그, 이벤트, 문자열과 숫자 (0) | 2023.11.20 |