2주차 과제 블로깅

구현 내용

데이터의 아이디 값을 통해 사용자의 아이디와 등록한 사진들을 슬라이더 형식으로 보여주는 기능을 구현했습니다.

Error

슬라이더를 mouseEvent를 이용하여 구현하려했습니다.

const imageRef = useRef(null)
const [isDrag, setIsDrag] = useState(false)
const [startX, setStartX] = useState()

슬라이더가 좌우로 움직이기 때문에 마우스의 X좌표를 이용해서 마우스가 드레그 된 만큼 이미지도 드레그를 시키면 되겠구나라고 생각했습니다.

mouseDown, mouseMove, mouseUP 이벤트를 통해 이미지가 잘 이동되었지만 특정 영역, 기준선을 넘을 때, 자동으로 다음 슬라이드 또는 이전 슬라이드로 넘어가는 로직을 짜고 싶었습니다.

해결 방안 점
1. offSetX를 구하고 특정 offSetX가 지나치면 다음 index의 이미지를 불러온다.
2. 특정 offSetX를 지나치고 마우스가 떼어졌을 때, 클릭된 이미지의 남은 부분을 넘긴다.
3. 슬라이더 관련 라이브러리를 쓰자

느낀점

• javascript Event에 대해 공부해야겠다.
• 화면을 다루는 분야이므로 screenX,Y / pageX,Y / clientX,Y / offsetX,Y에 대해서 공부
• 화면에 대한 공부가 필요
• 레이아웃만 구현하는건 할 수 있겠지만 데이터 연동에 많이 미흡하다.