쇼핑하우

깃허브 링크

개발 기간: 02/22 ~ 02/27

구현한 기능

• 캐로셀 + paging bar?(button)
• 더보기
• 캐로셀 + 롱클릭

실행화면

• 캐로셀 + paging bar?(button)

• 더보기

• 캐로셀 + 롱클릭

캐로셀

HTML 구조

<div> <-- container
    <ul>  <-- slide-list
        <li></li> <-- slide-itm 
        <li></li> <-- slide-itm 
        ...
    </ul>
</div>

container에 overflow:hidden을 적용해 slide-list(ul)을 이동시키는 형식으로 구현했습니다.

로직

1. 버튼이 눌린다.
2. 클릭 콜백함수 발동 (slidePrev or slideNext )
   1. slide-list에 x축 이동하는 transform style과 transition을 적용.
   2. 데이터(배열)을 이동한 방향에 맞게 pop, push, shift, unshift
3. transition이 끝날 시 transitionend콜백함수 발동 (render)
4. slide-list의 transition을 없애고 원래 있던자리로 이동. (클릭 버튼 누르기 전 위치)
5. 바뀐 데이터에 따라서 새로운 HTML을 만든다.
6. slide-list에 innerHTML을 이용해 넣는다.

각 로직에 따른 코드

class를 이용해 구현했고 메소드형태? 그대로 작성했습니다. 전체코드는 링크를 통해서 확인할 수 있습니다.

1. 클릭 콜백함수 slideNext & slidePrev

prev는 next와 같은 구조로 이루어져있습니다.

• this.data : 배열로 된 데이터

• this.oneStep : 한번에 x축으로 이동할 px

• this.transition : 'all 0.5s ' 같이 transition 속성

  slideNext() {
    this.setSlideAnimation({ moveX: this.oneStep * -1, transition: this.transition });
    this.setNextData();
  }

  setNextData() {
    this.data.push(this.data.shift());
  }
  setSlideAnimation({ moveX = 0, transition = '' }) {
    this.slideList.style.transition = transition;
    this.slideList.style.transform = `translate3d(${moveX}px, 0, 0)`;
  }
}

2. transitionend 콜백함수 render

render 메소드는 transitionend뿐 아니라 초기 init()에도 사용됩니다.

• this.makeHtmlFn : Slide 클래스에 인자로 받는 프로퍼티로 각자에 맞는 HTML생성 함수입니다.
  ex)

const makeSlideItem = (imgurl) => `
<div>
    <img src="${imgurl}"/>
</div>

• this.slideList : 위의 HTML구조에서의 ul태그 (좌우로 이동하는 박스)

  //각 dom에 맞는 template dom을 만들어주는 함수를 인자로 받아서 사용
  getSlideHTML() {
    const slideHTML = this.data.reduce((acc, cur) => acc + this.makeHtmlFn(cur), '');
    return slideHTML;
  }
  render() {
    this.setSlideAnimation({ moveX: 0, transition: '' });
    const slideHTML = this.getSlideHTML();
    this.slideList.innerHTML = slideHTML;
  }

구현한 홈페이지에서 각 캐러셀마다 페이징 버튼,, 롱클링의 다른 기능은 Slide클래스를 상속 받아 각자의 클래스에서 따로 구현했습니다.

궁금하신 분들은 페이징버튼 캐러셀, 롱클릭 캐러셀 링크에서 확인할 수 있습니다.

급? 마무리 겸 회고

항상 그렇지만 이번 프로젝트도 잘한 부분보다 아쉬운 부분이 많은 것 같다.

이번 미션에서는 다른 동료분들처럼 환경설정하는데 힘들었다. 하지만 많은 분들이 슬랙에 자료를 너무 잘 정리해서 공유해주셔서 너무 좋았었다. 지난주에 json하고 같은 조였는데 json이 parcel을 쓴다고 했었길래 나도 parcel로 바로적용해 쉽게 했었다. json 감사합니다 ::)

HTML은 최대한 설계를 잘해보자는 생각을 갖고 진행했다. 지난번 airbnb 클론 때 html을 계속 수정하면서 복잡했던 기억에 최대한 구조를 잘 짜고 들어가자 라고 생각하고 구현에 시작했다. 근데 생각만큼 잘 되지 않았다. 전체적인 큰틀에 대한 변동은 적었기 때문에 이정도라도 발전해서 다행?이라고 생각한다.

CSS는 역시 힘들다. 답답하다. 진짜 말그대로 답답했다. 사실 이번에는 js기능을 빨리 구현하고 싶어서 css에 신경을 거의 안썼다. 그냥 비슷하게만 만들자 라는 마음가짐으로 구현을 진행했다. 그랬더니 역시나 난리가났다.ㅋㅋㅋㅋㅋ 화면이 조~~금만 달라져도 난리가 나는 내 화면을 보면서.. 다음부터는 조금은 더 신경써보자 라는 생각을 했다.

동적기능 구현은 지난번보다 구현자체의 속도는 빠르게했다. 이번에 가장 큰 고민 중 하나는 2개의 캐로셀이 너무 많이 겹쳐서 어떻게 하면 좋을까였다. 일단 나누기는 나눴는데 이게 좋은것인지 아닌지에 대한 리뷰를 받고 다음에 참고를 해야 될 것같다.