axios 라이브러리

axios 라이브러리

JavaScript에서 HTTP 요청을 보내는 데 사용됨, 브라우저와 Node.js 환경에서 모두 사용할 수 있는 강력한 HTTP 클라이언트 라이브러리. 이 라이브러리를 사용하면 비동기적으로 HTTP 요청을 보낼 수 있으며, RESTful API와 통신하는 데 유용.

import axios from "axios";

 

import 키워드를 사용하여 axios를 현재 파일로 가져오고 있습니다. "axios"는 axios 라이브러리가 설치된 패키지의 이름이며, axios 라이브러리는 NPM을 통해 설치하여 사용할 수 있습니다.

axios를 사용하면 서버로부터 데이터를 가져오거나 데이터를 전송하는 등의 HTTP 요청을 보낼 수 있게 됩니다.

 

axios.get("/api/users")
.then(response => { console.log(response.data); })
.catch(error => { console.error(error); });

 

위의 예시는 /api/users 엔드포인트로 GET 요청을 보내고, 응답을 받아와서 콘솔에 출력하는 코드입니다. axios를 사용하면 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 서버와 통신할 수 있습니다.

 

export const baseUrl = `https://jf60xmj7q3.execute-api.ap-northeast-2.amazonaws.com/api`;
export const getAllUser = () => {
   const url = `${baseUrl}/user?page=0`;
   return axios.get(url);
};
export const getUserPerPage = (page) => {
   const url = `${baseUrl}/user?page=${page}`;
   return axios.get(url);
};
export const getUserPerGender = (gender) => {
   const url = `${baseUrl}/user?gender=${gender}`;
   return axios.get(url);
};
export const getUserPerStack = (stack) => {
   const url = `${baseUrl}/user?stack=${stack}`;
   return axios.get(url);
};

 

export 키워드를 사용하여 baseUrl과 다양한 함수들을 내보내고 있습니다. 

1. baseUrl: API의 기본 URL을 정의하는 변수입니다. https://jf60xmj7q3.execute-api.ap-northeast-2.amazonaws.com/api로 설정되어 있습니다.

2. getAllUser(): 모든 사용자 정보를 가져오기 위한 함수입니다. baseUrl을 기반으로 /user?page=0 경로로 GET 요청을 보냅니다. axios.get()을 사용하여 해당 URL로 요청을 보내고 결과를 반환합니다.

3. getUserPerPage(page): 페이지 단위로 사용자 정보를 가져오기 위한 함수입니다. page 매개변수를 받으며 baseUrl을 기반으로 /user?page={page} 경로로 GET 요청을 보냅니다.

4. getUserPerGender(gender): 성별로 사용자 정보를 가져오기 위한 함수입니다. gender 매개변수를 받으며 baseUrl을 기반으로 /user?gender={gender} 경로로 GET 요청을 보냅니다.

5. getUserPerStack(stack): 기술 스택으로 사용자 정보를 가져오기 위한 함수입니다. stack 매개변수를 받으며 baseUrl을 기반으로 /user?stack={stack} 경로로 GET 요청을 보냅니다.

이렇게 정의된 함수들은 API와 상호작용하여 데이터를 가져오거나 조작할 수 있는 도구로 사용될 수 있습니다. 프론트엔드 애플리케이션에서 이러한 함수를 활용하여 서버로부터 데이터를 받아오거나 데이터를 필터링하는 등의 작업을 수행할 수 있습니다.