BOOKREST - Slide (5)

한슬희·2021년 8월 2일
4

LIKELION

목록 보기
5/7

BOOKREST main 페이지에 들어갈 slide를 javascript로 개발했다.

slide를 통해 BOOKREST가 어떤 서비스인지 바로 알 수 있도록 하기위해 slide에 들어갈 사진도 Figma로 제작했다.

포토샵을 해본 적이 별로 없어서 지인의 도움을 받고 받아 만들어 볼 수 있었다. 포토샵을 얼른 많이 배워봐야겠다 ✍🏻

Slide 사진

디자인 생각하는 것도 어려웠지만 막상 만들고 보니 BOOKREST서비스에 찰떡인 것 같아 맘에 들었다.

아직 반응형은 못했지만 .. 쉿 🤐


개발

html

<!-- slide의 큰 틀 -->
<div class="container"> 
  <!-- slide의 틀 -->
  <div class="container__slider js-container__slider">
    <div class="blank"></div>
    <!-- slide에 들어갈 이미지 -->
    <img
      class="container__slider__img js-container__slider__img"
      src="{% static 'img/main.png'%}"
    />
    <img
      class="container__slider__img js-container__slider__img"
      src="{% static 'img/main2.png'%}"
    />
    <img
      class="container__slider__img js-container__slider__img"
      src="{% static 'img/main3.png'%}"
    />
    <img
      class="container__slider__img js-container__slider__img"
      src="{% static 'img/main4.png'%}"
    />
    <div class="blank"></div>
  </div>
</div>

slide 틀을 만들고 slide에 들어갈 이미지를 넣었다.
전에는 class 명을 짓기 귀찮아서 대충 짓곤 했는데 개발을 하다 보니 이 요소가 어떤 클래스고 어떤 div에 감싸져있는지 수정할 때마다 신경 써야 하는 점이 번거로웠다.

그래서 class 명을 BEM방식으로 지을려고 노력하고 있다.
실제 현업이나 팀플을 할 때에도 내가 만든 코드를 보고 무슨 코드인지 누가 봐도 다 알도록 해야 한다.
처음엔 번거로울지 몰라도 하다 보면 BEM방식이 오히려 쉽다.
👉 CSS BEM 참고

css

.container {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 80vh;
}

.container__slider {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 80vw;
  height: 69vh;
  box-sizing: border-box;
  margin-top: 15px;
}

.js-container__slider__img{
  position: absolute;
  width: 80vw;
  height: 69vh;
  border-radius: 3px;
  object-fit:cover;
  box-shadow: 9px 9px 0 #bdccd4;
  
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  z-index: 0;
  opacity: 0;
}

.slider_showing {
  z-index: 1;
  opacity: 1;
  transition: all 1s;
}

다른 개발을 하면서 css position을 이해하는 게 어려웠었는데 slide를 개발하면서 position을 전보다는 이해할 수 있었다.

👉 CSS Position

나는 이렇게 코드를 짰지만, 더 깔끔하고 효율적인 코드로 짤 수 있지 않을까 싶다. 알려주세요 !!!

javascript

const container__slider = document.querySelector(".js-container__slider");
const firstSlide = document.querySelector(".js-container__slider__img");

const SHOWING_CN = 'slider_showing';
const IMG_NUM = 4;

먼저 slide 틀과 slide 이미지들을 querySelector로 가져왔고, animation 역할을 할 slider_showing과 slide에 들어갈 사진 수를 변수로 만들어 주었다.

javascript

const handleSlideClick = () => {
    changeSlide();
}

const slideInit = () => {
  changeSlide();
  setInterval(changeSlide, 5900);
  
  // container__slider를 클릭했을 때 handleSlideClick 함수를 실행해라
  container__slider.addEventListener("click", handleSlideClick);
};



slideInit();

init 함수를 slideInit이라 지은 이유는 slide.js 제외한 다른 javascript가 연결된 상태에서 두 js 모두 init이라고 쓰면 js가 제대로 실행이 안된다.

그래서 나는 javascript를 할 때마다 js의 기능을 써주고 Init을 붙인다.

setInterval

setInterval이란 일정한 시간 간격으로 작업을 수행하기 위해 사용하는 함수다.
나는 클릭 이외에도 시간이 지나면 슬라이드가 자동으로 넘어가도록 하기 위해 setInterval 함수를 이용했다.

javascript

const changeSlide = () => {
  const currentSlide = container__slider.querySelector(`.${SHOWING_CN}`);

  if (currentSlide !== null) {
    currentSlide.classList.remove(SHOWING_CN);
    const nextSlide = currentSlide.nextElementSibling;

    if (nextSlide.className !== "blank") {
      nextSlide.classList.add(SHOWING_CN);
    } else {
      firstSlide.classList.add(SHOWING_CN);
    }
  } else {
    firstSlide.classList.add(SHOWING_CN);
  }
};

currentSlide 변수를 보면

`.${SHOWING_CN}`

이라는 특이한 코드가 보인다.

감싸져있는 것을 백틱 (``) 이라고 하는데
백틱은 문자열 표기법이다.

따라서 ${} 사이에 변수나 연산 등을 삽입 후 백틱으로 감싸면 문자열로 자동 변환된다.

즉, 컨테이너 슬라이더 객체(DOM) 안에서 "slider_showing" 클래스를 가진 애를 currentSlide 변수에 넣는 것이다.

nextElementSibling
if문 안에 nextSlide 변수를 보면 nextElementSibling method가 있다,
nextElementSibling은 해당 요소 바로 다음 요소를 가져오는 역할을 한다.

👉 Element.nextElementSibling

이를 통해 slide가 계속 돌아갈 수 있게 하였다.

결과

정해진 시간이 지나거나 사용자가 클릭했을 때 slide가 넘어간다.

javascript로 slide를 만들어 보니 javascript가 어떻게 돌아가는지 이해할 수 있었던 것 같다. 다음에 slide를 만들게 된다면 그때는 버튼이나 새로운 동작을 통해 구현해보고 싶다.

👊🏻👊🏻👊🏻

profile
🧡 Frontend developer / 어제보다 오늘 더 성장한 개발자

2개의 댓글

comment-user-thumbnail
2021년 8월 2일

추가적으로 버튼이나 진행상황을 보여주면 더 좋을 거 같네요 !!!
다양한 정보 공유해주셔서 감사합니당 :D 많이 배워갈게요 !! 🔥

1개의 답글