쉬운 코드를 1시간 넘게 분석했다

문제점: js를 거의 만져본적 없었던 내가 팀 프로젝트에서 슬라이더를 구현하는 역활을 맡았다.

<script>
    // var < let
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none"; // 이게 중요한거였음
      }
      for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block"; // 이게 중요한거였음
      dots[slideIndex-1].className += " active";

      $('.single-item').slick();
    }
</script>

이 코드를 해석해서 나의 코드에 응용해서 사용하려고 했는데
dots[i].className = dots[i].className.replace(" active", "");
이 단락의 코드의 뜻을 몰라서 몇시간을 혼자 고민했다.
근데 그냥 " active"를 ""로 바꿔라란 뜻인걸 알고 내가 뭐했지 라는 생각이 들어버려서 자괴감이 든다 ㅠㅠ

slides[i].style.display = "none";
slides[slideIndex-1].style.display = "block";
실질적으로 나에게 필요했던 코드는 이 두 코드였으며 이 두 코드를 통해 슬라이드를 구현하는데 좀 더 수월했고 다음에 슬라이드를 구현할때는(?) 좀 더 수월하게 구현할 수 있을꺼 같다