Lazy Loading을 사용하게 된 이유SejongPeer를 리팩토링하면서 성능 최적화를 하기로 했다.그 중 첫 번째 단계가 바로 Lazy Loading인데 무슨 개념인지 알아보자.Lazy Loading이란?보통 웹페이지를 불러올 때 페이지 전체에 대한 데이터(리소스)를 불러오면서 초기 로드 시간이 길어지고, 사용자가 당장 필요하지 않은 리소스까지 모두 다운로드하므로 불필요한 네트워크 사용을 초래한다.때문에 페이지 수가 수십 페이지 정도 되는 SejongPeer에게는 꼭 필요한 기능 중에 하나라고 생각했다.기존에 도입하려는 방식기존에는 React의 React.lazy()와 Suspense를 사용해 지연 로딩 중 로딩 상태를 표시하려고 했다.하지만 우린 프로젝트 사이즈가 크기도 하고 추후 React Qu..

이번 글에서는 페이지 라우팅 시 여러 가지 path를 사용하지 않고 하나의 URL의 쿼리 문자열 부분을 조작하여 읽어 라우팅을 하는 useSearchParams에 대해 작성해보려고 한다. useSearchParams란?주로 JavaScript 프레임워크와 라이브러리에서 URL 검색 파라미터를 관리하는 데 사용되는 개념이다.특히 react와 같은 SPA(Single Page Application)에서 많이 사용된다. 보통의 경우 URL의 쿼리 문자열은 `?`로 시작하여 `&`로 구분되는 키-값 쌍으로 이루어져 있다.예시로 알아보자 http://localhost:3000/survey/new/?step=1 위 주소는 현재 내가 하고 있는 프로젝트에서 설문 생성하기 페이지 중 1페이지를 가리킨다. 그..

이번 글에서는 CMC에서 처음 알게되었고 사용한 AxiosInstance에 대해 기술해보려고 합니다.AxiosInstance에 대해 알아보기 전에 axios에 대해 간략하게 알아보고 넘어가봅시다.axios는 HTTP 요청을 보낼 때 매우 유용한 JS 라이브러리인데, 이를 통해 API와의 통신을 간단하고 직관적으로 처리할 수 있습니다.axios의 강력한 기능 중 하나는 axios.create 메서드를 사용해 기본 설정이 포함된 인스턴스를 생성할 수 있다는 점입니다.이 인스턴스를 통해 공통 설정을 재사용하고, 요청과 응답을 전역적으로 처리하는 interceptors를 쉽게 관리할 수 있습니다.우선 제가 프로젝트에서 사용한 코드를 보며 하나하나 살펴봅시다.import axios from 'axios';expo..