[Dev Log] UI : Experimental 터치슬라이더 구현하기 #1

# 꼭 있어야하는 기능 Top1
- 태블릿, 모바일 환경을 고려한 반응형 적응형 웹디자인은 거의 마무리됐다. 태블릿, 모바일 환경에서 작동시키려면 터치기능이 반드시 있어야한다.
- 터치,슬라이드를 지원은 하지만 내목표는 **_리얼한_** 터치슬라이드. 그냥 사진 쭉 나열해놓고 터치로 밀면서 보이는것이아니라 **_진짜 슬라이드_** 를 반드시 만들어야한다.

## 1. 터치 슬라이드를 구현하기위해서는 몇가지 필요한 준비물

1. 사진 하나만큼의 크기를 가지는 DOM객체
2. 여러 사진을 나열하고있는 DOM객체
3. 유저가 현재 드래그(슬라이드)를 하고 있는지 여부를 저장할 변수
4. 유저가 현재 보고있을 사진의 인덱스를 저장할 변수
5. 유저가 드래그를 시도한 위치(사진상의 좌표)를 저장할 변수
6. 마지막으로 저장된 Translate 값을 저장할 변수
7. 현재 Translate 값을 저장할 변수
8. 애니메이션ID를 저장할 변수

```jsx
const pictureContainerRef = useRef(null) // 1
const pictureWrapperRef = useRef(null) // 2

const isDragging = useRef(false) // 3
const currentIdx = useRef(0) // 4
const startPos = useRef(0) // 5
const prevTranslateValue = useRef(0) // 6
const currentTranslateValue = useRef(0) // 7
const animationId = useRef(0) // 8

```

## 2. 구현에 사용될 이벤트 리스너들
1. onDragStart: 드래깅 자체에대한 이벤트가 따로 존재하는데, 드래그하는 DOM객체의 메타데이터를 가지게 됨. **_드래그앤드롭_** 에 유용하게 쓰이고 지금은 자체 드래그 이벤트는 사용하지않기 때문에 preventDefault를 호출해야함. 지금은 다루지않기때문에 참고자료만 남겨둠.
[드래그 이벤트 참조1 - MDN](https://developer.mozilla.org/ko/docs/Web/API/Document/drag_event)
[드래그 이벤트 참조2 - 예제코드 jsFiddle](http://jsfiddle.net/radonirinamaminiaina/zfnj5rv4/)
[드래그 이벤트 참조3 - 예제코드 W3bai](http://www.w3bai.com/ko/jsref/tryit.php?filename=tryjsref_ondrag_all)

- 모바일
1. onTouchStart: 터치 시작이벤트
2. onTouchEnd: 터치 종료이벤트
3. onTouchMove: 터치이동(드래그) 추적이벤트
- PC
4. onMouseDown : 드래그 시작에 사용될 이벤트. 클릭시 발동
5. onMouseUp: 드래그 종료에 사용될 이벤트. 마우스를 땔 시 발동
6. onMouseLeave: 마우스 커서가 해당 DOM객체에서 벗어날 시 발동. onMouseUp과 동일하게 드래그 종료에 사용될 이벤트. 해당 이벤트를 사용하지않으면 드래그한 상태에서 커서가 벗어낫을때 드래그상태가 계속 유지되는 현상이 발생함.
7. onMouseMove: DOM객체 범위상에서 마우스이동 추적이벤트

```jsx
// '1. 터치 슬라이드를 구현하기위해서는 몇가지 필요한 준비물' 참조
// '1. 터치 슬라이드를 구현하기위해서는 몇가지 필요한 준비물' 참조
{allImage.map((src, idx) => {
return(
e.preventDefault() }

onTouchStart={e => touchStart(e, idx)}
onTouchEnd={touchEnd}
onTouchMove={touchMove}

onMouseDown={e => touchStart(e, idx)}
onMouseUp={touchEnd}
onMouseLeave={touchEnd}
onMouseMove={touchMove}
/>
)
})}

```