article thumbnail image
Published 2024. 7. 3. 13:57

[TIL/JavaScript] 후위 연산자와 리팩토링

TIL/JavaScript

1. 강사님의 코드

<!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>

2. 리팩토링 전 내 코드

<!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>

 

2.1. 문제점

<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)로 설정해야만 엑박이 뜨지 않는 현상

 

이러한 문제점들이 있어서 원인 파악과 리팩토링을 진행했다.

리팩토링 부분은 같은 수강생에게 도움 받았다.

3. 리팩토링 후 내 코드

<!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로 설정해두면 결과에 문제가 생기는 건 아니라서 수정했다.

4. 느낀 점

ㅎ.... 내 노트북의 키보드가 잘 눌리지 않아서 오타가 많이 발생하는데, 생각보다 스트레스가 있다.

그리고 리팩토링을 습관화 해야겠다고 생각이 들었다. 나도 코딩 잘하고 싶다 😭

저작자표시 비영리 변경금지 (새창열림)

'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
복사했습니다!

티스토리툴바