느종블로그

자바스크립트 이미지 지연 로딩 완벽 가이드: 스켈레톤 UI로 LCP 성능 최적화하기

작성자:

안녕하세요! 웹사이트의 첫인상을 결정짓는 가장 중요한 요소 중 하나는 바로 ‘로딩 속도’입니다. 특히 고해상도 이미지가 많은 블로그나 포트폴리오 사이트라면, 이미지가 뜰 때까지 하얀 화면만 보여주는 방식은 사용자를 금방 지치게 만듭니다. 구글 역시 LCP(Largest Contentful Paint)라는 지표를 통해 웹사이트의 로딩 성능을 엄격히 평가하고 있죠. 오늘은 라이브러리 없이 순수 자바스크립트 이미지 지연 로딩 기법을 적용하고, 이미지가 로딩되는 … 더 읽기

자바스크립트 토스트 알림 구현 가이드: 라이브러리 없이 만드는 고성능 알림 시스템

작성자:

안녕하세요! 웹 서비스를 운영하다 보면 사용자의 액션에 대해 즉각적이고 세련된 피드백을 주어야 할 때가 많습니다. 이때 가장 효과적인 도구가 바로 화면 구석에서 부드럽게 나타났다 사라지는 ‘토스트 알림’이죠. 많은 분이 Toastify 같은 외부 라이브러리를 사용하시곤 하지만, 사실 순수 자바스크립트만으로도 충분히 가볍고 강력한 시스템을 구축할 수 있습니다. 오늘은 자바스크립트 토스트 알림 시스템을 클래스(Class) 기반으로 설계하여, 코드의 재사용성을 … 더 읽기