0. 스크롤 페이징이 점점 느려져요! 페이징은 점점 느려질 수 있다. 테이블의 크기가 커지면서 느려질 수도 있고, API 로직이 복잡해지면서 느려질 수도 있다. 하지만, 애초에 OFFSET, LIMIT으로 조회하는 방식은 앞에서 읽었던 행을 다시 읽어야하기 때문에 뒤로 갈수록 느리다. 그리고 OFFSET, LIMIT은 인덱스 스캔과는 전혀 상관없는 명령어기때문에 인덱스의 이점을 살릴 수도 없다. 이 때, 개선 가능한 방법이 No-Offset 페이징 혹은 커서 페이징이라고 불리우는 페이징 기법이다. 1. 속도가 빠른 커서 페이징 "커서 기반 페이징이 가장 효율적인 방법이며, 가능한 항상 사용되어야한다."라고 타임라인 기능을 무한스크롤 페이징으로 만든 페이스북 개발자는 말했다. 그만큼 커서 페이징은 가장 효..
이전 포스트 '[JavaScript] 이미지 리사이징, 이미지 용량 줄이기 (1) (feat. HTML5 canvas)'를 읽고 오시면 좋습니다! Canvas의 리사이징 5575 x 3923, 2.37MB 이미지가 있다고 가정해보겠습니다. 한 번 다운로드 시에는 무리가 없는 이미지 용량으로 보이지만 수십 번 이미지를 다운로드하게 되면 더 많은 리소스가 요구됩니다. 해당 리소스를 줄이기 위하여 이미지 리사이징을 시도해보겠습니다. Canvas는 가로, 세로 px를 정하고 그 위에 이미지를 그리는 방식이기 때문에 px 기준으로 이미지가 리사이징됩니다. 보통 최대 px를 기준으로 비례하여 이미지를 리사이징합니다. 예를 들어, 위 이미지를 최대 px 400px기준으로 이미지를 리사이징한다고 가정하고 코드를 작성해..
서비스를 운영하면서 게시판 페이징, 스크롤 페이징을 경험해보았고, 페이징을 심도있게 공부하면서 실질적인 성능과 유지보수에 관해 고민했던 내용을 백엔드 개발자의 입장으로서 두서없이 적어보려고 한다. 정답이 아니라 하나의 방법으로서... 0. 페이징을 하는 이유는? [why] 결론부터 말하면 페이징은 속도는 빠르게, 부하는 적게 하기 위해 지금 당장 필요한 데이터만 가져올 수 있도록 데이터를 분리하는 작업이다. 예를 들어, 10만 개의 게시물 데이터가 있다고 가정했을 때, 페이징 없이 10만 개의 데이터를 한 번에 가져온다 생각해보자. 먼저 DB에서 쿼리로 10만개의 데이터를 조회한다. 정렬과 필터조건, 조인 여부에 따라 시간은 천차만별이겠지만 행여 그러한 복잡한 로직이 없더라도 쿼리를 순식간에 실행해 10..
주의! 웹에서 간단하게 이미지 리사이징 하는 경우에는 괜찮지만 압축율과 이미지의 품질을 좀 더 고려해야한다면 이 방법이 좋지 않을 수도 있습니다! 도입 이유 : 서버 리소스 관리를 위하여 용량이 큰 이미지는 서비스 운영에 있어 리소스가 많이 들기 때문에 썸네일 작업이 필요했습니다. 원래는 서버에서 작업을 하여 모바일, 웹 클라이언트 환경 상관없이 적용하려 했습니다. 하지만 전에 경험해보았을 때 서버에서 썸네일 작업을 진행할 경우 부하가 있는 것을 확인했습니다. 그래서 이번엔 클라이언트에서 이미지 리사이징하여 서버에 보내는 방식으로 적용해보았습니다. 그중에서도 웹 클라이언트(javascript)에서 이미지 리사이징했던 방법을 공유해보려고 합니다. 적용 기술 : HTML5 Canvas javascript를 ..
