조각조각
-
[스터디기록02/티코드(React)] 이미지 지연 로딩(Image Lazy Loading) 맛보기 - Intersection Observer API조각조각/티코드 스터디(React) 2024. 3. 5. 23:08
🏔️ 티코드 스터디 소개- 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디- 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👾 문제상황이미지 데이터를 대량으로 받아오는 페이지에 접속한다고 가정해 보자.예시처럼 좋은 화질의 이미지를 제공할수록 데이터의 용량은 커지고, 이미지를 받아오는 시간 또한 증가하게 된다.이에 따라 사용자는 이미지가 모두 받아와질 때까지 하염없이 빈 화면을 보며 기다려야 하는 상황을 마주하게 될 것이다. 사용자가 보고있는 화면(뷰포트)에 보이는 이미지만 먼저 로드되어 보여진다면 사용자 경험을 더 향상시킬 수 있지 않을까? 이 때 사용할 수 있는 최적화 기법 중 하나로 이미지 지연 로딩(Image Lazy..
-
[스터디기록01/티코드(React)] 디바운싱(Debouncing) 구현방법 배우기조각조각/티코드 스터디(React) 2024. 3. 2. 22:59
🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👾 문제상황 검색어를 입력하면 API 요청을 통해 검색 결과를 받아오고 있다고 가정해보자. 엔터없이 검색어를 적을 때마다 일치하는 결과 여부를 보여주려면 onChange 이벤트가 사용자의 입력을 실시간으로 체크하고 있어야한다. 이때 문제는 한글자씩 입력할 때마다 API 요청이 들어가는데에 있다. 만약 대규모 서비스에서 이런 불필요한 이벤트가 동시다발적으로 발생하게 되면 어떻게 될까? 서버에 쿼리를 요청하는 횟수가 증가하면서 서버 비용과 자원 소모가 크게 증가하게 될 것이다. 이러한 문제는 사용자의 요청 ..