분류 전체보기101 useMemo를 사용한 성능 최적화 useMemo 리액트에서 컴포넌트의 성능을 최적화하기 위해 사용하는 훅이다. Memo는 Memoization을 의미하며, 동일한 데이터를 반복적으로 요청을 할 때 맨 처음값을 메모리에 저장해서 필요할 때마다 값을 계산하지 않고 메모리에서 꺼내서 사용하는 기법이다. 즉, 컴포넌트가 리렌더링이 됐을 때 데이터를 다시 계산하지 않고 메모리에 저장된 것을 가져오는 것을 의미한다. useMemo의 구조는 메모이제이션 해줄 값을 계산해서 리턴해주는 콜백함수와, 배열의 값이 업데이트될 때만 실행할 수 있도록 해주는 의존성 배열로 구성되어 있으며, 아래와 같다.(밑에 실제 사용 코드 있음) const value = useMemo(() => { return calculate()// 콜백함수 }, [item])// 의존성.. 2023. 11. 27. SSE 실시간 알림 기능 구현 중고 의류 거래 플랫폼 프로젝트를 진행하면서 채팅 기능, 찜하기 기능, 상점 팔로우 기능이 있었고, 누군가가 나에게 채팅을 보내거나 내 상품을 찜하거나, 나의 상점을 팔로우했을 때 알림이 오는 기능을 구현해야 했다. 채팅을 웹소켓으로 구현을 했지만, 양방향 통신을 지원하는 웹소켓에 비해 단방향 통신을 지원하는 SSE를 사용하는 것이 서버 리소스와 네트워크 트래픽을 절약할 수 있다고 판단해 SSE를 활용해 알림 기능을 구현하기로 하였다. SSE(Server Sent Event) 단방향 데이터 흐름(서버 -> 클라이언트) 단순성: 표준 HTTP를 통해 작동하기 때문에 WebSocket에 비해 간단함(캐싱, 프록시, 방화벽과 같은 기존 웹 인프라와 쉽게 통합) 자동 재연결 메커니즘 내장 WebSocket 양방.. 2023. 11. 20. 이미지 최적화(Browser image Compression) 중고 의류 거래 플랫폼 프로젝트를 진행할 때 상품 사진과 프로필 사진을 업로드하는 기능이 있었는데, Spring boot의 이미지 저장 용량의 기본값이 1MB여서 이보다 큰 이미지를 넣었을 때 500 에러가 발생하였다. 백엔드분들에게 요청을 해서 변경할 수 있기도 했지만, 프로필 이미지의 경우 매우 작은 사이즈였고, 상품 이미지의 용량도 너무 클 필요가 없다는 판단이 들어 최적화를 진행하게 되었다. Browser image Compression을 사용한 이유는 이후에 구현해야 할 기능들이 매우 많았고, 시간은 제한적이었기 때문에 학습시간이 비교적 적고 빠르게 적용할 수 있는 방법을 사용해야 했기 때문이다. Browser image Compression은 option 값과 이미지의 타입만 정해주면 됐기 때.. 2023. 11. 20. React lazy, Suspense React lazy React 컴포넌트를 동적으로 가져올 수 있는 함수로 dynamic import를 할 수 있게 해 준다. 이는 import()를 통해 불러오는 요소들을 무조건 불러오는 것이 아닌 사용자가 실제로 사용할 때만 로드될 수 있게 해주며, 초기 페이지 로딩 시간을 줄여준다. Suspense react lazy 함수를 통해 지연 로딩 된 컴포넌트를 래핑 할 수 있도록 React에서 제공하는 구성 요소로, react lazy를 통해 지연 로딩된 컴포넌트가 로드되는 동안 로드 상태를 처리하고, 대체 콘텐츠를 표시하기 위해 사용된다. 이는 지연 로딩된 컴포넌트가 로드되는 동안 표시할 내용을 지정하는 fallback Props가 필요하며, 기본적으로 로딩 중인 상태를 나타내는 내용을 넣는다. 사용 이.. 2023. 11. 20. 이전 1 2 3 4 5 6 7 8 ··· 26 다음 728x90
