190215 TIL AMAZON step4 && new, constructor

» 1막, TIL (Today I Learned)

step4

  • 반의 조언대로 급하게 구현부터 하려고 하지 않고 스켈레톤 코드를 먼저 짜보았다.

STEP 동작 나누기

  1. 화면이 로딩되면 데이터를 받는다.
  2. 초기 이미지를 보여준다.
  3. 이미지는 좌우로 움직인다
  4. 이미지는 자동으로 이동한다
  5. 이미지는 3초 간격으로 움직인다
  6. 오른쪽 버튼을 눌러서 이미지를 오른쪽으로 움직일 수 있다.
  7. 왼쪽 버튼을 눌러서 이미지를 왼쪽으로 움직일 수 있다.
  8. 오른쪽 / 왼쪽 버튼이 눌리면 자동이동이 꺼진다.
  9. 일정시간 버튼 클릭이 없으면 자동이동이 켜진다.

스켈레톤 코드

class Carousel {
    constructor() {
        오토무빙 = true;
        btnClickedTime = 0;
    }

    getData() {
        - ajax로 이미지 URL, text가 포함된 데이터를 가져온다. 
    }

    showFirstData() {
        - ajax로 데이터를 받았는지 확인한다.
        - 첫번째 데이터를 HTML에 주입한다.
    }

    moveToRight() {
        - checkLength()
        - 데이터를 오른쪽으로   바꿔준다.
    }

    moveToLeft() {
        - checkLength()
        - 데이터를 왼쪽으로   바꿔준다.
    }

    checkLength() {
        - 첫번째 데이터면 마지막 데이터로, 마지막 데이터면 첫번째 데이터로 바꿔준다. 
    }

    autoMove() {
        - 오토 무빙 = true;
        - 3 간격으로 moveToRight() 실행한다.
    }

    clickRightBtn() {
        - moveToRight()
        - 오토 무빙 = false;
        - saveClickedTime();
    }

    clickLeftBtn() {
        - moveToLeft()
        - 오토 무빙 = false;
        - saveClicekdTime();
    }

    saveClickedTime() {
        - 현재 시간을 기록한다 (btnClickedTime)
    }

    runAutoMove() {
        - var now = 현재시간
        - if(now - btnClickedTime > 5) autoMove();
    }
    window.addEventListener('load', () => setInterval(runAutoMove, 500))
}
<div class = "carousel">
    <div class = "carousel-left">
        <div class = "carousel-left-btn"></div>
        <img class = "carousel-img" src = "">
        <img class = "carousel-img" src = "">
        <img class = "carousel-img" src = "">
        <img class = "carousel-img" src = "">
        <div class = "carousel-right-btn"></div>
    </div>

    <div class = "carousel-right">
        <h2 class = "carousel-txt-title"></h2>
        <div class = "carousel-txt-body"></div>
        <div class = "carousel-txt-link"></div>
    </div>
</div>

new && constructor && instance

  • js33 스터디 준비하려고 새벽에 공부했는데, 스터디는 파토남…!!
  • 공부 내용