리액트19 [리액트] React query parameter(=query string)으로 검색기능 구현하기 검색기능을 구현하면서 서버에 query parameter로 검색 카테고리와 검색어를 함께 보내줘야하는 상황이 생겼다. 아래와 같이 검색 카테고리와 검색어를 함께 서버로 넘겨줘야했기 때문에 쿼리 파라미터를 이용하기로 했다. 먼저 검색 카테고리를 선택할 수 있게 selector를 이용해 option(카테고리)을 선택할 수 있게 하고 const [currentOpt, setCurrentOpt] = useState("내용"); const [option, setOption] = useState("contents"); const optionChangeHandler = (currentOpt) => { if (currentOpt === "내용") { setOption("contents"); } else if (curr.. 2023. 6. 30. [리액트] 웹 성능 최적화 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. 이전 1 2 3 4 5 다음
