개발자 노트

Infinite Sliding 구현시 transition 문제 무한 슬라이딩 윈도우 구현시 애니메이션 효과가 정상적으로 작동하지 않는 문제가 발생했습니다. 분명 부드러운 이동 효과를 준 후 이동했는데도 순간이동 한다던지, 부드러운 이동 효과를 제거하여 순간이동 해야함에도, 부드러운 이동 효과로 이동하였습니다. (부드러운 이동 효과 제거 -> 이동 -> 부드러운 효과 켜기) 따라서 이를 해결하기 위한 과정을 적어보려 합니다. 순간이동 표현이 묘하지만; 슬라이딩 윈도우에서 이미지가 부드럽게 넘어가는 효과의 반의어로 순간이동이란 표현을 사용했습니다. 참고자료 https://d2.naver.com/helloworld/59361 (Naver D2 브라우저는 어떻게 작동하는가) https://medium.com/@..

무한슬라이딩 윈도우 구현 아이디어 ul의 li로 이미지가 1,2,3이 나란히 있다고 하자. 이미지 1을 추가하여 1,2,3,1 이미지를 만든다. 1,2,3,1까지 슬라이딩 효과를 주는데, 마지막 1번에서 슬라이딩 효과를 없앤 후 바로 1번 위치 변경, 그리고 다시 슬라이딩 효과를 주면 된다. 문제점 애니메이션 효과를 지우고, 처음 위치로 이동하고, 애니메이션 효과를 주는 작업을 reset 작업이라 하자. reset작업에서 재빨리 애니메이션 효과를 다시 부여했을 때 처음에 지우고 이동했음에도 애니메이션 효과로 이동하게 된다. 따라서 나는 setTimeout으로 시간 간격을 두어 처리하도록 하였다. 이 문제를 찾고 해결하는데 4시간이 걸렸다. 자바스크립트는 도대체 어떻게 돌아가먹는 질 모르겠다. 제대로 알고..