All'alba vincerò

At dawn, I will win!

2024/08/26 2

[JS] intersectionObserve(): 화면에 요소가 보이거나 사라지는 순간을 감지

📌 IntersectionObserver 객체 : 웹 페이지에서 특정 요소가 화면에 보이거나 사라지는 것을 감지할 수 있는 도구 ex)  사용자가 페이지를 스크롤할 때 이미지가 화면에 나타나는 순간에만 그 이미지를 불러오게 하려는 상황에서 사용될 수 있다.      📌 intersectionObserve(): 새로운 IntersectionObserver 객체를 생성, 반환교차 관찰자 API브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰한다.➡︎ 사용자 화면에 지금 보이는 요소인지( 요소가 뷰포트에 포함되는지)를 구별하는 기능을 제공한다.사용 상황이미지나 동영상 로딩: 스크롤할 때, 이미지가 화면에 보이는 순간 이미지를 로딩하게 하고 싶을 때 사용된다.이를 통해 페이지 ..

Javascript 2024.08.26

[JS] URL.createObjectURL() / URL.revokeObjectURL(): 임시 URL 생성 / 해제

📌 URL.createObjectURL(): Blob 객체나 File 객체를 사용하여 URL을 생성할 수 있게 해주는 메서드 자바스크립트의 웹 API 중 하나브라우저에서 동적으로 생성한 파일 데이터를 참조할 필요가 있을 때 사용한다.특징일회성 URL: URL.createObjectURL()로 생성된 URL은 페이지가 열려 있는 동안만 유효하다.브라우저가 해당 페이지를 새로 고침하거나 닫으면 더 이상 사용할 수 없다.메모리 사용: 생성된 URL은 메모리를 사용하므로, 사용이 끝난 후 URL.revokeObjectURL() 메서드를 호출하여 URL을 해제해야 한다.브라우저 호환성: 거의 모든 현대적인 브라우저에서 지원된다.사용 상황파일 업로드: 사용자가 업로드한 파일을 미리보기할 때 사용동적 이미지 생성:..

Javascript 2024.08.26