Dev Note/JavaScript2 Intersection Observer 로 화면에 보이는 부분만 로딩하기 (feat. Lazy loading) 🖥️ 최근 회사에서 개발하던 기능 중 요소의 가시성에 따라 API 를 호출해야하는 작업이 있었습니다. 기존에는 페이지에 진입하는 순간 관련 API를 모두 호출하여 화면에 그려주는 방식으로 구현이 되어있었는데요, 해상도나 유저의 세팅 상태에 따라 보이지 않는 기능의 API까지 전부 호출하던 부분이 비효율적이라고 판단되어, 일반적으로는 이미지를 Lazy loading 하는데에 주로 쓰이는 Intersection Observer API 를 활용하여 서버로 호출하는 API 자체도 Lazy loading 을 시도해보았고, 관련 내용을 공유해보려고 합니다. Lazy loading 이란? Lazy loading 은 '지연 로딩', 즉 리소스를 식별하여 필요할 때만 로드하는 전략입니다. 웹이 발전함에 따라 사용자에게 .. 2023. 5. 21. 크롬 개발자도구 뜯어보기 Why? ✏️ 개발자 도구는 평소에 습관처럼 디버깅하는데에 쓰고 있지만, 이번에 회사에서 '프론트엔드 성능 최적화 가이드'라는 책으로 스터디를 진행하면서 생각보다 놓치고 있는 부분도 많고 더 좋은 기능도 많이 제공하고 있다는 것을 알게되어 포스팅을 해본다. 크롬 개발자 도구 크롬 브라우저에서 제공하는 웹 개발에 도움되는 다양한 툴입니다. 여는 방법 f12 ctrl + shift + i (command + option + i) 요소 검사 (하이라이트) Network 패널 현재 웹 페이지에서 발생하는 모든 네트워크 트래픽을 상세하게 알려줍니다. 어떤 리소스가 어느 시점에 로드되는지, 해당 리소스의 크기 등을 확인할 수 있습니다. Perfomance 패널 웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줍니.. 2023. 4. 23. 이전 1 다음 반응형
