Per ardua ad astra.

- [Axios] 헤더에 인증 정보 추가하는 방법

헤더에 인증 정보 추가하는 방법들어가며Axios를 사용하여 헤더에 인증(Authorization) 정보를 추가하는 방법을 정리해본다.이 글은 리액트(React) 코드로 작성되었다. 방법① 파일에 인증 헤더 부분 추가하기API 호출을 하고자 하는 파일 안에 인증 정보를 담은 변수를 생성하여 추가하는 방법이다.// 인증 정보를 담은 변수const authHeader = (thunkAPI) => { return { headers: { authorization: `Bearer ${thunkAPI.getState().user.user.token}`, }, };};export const createJobThunk = async (job, thunkAPI) => { try { const..

HTTP 메서드들어가며Axios와 함께 HTTP 메서드에 대해 정리해본다. HTTP 메서드개념HTTP(Hypertext Transfer Protocol) 메서드는 웹 서버에서 데이터를 가져오거나 수정하거나 삭제하는 등의 작업을 수행할 때 사용하는 메서드이다.자주 사용되는 메서드로는 GET, POST, PATCH, DELETE가 있으며, @fetch()@ 또는 Axios 등을 이용하여 이러한 요청을 보낼 수 있다. 종류① GET서버에서 데이터를 가져오는 데 사용된다.주로 데이터베이스에서 정보를 조회하거나, 웹 페이지를 읽거나, 파일을 다운로드할 때 사용된다.try { const response = await axios.get('/api/data'); console.log(response.data);} ..

전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor)들어가며Axios의 전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor) 개념에 대해 정리해본다. 전역 인스턴스(Global Instance)개념Axios의 기본 인스턴스를 설정하여 애플리케이션 전체에서 사용할 수 있도록 하는 방법모든 Axios 요청에 기본적인 설정(예: @baseURL@, @headers@ 등)을 적용할 수 있다. 설정 방법프로젝트의 @src@ 폴더 안에 @axios@ 폴더를 만들고, @global.js@ 파일을 생성한다.그리고 다음과 같이 코드를 작성한다.import axios from 'axios';// In latest axios version common proper..

Axios 라이브러리들어가며Axios 라이브러리에 대해 알아보자. Axios개념Node.js 및 브라우저에서 동작하는 HTTP 클라이언트 라이브러리 중 하나주로 HTTP 요청(Request)을 생성하고 응답(Response)을 처리하는 데 사용된다.Axios는 Promise 기반으로 작성되어 있어 비동기 코드를 쉽게 다룰 수 있다.동일한 코드베이스로 브라우저와 Node.js에서 실행할 수 있다.서버 단(Server-Side)에서는 네이티브 Node.js의 @http@ 모듈을 사용하고, 클라이언트(브라우저)에서는 @XMLHttpRequests@를 사용한다.Axios를 사용하면 HTTP 요청을 쉽게 생성하고 응답을 처리할 수 있다.특히 비동기 프로그래밍에서 Promise를 사용하므로 코드가 더 읽기 쉽고 유..