JS 입문강의 Carousel Next버튼 확장성 질문

[최재문]

.slide1 {
transform: translateX(-100vw);
}

.slide2 {
transform: translateX(-200vw);
}

 

<script>
let slideBtn = $(".slide-btn");
let carousel = $(".carousel");
let nowImg = 1;
slideBtn.click(function () => {
carousel.addClass('slide${nowImg}');
nowImg = nowImg + 1;
});
</script>

강사님이 애니메이션 줄거라면 CSS 클래스를 활용하는게 좋다고 알려주셔서 활용해봤습니다.

근데 이미지가 추가될 때마다 css도 추가해야하고..  마지막사진이 보일때도 Next버튼을 누르면 nowImg가 계속 할당되서 값이 증가하는 문제도 있네요.

 

확장성이라는게 최소한의 수정으로 유지보수+기능추가 할 수 있는거라고 생각하는데, 위의 코드는 확장성있는 코드라고 할 수 있을까요?? 

[최재문]

<script>
let slideNext = $(".slide-next");
let carousel = $(".carousel");
let nowImg = 1;
let slideBefore = $(".slide-before");
slideNext.click(() => {
carousel.addClass('slide${nowImg}');
carousel.removeClass('slide${nowImg - 1}');
nowImg = nowImg + 1;
});
slideBefore.click(() => {
carousel.removeClass('slide${nowImg}');
carousel.addClass('slide${nowImg - 1}');
nowImg = nowImg - 1;
});
</script>

그리고 before과 next로 버튼을 두개 만들어서 before버튼을 누르면 전에보던사진을 보여주고싶은데, 정상적으로 작동은 하는데, 가끔 버튼을 두번씩 눌러야 슬라이드 되는 현상이 있습니다. 코드 문제인가요?

[codingapple]

removeClass 이걸로 계속 클래스명을 지워주면 문제없겠군요

확장성은 그냥 다른 사람이 <div> 하나를 더 넣어서 슬라이드가 1개 더 추가되었을 때를 생각하면 됩니다

그때 자바스크립트 코드를 거의 수정하지 않고도 그냥 잘 동작하면 확장성이 좋은 코드겠죠  

근데 저렇게 코드를 짰을 경우 class명을 손수 추가로 만들어줘야하니 번거로워 보입니다 

 

그리고 function () => { } 코드가 좀 이상한데 이벤트리스너 안의 함수는 function(){} 이것만 쓰도록 합시다 

[codingapple]

잘안되는건 개발자도구에서 지금 어떤 클래스명을 가지고 있는지 어떤 스타일을 가지고 있는지 확인해보면 쉽습니다 

[최재문]

그럼 이 경우에는 html class보다 jquery로 css수정해주는게 더 확장성이 있겠네요. 답변 감사합니다 점심 맛있는거 드세영

[글쓴이]

글