WebStorage(웹 스토리지)란?Web Storage(웹 스토리지) 는 브라우저에 데이터를 저장하는 방법 중 하나로, 클라이언트 측에서 데이터를 영구적 또는 일시적으로 저장할 수 있도록 합니다. 대표적으로 LocalStorage와 SessionStorage가 있으며, 기존의 쿠키(Cookie)보다 더 많은 데이터를 저장할 수 있고 보안적으로도 안전합니다.LocalStorageLocalStorage는 사용자가 데이터를 삭제하지 않는 한 브라우저에 영구적으로 저장됩니다. 즉, 페이지를 닫거나 브라우저를 종료해도 데이터가 유지됩니다.// LocalStorage 데이터 저장localStorage.setItem('username', 'JohnDoe');// 데이터 가져오기const user = localSto..

1. Axios란?Axios는 브라우저와 Node.js 환경에서 사용 가능한 HTTP 클라이언트 라이브러리입니다. 주로 API 요청을 보낼 때 사용되며, 응답을 처리하는 기능을 제공합니다.2. Axios InterceptorInterceptor는 요청(request) 또는 응답(response)이 처리되기 전후에 실행되는 기능입니다. 이를 통해 공통적인 요청/응답 로직을 중앙에서 관리할 수 있습니다.요청 인터셉터(Request Interceptor)요청을 보내기 전에 특정 작업을 수행할 수 있습니다. 예를 들어, 모든 요청에 인증 토큰을 추가하는 경우가 있습니다.axios.interceptors.request.use( (config) => { config.headers.Authorization =..

Intro이전에 Axios에 대해서 정리를 했었지만 Axios를 깊게 찾아보기보단 Ajax와 Fetch 와의 차이점에 초점을 두고 찾다보니 내용이 많이 부실한거 같아서 새롭게 다시 찾아보고 정리를 해볼려고 한다.Axios공식 문서에 따르면 아래와 같이 설명이 적혀있다. Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다. 다른 블로그나 사람들이 하는 말들을 보면 더 직관적이다, 더 편리하다 라고하니까 라고 하는데 자세하게 설명을 안하는 글..

Intro학원에서나 또는 이전까지 프로젝트를 진행하며 프론트 영역에서 백엔드와 API 통신을 할 때면 Ajax를 사용해서 비동기 통신을 작업을 하였었는데 Vue.js를 공부하고 다루며 Vue에서는 Ajax 대신 Axios를 사용하기를 권고하고 있다는 걸 알게 되었다.처음에는 Axios를 알아보기전에는 Vue에 내장된 비동기 통신이구나 라고 생각했었는데...두 개 모두 제대로 사용하기 위해 Ajax와 Axios가 어떻게 다르면 왜 Axios를 사용하기를 권고하는지 알아보자Axios브라우저와 Node.js 환경에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리이다.특징XSRF 보호자동으로 JSON 데이터 형식으로 변환Promise API를 지원타임아웃 설정 및 요청 재시도 가능요청 및 ..