Lazy Loading 적용기: 성능 최적화와 사용자 경험 향상
·
개발/FE
문제 발생처음에는 이미지가 한 번에 로드되도록 구현되었습니다. 이로 인해 사용자가 페이지를 처음 접속했을 때, 모든 이미지가 동시에 로드되면서 페이지 로딩 시간이 길어졌습니다.특히 이미지 미리보기에서 이미지 개수를 기준으로 스크롤 기능을 구현하였는데, 사용자가 스크롤을 할 경우 이미지 로딩 시간이 길어져 모든 이미지가 표시되지 않은 상태에서 스크롤을 움직여 제대로 동작하지 않는 문제가 발생하였습니다. 해결 방법1. Spinner 추가처음에는 이 문제를 해결하기 위해 Spinner를 추가하여 모든 이미지가 로딩되어 출력되는 동안 스크롤을 조작할 수 없게 처리를 하였습니다.하지만 이 방법의 문제점은 출력되는 이미지의 수가 많아질수록 사용자의 입장에서는 해당 Spinner가 무한 로딩으로 느껴지고 오류로 생각..
파일 다중 업로드 Chunk 적용기: 대용량 파일 업로드 최적화
·
개발/FE
문제 발생기능 적용 후, 처음에는 이미지 파일들을 대상으로 업로드 테스트를 진행했습니다. 그러던 중 파일의 크기와 종류를 다양하게 하여 대용량 파일이나 고화질 이미지들이 포함된 업로드를 시도하게 되었습니다. 그 결과 업로드 시간이 지나치게 길어지고, 네트워크 환경에 따라 서버 API에서 타임아웃이 발생하는 문제를 겪었습니다. 해결 방법문제를 해결하기 위해 백엔드 개발자와 논의한 결과, 파일을 청크(Chunk) 단위로 분할하여 업로드하는 방식을 채택했습니다.이 방법은 대용량 파일을 작은 청크로 나누어 서버에 전송하는 방식으로, 한 번에 전송되는 데이터의 양을 줄여 서버와의 연결이 끊어지는 것을 방지하고, 업로드 안정성을 크게 향상할 수 있습니다. 이를 통해 대용량 파일을 효율적으로 업로드할 수 있게 되었습..