개발자 노트

데이터 테이블을 만들어 보자 현업에서 서버개발 뿐만 아니라 종종 관리자 페이지도 개발합니다. front를 잘 모르더라도 개발할 수 있도록 jquery를 사용하지요. 그런데 성능을 개선해야하는 일이 생겼고... 이를 개선하는과정을 말씀드리겠습니다. 선 결과물: https://jsfiddle.net/who3fa7t/2/ 문제 약 5000 row * 13 column을 페이징없이 한 화면에 출력해야 했습니다. 기존에 사용하고 있는 dataTable로는 속도가 느리더군요... 약 10초정도 걸렸습니다. 해당 라이브러리의 document를 3일동안 뒤져봤지만, 어떻게 개선할 방법을 못찾겠더라구요. 전체 데이터를 정렬할 때마다 10초씩 걸렸습니다. 기존에 엑셀을 사용하여 데이터를 처리하시던 분들이라 얼마나 답답하실..

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시간이 걸렸다. 자바스크립트는 도대체 어떻게 돌아가먹는 질 모르겠다. 제대로 알고..