728x90 배움 기록/ETC5 [TS] IndexedDB 공통 유틸: 구현과 사용법 (+ 기본 개념) 회사 프로젝트에서 Web Storage 로는 Local Storage 만을 사용하고 있었다.그러나 추후 Web Storage 에 저장해야 할 정보들이 많이 생겨날 것을 대비해,(Local Storage 보다) 더 많은 정보를 저장할 수 있는 IndexedDB 를 사용해보기로 했다. 모든 프로젝트에서 사용할 수 있게 공통화된 유틸을 작성하는 것이 필요했다.개인적으로 유틸을 완성하기까지 고군분투한 과정을 기록해보려고 한다🤣 목차IndexedDB 의 장점 및 특징CRUD 적용(TypeScript ver.) 예시와 주요 개념트러블 슈팅 경험 📌 IndexedDB ?IndexedDB 는 브라우저 내에서 구조화된 데이터 저장을 위한 API 이다.Local Storage 와 비교할 때 IndexedDB 가 가지는.. 2024. 7. 28. React-Query 를 사용하는 이유 (+ 개념, 컨셉, SSR Hydration, Redux ...) 📌 React Query 를 사용하는 이유 ? " 비동기 데이터 관리를 위해 사용한다. " 여기서 비동기 데이터란 Server state (= 서버의 상태) 를 의미한다. 즉, API 로 클라이언트에게 제공될 수 있는 서버의 데이터와 API 로 추가/수정/삭제가 될 수 있는 서버의 데이터를 의미한다. 나의 경우 Redux 를 사용하여 비동기 데이터를 관리하곤 했다. 그러나 Redux 는 API 통신 및 비동기 데이터 관리를 위한 라이브러리가 아니기 때문에, (*Redux 는 전역 상태 관리를 위한 라이브러리) API 요청을 통해 받아온 데이터를 관리하는 코드나 API 상태를 관리하는 코드 등을 직접 작성해야 했다. 반면 React Query 는 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업.. 2023. 10. 9. [MongoDB] Next.js 에서 MongoDB 사용하기 (+ Dynamic Route 에서 DB 데이터 사용하는 법) 1. MongoDB 라이브러리 설치 npm install mongodb : Next.js 작업 폴더를 열어 라이브러리를 설치한다. 2. DB 연결 함수를 담을 js 파일 만들기 긴 코드를 따로 파일을 만들어 export 하여 사용함으로써 - 재사용이 간편함 - 컴포넌트마다 DB 연결 코드를 작성하면, 새로고침 할 때 마다 connet 를 계속함 → DB 에 부담 → Next.js 서버 띄울 때 1번만 실행하면 좋기 때문에 따로 파일을 만드는 것이 나음 • /util/database.js // database.js import { MongoClient } from "mongodb" const url = ''; const options = { useNewUrlParser: true }; let connetD.. 2023. 9. 12. [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. 이전 1 2 다음 728x90
