Carousel을 직접 만들어 보자 Part 2 - 성능 향상 하기

Carousel을 직접 만들어 보자 Part 2

 

 

이전 포스팅에서 부트스트랩을 이용하거나, 직접 바닐라 자바스트립트로 코딩을 해서 캐러셀을 만드는 방법을 알아보았습니다.

 

Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법)

Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법)

 

 

아마도 초보 딱지를 벗어난 분들은 나머지 기능에 대한 구현도 충분히 혼자 가능하겠지만, 우리집 아들 녀석들 같은 왕초짜들은 아마도 어려움을 겪을 수 있겠다 싶은 생각이 들었습니다.

 

그래서 이전 과정에 대해 마무리를 한 후, 기존 결과물을 가지고 성능을 향상시킬 수 있는 내용으로 Part 2를 정리합니다.

 

 

 

세개의 페이징 버튼에 모두 기능 구현하기

 

이전 포스팅에서는 [2]번 페이징 버튼에만 다음 슬라이드를 보여줄 수 있도록 기능 구현을 해놓았었습니다.

document.querySelector(".slide2").addEventListener("click", function () {
  document.querySelector(".container").style = "transform: translateX(-100vw);";
});

 

여기까지는 이해하셨죠? 나머지 [1]번, [3]번 버튼에도 기능 구현을 마저 해놓으면 어떻게 될까요?

아래와 같습니다. 앞의 코드 응용하면 되니까 여기까지는 쉽죠?^^

document.querySelector(".slide2").addEventListener("click", function () {
  document.querySelector(".container").style = "transform: translateX(-100vw);";
});

document.querySelector(".slide3").addEventListener("click", function () {
  document.querySelector(".container").style = "transform: translateX(-200vw);";
});

document.querySelector(".slide1").addEventListener("click", function () {
  document.querySelector(".container").style = "transform: translateX(0vw);";
});

 

 

 

[이전], [다음] 버튼 만들어 기능 적용하기

 

아래 이미지처럼, 페이징을 위한 숫자 버튼 좌우로 [이전], [다음] 버튼을 만들어서 기능을 구현하려면 어떻게 하면 좋을까요?

[이전], [다음] 버튼 만들어 기능을 적용해봅시다

 

HTML에서 버튼은 이렇게 추가했습니다.

<button class="prev">이전</button>
<button class="slide1">1</button>
<button class="slide2">2</button>
<button class="slide3">3</button>
<button class="next">다음</button>

 

 

 

[다음] 버튼에 기능 구현하기

 

일단 [다음] 버튼을 가지고 기능구현에 대해서 한번 생각해보겠습니다. '다음' 버튼을 누른다는 것은 아래와 같이 정리할 수 있습니다.

1번 슬라이드인 경우 2번 슬라이드를 보여줌
2번 슬라이드인 경우 3번 슬라이드를 보여줌
3번 슬라이드인 경우, 멈춰 있음(더 이상 없다는 것을 알려주기 위해, alert을 띄우면 좋겠음)

 

대충 로직은 위와 같을 것입니다. 중요한 건... 현재 보고 있는 슬라이드가 몇번째인 것이냐를 어떻게 알 수 있을까요?

 

 

 

현재 페이지를 담는 변수를 사용하자

 

변수는 어떠한 값을 담아 둘 수 있다고 했는데요, 바로 이런 경우에 변수가 아주 유용하게 사용됩니다. 즉, 계산만 엄청 빠르지 지능이 없는 컴퓨터에게, '이 것좀 기억하고 있어봐봐'라고 알려주는 것이죠.

 

프로그램을 만들다보면, 지금 보는게 몇 번째인지, 지금 카운트가 몇 번째인지, 이 녀석은 몇 번째에 존재하는 녀석인지 등... "몇번째냐?"하는 것을 관리할 필요가 있는 경우에 '카운트 변수'라고 불리는 형태를 사용하면 해결이 쉽습니다.

 

Javascript 코드를 아래와 같이  구성해보았습니다.

let page = 1;  //현재 페이지를 기억하기 위한 변수

document.querySelector(".next").addEventListener("click", function () {
  if (page == 1) {
    document.querySelector(".container").style = "transform: translateX(-100vw);";
    page = page + 1;
  } else if (page == 2) {
    document.querySelector(".container").style = "transform: translateX(-200vw);";
    page = page + 1;
  } else {
    alert("마지막 슬라이드 입니다");
  }
});

 

조건문을 통해 현재 페이지가 1이면 translateX(-100vw)를 해서 두 번째 슬라이드를 보여주고, 현재 페이지가 2라면면 translateX(-200vw)를 해서 두 번째 슬라이드를 보여주게 되는 것입니다.

 

여기서 중요한 것은, 슬라이드를 보여준 후 지금 보고 있는 슬라이드 번호를 변수에 다시 저장해줘야 한다는 것입니다.

page = page + 1;

 

왕초보 시절에는 저런 방법이 그렇게 신기할 수가 없었더랬습니다.^^; 진짜 별거 아니고 당연한데 말이죠.

 

