전체 글12 Vue 2.6에서 Vue Query Devtools 연동 도전기 회사에서 진행하는 Vue2 기반 프로젝트에서는 API 통신을 기본적으로 axios로 처리하고 있었다.❌ 기존 axios 통신의 한계상태 관리 미흡: API 호출 결과를 Vuex나 로컬 상태로 직접 관리해야 해서 로딩/에러/성공 상태를 명시적으로 처리하는 반복적인 코드가 많았다.서로 다른 API 간 연계 어려움: 예를 들어 "등록 성공 시 목록 자동 갱신" 과 같은 API 간 상호작용은 별도로 watch, emit, 또는 강제 리프레시 로직을 작성해야 했다.불필요한 재요청: 동일한 API 요청을 여러 컴포넌트에서 수행할 경우 중복 요청이 발생했고, 이를 캐싱하거나 취소하는 로직은 매번 수작업으로 구현해야 했다.공통 로직 중복: try/catch, loading, errorMessage 처리 코드가 API마.. 2025. 7. 21. responseType 500 에러가 발생할 때 API 응답으로 {code: string, message: string}을 받고 있었다.그래서 인터셉터에서 response.data.message로 공통 에러 메시지를 처리했는데,엑셀 다운로드 API에서는 undefined가 나왔다. 엑셀 다운로드 API는 responseType을 blob으로 설정하기 때문에 응답이 blob 형태로 온다.따라서 메시지를 얻기 위해서는 blob 데이터를 텍스트로 변환한 후 JSON 파싱이 필요하다. let errorMessage = '관리자에게 문의하세요'; if (response.request.responseType === 'blob') { const errorText = await response.data.tex.. 2024. 6. 4. Optimistic Updates 2024. 5. 24. requestAnimationFrame mui 탭 컴포넌트를 사용하면서 탭이 변경될 때마다 컴포넌트가 렌더링 되는 과정에서 스크롤을 최하단으로 내리고 싶을 때 사용한다. 스크롤 애니메이션등, 애니메이션에 최적화된 함수이다. useEffect(() => { if (componentEndRef.current) { const scroll = () => { componentEndRef.current?.scrollIntoView({behavior: 'smooth'}); }; requestAnimationFrame(() => { requestAnimationFrame(scroll); }); } }, []); return ( ... 여러가지 컴포넌트 ); 렌더링 되는 컴포넌트보다 아래쪽에 ref를 두면 된다. 2024. 4. 4. stretch alignItems: stretch 를 써서 모든 자식 컴포넌트들이 동일한 높이를 갖게함. mui helperText 쓸 때, 요소 2개가 한 줄에 있게 배치했을 때 2024. 2. 26. Recoil이란? Recoil이란 무엇일까? Recoil을 사용하기 위해서는 몇 가지 중요한 개념을 알아야합니다. 1) Atoms 2) Selectors 3) Hooks 먼저 이 세 가지 개념에 대해 간단히 알아봅시다! Atoms Recoil의 기본 단위로, 상태의 일부를 나타냅니다. 각 Atoms는 고유한 키를 가지며, 어떤 컴포넌트에서든 사용할 수 있는 전역 상태를 관리합니다. Selectors Selectors는 파생된 상태(derived state)를 나타냅니다. 기본 상태(Atom)를 입력으로 받아, 이를 변환시켜 새로운 값을 생성합니다. Hooks Recoil은 React의 hook API를 사용하여 상태를 컴포넌트에 연결합니다. `useRecoilState`, `useRecoilValue`등의 훅을 통해 At.. 2023. 12. 4. React Query란? React Query는 React 애플리케이션에서 서버 상태 관리를 돕는 라이브러리입니다. 서버 상태 관리: 서버로부터 받은 데이터를 효율적으로 관리하는 것 🔍 React Query가 제공하는 기능을 살펴봅시다. 1. 데이터 가져오기 (Fetching Data): 서버에서 데이터를 가져오고, 그 데이터를 React 컴포넌트에서 사용할 수 있도록 해줍니다. 2. 캐싱 (Caching): 한 번 서버로부터 받아온 데이터를 임시 저장소에 저장해두고, 같은 요청이 다시 발생했을 때 재사용합니다. 이를 통해 불필요한 서버 요청을 줄이고, 애플리케이션의 성능을 향상시킵니다. 3. 자동 업데이트와 재요청 (Automatic Updates and Refetching): 데이터가 변경되었을 때 자동으로 새로고침하거나, .. 2023. 12. 4. 알고리즘과 자료구조 배열과 연결 리스트의 차이점은 무엇일까? 배열 🔳🔳🔳 배열은 메모리 상에서 연속적인 공간에 데이터를 저장합니다. 이로인해 인덱스라는 것을 갖게 됩니다. 인덱스로 원소에 대한 빠른 접근이 가능합니다. 시간 복잡도⏳ 정적 배열은 일반적으로 삽입, 삭제 기능을 지원하지 않는다. 탐색🔍 : O(1) 직접 원소에 접근하기 때문 삽입➕ : O(n) 배열의 처음과 중간에 원소를 삽입하려면, 다른 원소들을 이동시켜야 하기 때문 배열의 끝 O(1) 삭제🗑️ : O(n) 배열의 처음과 중간에 원소를 삭제하려면, 다른 원소들을 이동시켜야 하기 때문 배열의 끝 O(1) 알아두면 좋은 것💡 웹 애플리케이션에서 사용자의 목록을 고정된 크기로 유지하고 빠른 조회만 필요한 경우 사용 javascript의 배열은 동적 배열의 특성(내.. 2023. 10. 20. 이전 1 2 다음
