190215 TIL AMAZON step4 && new, constructor
Feb 15, 2019
»
1막,
TIL (Today I Learned)
step4
- 반의 조언대로 급하게 구현부터 하려고 하지 않고 스켈레톤 코드를 먼저 짜보았다.
STEP 동작 나누기
- 화면이 로딩되면 데이터를 받는다.
- 초기 이미지를 보여준다.
- 이미지는 좌우로 움직인다
- 이미지는 자동으로 이동한다
- 이미지는 3초 간격으로 움직인다
- 오른쪽 버튼을 눌러서 이미지를 오른쪽으로 움직일 수 있다.
- 왼쪽 버튼을 눌러서 이미지를 왼쪽으로 움직일 수 있다.
- 오른쪽 / 왼쪽 버튼이 눌리면 자동이동이 꺼진다.
- 일정시간 버튼 클릭이 없으면 자동이동이 켜진다.
스켈레톤 코드
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 스터디 준비하려고 새벽에 공부했는데, 스터디는 파토남…!!
- 공부 내용