코딩 레벨이 오르면, 저 문장은 다들 이렇게 사용합니다.

page += 1;

 

 같은 의미입니다. 다만 page += 1; 이 길이가 짧으니 대부분의 개발자들은 이렇게 사용하거든요.(일반인들 잘 못알아보라고?ㅋㅋ) 아무튼 현업에서 page = page +1; 이라고 작성하면 '초보티' 내느냐고 한소리 들을 수도...

 

아래 3가지는 모두 같은 결과를 가져다 준다고 보시면 됩니다.

page = page + 1;

page++;

page += 1;

 

물론, 엄격하게는 반복문 등에서 다른 결과를 가져올 수도 있는데요 초보일 때는 이 정도만 일단 이해두면 됩니다.^^

 

 

 

[이전] 버튼에 기능 구현하기

 

이전 버튼 구현도 직접 해보신 후 아래 내용과 비교해보시길 바랍니다. 그래야 공부가 됩니다.

document.querySelector(".prev").addEventListener("click", function () {
  if (page == 1) {
    alert("첫번째 슬라이드 입니다");
  } else if (page == 2) {
    document.querySelector(".container").style = "transform: translateX(0vw);";
    page = page - 1;
  } else {
    document.querySelector(".container").style = "transform: translateX(-100vw);";
    page = page - 1;
  }
});

 

[이전] 버튼의 경우, 주의할 것은 page = page - 1; 이 되는 것이겠죠?

 

이렇게 [이전]과 [다음] 버튼에 기능을 모두 구현을 마쳤습니다. 그러면 이제 끝??

 

 

 

[1], [2], [3] 페이징 버튼에도 page 변수 적용을 잊지 마세요

 

만약 [2] 번 버튼을 눌러 2번째 슬라이드를 보고 있는 상황에서 [다음] 버튼을 누르면 아무 동작이 일어나지 않습니다. 한번 더 [다음] 버튼을 클릭해야 3번재 슬라이드로 넘어가게 되는 현상이 발생합니다.

2번 버튼을 누른 후 [다음] 버튼을 클릭하면 동작하지 않습니다. 왜 일까요?

 

이는 [1], [2], [3]페이징 버튼에는 현재  몇번째 페이지를 보는가에 대한 정보가 없기 때문인데요, 그래서 페이징 버튼을 클릭했을 때도 page 변수에 현재 보는 슬라이드 페이지 번호를 기억시켜줘야 합니다. 이렇게 말이죠.

document.querySelector(".slide2").addEventListener("click", function () {
  document.querySelector(".container").style = "transform: translateX(-100vw);";
  page = 2;
});

document.querySelector(".slide3").addEventListener("click", function () {
  document.querySelector(".container").style = "transform: translateX(-200vw);";
  page = 3;
});

document.querySelector(".slide1").addEventListener("click", function () {
  document.querySelector(".container").style = "transform: translateX(0vw);";
  page = 1;
});

 

 

 

이로써 끝인가요? 아닙니다!

 

기능들에 대한 기초적인 학습목적이라면 끝난 것이라 볼 수도 있겠습니다만, 코딩 근육을 좀 더 강력하게 만들어 줄 수 있는 내용들이 아직 남아 있습니다.

 

[next] 버튼의 기능 같은 경우 뭔가 좀 같은 내용들이 반복되는 것 같으면서, 법칙 같은 것들이 보이는 것 같지 않은가요?

let page = 1;
document.querySelector(".next").addEventListener("click", function () {
  if (page == 1) {
    document.querySelector(".container").style = `transform: translateX(-100vw);`;
    page = page + 1;
  } else if (page == 2) {
    document.querySelector(".container").style = "transform: translateX(-200vw);";
    page = page + 1;
  } else {
    alert("마지막 슬라이드 입니다");
  }

 

만약 슬라이드 개수가 매우 많다면, 이 코드의 else if 조건 구문을 하나씩 계속 추가로 생성해야 할까요?

아래의 코드와 함께 비교해보면서 곰곰히 한번 생각해보세요. 발상의 전환에 큰 도움이 될 겁니다.

let page = 1;
document.querySelector(".next").addEventListener("click", function () {
    document.querySelector(".container").style = `transform: translateX(-${page}00vw)`;
    page += 1;
    });

.style = `transform: translateX(-${page}00vw)`;     // ${변수명}을 바로 중간에 삽입.

 

이때, 작은 따옴표(' ')가 아니라 그레이브(` `)입니다.

 

아래, 코드도 동일하게 동작합니다.

.style = "transform: translateX(-" + page + "00vw)";

 

 

 

마치며

 

 

이전 포스팅에 이어서, Carousel을 만드는 방법에 대해 자세하게 알아보았고, 성능을 향상시키는 내용들도 함께 살펴보았습니다. 이제 캐러셀 정도의 녀석들은 손쉽게 만들어 쓸 수 있는 방법을 경험하게 되었습니다.

 

잘 기억해두었다가, 나중에 작업할 때 직접 써먹어봐야겠습니다.

 

즐거운 코딩생활, 즐코딩.

KINcoding.