Per ardua ad astra.

헤더에 인증 정보 추가하는 방법들어가며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..

fetch() API와 Axios의 에러 처리 방법 비교들어가며FetchAPI와 Axios의 에러 처리 방법의 차이에 대해 간단하게 정리해본다. 오류 처리 방법 비교fetch() API기본적으로 네트워크 요청이 성공적으로 완료되었는지를 상태 코드(Status Code)가 아닌, 네트워크 오류 여부로 판단한다.즉, 네트워크 연결이 제대로 되어 서버에 요청이 전달되고, 서버로부터 응답이 왔다면, 그 응답이 200번대(성공) 상태 코드인지, 400번대(클라이언트 오류) 또는 500번대(서버 오류) 상태 코드인지와 상관없이 요청이 '성공적으로' 완료된 것으로 간주한다.이 경우 @fetch()@는 프로미스(Promise)를 성공 상태로 반환하며, 응답 객체를 @resolve@한다.이 때문에 4xx 또는 5xx와 ..

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