dev/Javascript7 PHP에서 Nest.JS로 JS 백엔드 프레임워크 Nest.JS 를 알아보고,Laravel vs Spring vs Nest.JS 3개 프레임워크를 비교해보았습니다. 2025. 11. 7. swiper 에 lazy 적용 Swiper.js에서 Lazy Loading을 적용하려면 슬라이드 내부의 태그에 class="swiper-lazy" 속성을 추가하고, data-src와 같은 속성에 실제 이미지 경로를 지정합니다. 이렇게 하면 현재 보이는 슬라이드 이미지와 다음 슬라이드 이미지만 먼저 로드되고, 사용자가 스크롤하며 다른 슬라이드로 이동할 때 해당 이미지만 로드되어 초기 로딩 속도와 성능을 개선할 수 있습니다. Lazy Loading 적용 방법swiper-lazy class 추가: 태그에 class="swiper-lazy" 속성을 추가하여 브라우저가 해당 이미지를 지연 로딩하도록 지시합니다.data-src 속성 사용: 이미지의 실제 경로를 src 속성이 아닌 data-src 속성에 넣어둡니다. 예시 코드 (HTML.. 2025. 9. 19. javascript defer, async 웹 프런트 개발을 할 때 외부 스크립트를 추가하는 경우가 있다. 브라우저는 HTML을 읽다가 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. 이를 방지하기 위해서 스크립트를 페이지 맨 아래 놓는 것이 하나의 방법이 될 수 있다. 하지만 HTML 문서 자체가 아주 큰 경우 문서 전체를 다운로드 한 다음에 스크립트를 다운받게 하면 페이지가 정말 느려질 것이다. 이런 문제를 해결할 수 있는 defer, async 둘 다 '백그라운드'에서 스크립트를 다운로드한다. DOM을 그리는 중에 다운로드가 같이 되기 때문에 페이지 로딩 속도가 빨라진다. defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연된다. 다른 스크립트를 모두 다운로드할 때까지 기다린다. 그리고 스크립트를 문서에 추가한.. 2025. 9. 10. 드래그 앤 드롭 리스트 구현 jquery-ui를 사용해서 구현해 보았다. https://jqueryui.com/sortable/#default Sortable | jQuery UI Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable prope jqueryui.com 위 사이트를 들어가면 예제 소스를 볼 수 있다. view source 버튼을 .. 2024. 3. 8. 무한 스크롤 구현 무한 스크롤을 구현하는 방식은 2가지가 있다. 1. 스크롤 이벤트 예전 방식이고 계속 이벤트를 발생시키기 때문에 브라우저에 부하가 걸릴 수 있다. 2. IntersectionObserver 인터페이스 요즘 방식이고 부하가 발생하지 않는다. 이 방식으로 구현하는 것을 추천! 동작 방식을 간단하게 설명하면 다음과 같다. 첫 페이지 리스트를 출력하고 리스트의 하단에 div를 만들어둔다. 여기서는 listEnd div. 브라우저에서는 현재 사용자가 보고 있는 화면을 감지할 수 있는데, IntersectionObserver 객체의 observe함수를 이용해서 특정 div를 관찰할 수 있다(observe). 스크롤을 내리다가 observe중인 div가 들어오면 이벤트를 발생시킨다. 이벤트를 발생할 함수(getGue.. 2023. 11. 13. 아이폰 모바일 웹 파일 첨부 내가 개발 중인 사이트에서 파일첨부하는 부분에 plupload라는 js모듈을 사용하고 있었는데, 아이폰에서만 저 모듈이 제대로 작동하지 않는 이슈가 있었다. 최신버전의 모듈을 받아서 크롬에서 모바일(아이폰) 모드로 해보니 잘 작동했다. 그래서 내가 개발하는 사이트에 있는 모듈을 최신 버전으로 업데이트를 하니, 파일 첨부가 잘 되었다. 특정 플랫폼에서 모듈이 작동하지 않을 때는 최신버전으로 바꿔서 해보자. 모듈이 버전업을 하면서 이런 이슈들이 수정되는 경우가 있기 때문이다. 모듈은 아래 사이트에서 받을 수 있다. plupload.min.js 파일로 안 되는 경우가 있다면 plupload.full.min.js 파일을 사용하도록 하자. https://www.plupload.com/ Plupload: Multi.. 2023. 8. 17. img onerror 두 번 처리하기 기획자로부터 특이한 요구사항이 들어왔다. 썸네일이 2개 있는데 1번 이미지가 없으면 2번 이미지를 보여주고, 그것도 없으면 기본 이미지를 보여주게 해 달라는 것이다. 보통 img 태그는 onerror 한 번으로 기본 이미지 처리만 한다. 하지만 위의 요구사항을 수용하려면 onerror를 두 번 처리해야 한다. 그래서 자문을 구해보니, 2번째 이미지의 존재여부를 별도 함수로 체크해서 그에 대한 에러 처리를 따로 해보라는 말을 들었다. - 구현 코드 - 구현 방식 1. img 태그에 1번째 이미지가 유효하지 않으면 onerror에 연결된 함수를 실행한다. 2. 연결된 함수에서 ajax에 $.get을 이용해서 2번째 이미지가 유효한지 판단한다. 3-1. 이미지가 유효하면 2번째 이미지를 img 태그 src속성.. 2023. 3. 9. 이전 1 다음 반응형
