분류 전체보기67 [리액트] 웹 성능 최적화 with Lighthouse 🧸 웹 성능 결정 요소 로딩 성능 - 각 리소스를 불러오는 성능 이미지 사이즈 최적화 / Code Split / 텍스트 압축 렌더링 성능 - 불러온 리소스들을 화면에 보여주는 성능 Bottleneck 코드 최적화 📌 LightHouse Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구 📊 LightHouse 성능 지표 First Contentful Paint(FCP) -> 10%의 가중치 사용자가 특정 웹 페이지로 이동했을 때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간 Speed Index -> 10%의 가중치 웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간 Time To Interactive(TTI).. 2023. 6. 28. [리액트] 로그아웃 후 재 로그인 시 이전 알림이 새로운 알림으로 수신되는 문제 해결하기 사용자가 로그아웃한 이후에 수신되는 채팅이 있는 경우 재 로그인 시에 읽지 않은 채팅이 있음을 알려주는 alert창을 띄워주기로 하였다. 하지만 로그아웃 후에도 EventSource 연결이 유지되어 이전 알림이 새로운 알림으로 수신되는 문제가 발생하였다. 이를 해결하기위해 로그아웃 시 EventSource 연결을 확실히 종료하고, 재로그인 시에는 새로운 연결이 수립되도록 코드를 구성하여 이전 알림이 수신되지 않도록 하기로 했다. const eventSourceRef = useRef(null); const EventSource = EventSourcePolyfill; useEffect(() => { if (isLoggedIn) { const fetchSse = async () => { const heade.. 2023. 6. 28. [리액트] 실시간 알림 SSE(Server-Sent Events) 헤더에 토큰 담아 보내기 SSE를 사용해서 실시간 알림을 구현하던 중에 토큰을 헤더에 담아 보내주어야했다. const Access_key = sessionStorage.getItem("Access_key"); const Refresh_key = sessionStorage.getItem("Refresh_key"); useEffect(() => { const eventSource = new EventSource( `https://moment-backend.shop/sse/chat/alarm/${userId}`, { withCredentials: true, headers: { ACCESS_KEY: `${Access_key}`, REFRESH_KEY: `${Refresh_key}`, }, } ); eventSource.addEventL.. 2023. 6. 27. [리액트] React에서 Server-Sent Events(SSE)를 통한 실시간 알림 구현하기 💌 SSE(Server Sent Event)란? Server-Sent Events(SSE) 란, 실시간으로 서버에서 클라이언트로 데이터를 보내는 단방향 통신을 의미한다. SSE는 클라이언트가 서버에 연결 상태를 유지하면, 서버가 클라이언트에 지속적으로 데이터를 전송할 수 있다. 🌈 실시간 통신 기술들 - 웹소켓(WebSocket): 실시간 양방향 데이터 통신을 제공하는 프로토콜으로 서버와 브라우저가 지속적으로 연결된 TCP라인을 통해 실시간 데이터를 주고받을 수 있도록 한다. 연결지향 양방향 통신이 가능하며 채팅, 게임 등에 사용된다. polling은 주기적으로 HTTP 요청을 수행하지만 webSocket은 연결을 유지하여 서버와 클라이언트 간 양방향 통신이 가능하다. - Long Polling: 클라이.. 2023. 6. 27. 이전 1 ··· 3 4 5 6 7 8 9 ··· 17 다음
