Intersection Observer란 무엇일까? 참고 Intersection Observer란, JS의 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 안되는지(즉, 사용자 화면에서 보이는 지 안 보이는 지) 구별하는 기능을 말한다. 비동기적으로 실행되기에, scroll같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있다. 1. Intersection Observer 생성 가장 처음으로 Intersection Observer를 통해 관찰하려는 대상을 연결합니다. 특정 DOM에 접근할 수 있도록 useRef를 사용하여 target인 div 태그를 선택합니다. import { useRef } from 'react'; e..
Suspense란 무엇일까? Suspense란, 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능입니다. SPA(Single-page-Application)의 단점은 한 번에 사용하지 않는 모든 컴포넌트까지 불러오기 때문에 첫 화면이 렌더링 될 때까지 시간이 오래걸리기는 것입니다. React는 lazy를 통해 컴포넌트를 동적으로 import하여 초기 렌더링 지연시간을 어느 정도 줄여줄 수 있습니다. const SomeComponent = React.lazy(() => import('./SomeComponent')); Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 pa..
REST API vs Websocket API 채팅은 REST API로도 구현할 수 있다. 그러나 Rest API를 이용하여 반복하여 요청해서 데이터를 요청하고, 데이터를 받아올 수 있게 되면 자원 낭비가 일어나게 된다. 그렇다면 한 번만 요청하고 그 뒤로 정보가 변할 때마다 그냥 불러오도록 할 수 없을까? 여기서 새로운 방식의 API가 필요하게 된다. 바로 Websocket API이다. 구독형 API라고도 할 수 있다. Websocket API : Statefull protocol, 요청을 매번 보내는 게 아니라 connection을 유지해서 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술 - Websocket API 방식에서는 데이터 요청자와 데이터 제공자 간에 흐르는 채널이 열리게 된다. - ..