728x90 TypeScript6 [TS] IndexedDB 공통 유틸: 구현과 사용법 (+ 기본 개념) 회사 프로젝트에서 Web Storage 로는 Local Storage 만을 사용하고 있었다.그러나 추후 Web Storage 에 저장해야 할 정보들이 많이 생겨날 것을 대비해,(Local Storage 보다) 더 많은 정보를 저장할 수 있는 IndexedDB 를 사용해보기로 했다. 모든 프로젝트에서 사용할 수 있게 공통화된 유틸을 작성하는 것이 필요했다.개인적으로 유틸을 완성하기까지 고군분투한 과정을 기록해보려고 한다🤣 목차IndexedDB 의 장점 및 특징CRUD 적용(TypeScript ver.) 예시와 주요 개념트러블 슈팅 경험 📌 IndexedDB ?IndexedDB 는 브라우저 내에서 구조화된 데이터 저장을 위한 API 이다.Local Storage 와 비교할 때 IndexedDB 가 가지는.. 2024. 7. 28. [Axios] Axios Interceptors 사용법 📌 Axios Interceptors ? Axios Interceptors는 axios의 then 또는 catch로 처리 되기 전에 요청과 응답을 가로챌 수 있다. 현재 진행하고 있는 영화 프로젝트의 리팩토링 과정에서 Axios Interceptors를 사용하기로 했다. Axios Interceptors를 사용할 경우, 인증 토큰 관리 : 요청 인터셉터에서 access token의 유효함을 확인하고, header에 실어 보내는 작업을 함 중복 코드 감소 : 요청과 응답을 처리하기 전에 공통적으로 적용되어야 하는 로직 중앙화 전역 오류 처리 : 모든 요청 및 응답에 대해 일관된 오류 처리 구현 📌 적용 코드 request : 요청을 보내기 전에 사용 axios.interceptors.request.use(.. 2023. 7. 29. [React] Redux-persist 사용법(Redux toolkit ver.) (+ Next.js, TypeScript) 이번에 회사 이벤트 페이지들을 Vue에서 React로 바꾸게 되었는데, Redux toolkit을 사용하여 필요한 정보를 가져와 화면에 표시하였다. 그러나 store는 새로고침하면 값이 날아가기 때문에 새로고침 시 해당 화면이 그려지지 않는 문제가 발생했다. 이 문제를 해결하기 위해 Redux-persist를 사용하면 좋을 것 같았다. 📌 Redux-persist ? Redux-persist는 store 값을 localStorage나 sessionStorage에 저장하여 새로고침해도 데이터를 유지된다. 새로고침 시 저장공간에 있는 데이터를 Redux에 불러오는 형식으로 이루어진다. 📌 Redux-persist 적용하기 (Redux toolkit ver.) ( Redux toolkit 사용 방법 ) [st.. 2023. 5. 30. [React] Redux Toolkit 사용법 (+ TypeScript 세팅) Redux Toolkit (+TypeScript) 세팅 방법에 대해 정리해보겠습니다 회사에서 프로젝트를 진행하던 중 Redux를 통해 state를 관리하기 위해 세팅해보기로 했다.개인 프로젝트를 진행할 때 Redux Toolkit에 편리함을 느꼈어서 해당 툴을 사용하고자 했다. 📌 Redux Toolkit ?Redux Toolkit은 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷이다.Redux보다 코드가 간결하고 더 개선되어 유지 관리가 쉽기 때문에 사용을 강력히 권장하고 있다. 📌 Redux Toolkit이 제공하는 것| store.jsimport { configureStore, createSlice } from '@reduxjs/toolkit';// news.. 2023. 2. 12. 이전 1 2 다음 728x90
