Axios 라이브러리 역할은?

 

Axios는 툴이라기보다는 라이브러리입니다.

정확히 말하면, 자바스크립트에서 HTTP 요청을 쉽게 보내기 위한 클라이언트 라이브러리입니다.

---

핵심 개념

• 브라우저나 Node.js 환경에서 서버에 요청(GET, POST 등)을 보낼 때 사용
• 내부적으로는 HTTP 통신을 간편하게 다루도록 도와줌

---

왜 쓰는가

기본적으로 자바스크립트에는 Fetch API가 있지만, Axios는 다음이 더 편합니다.

• 응답 데이터를 자동으로 JSON 변환
• 요청/응답 인터셉터 지원 (중간 처리 가능)
• 에러 처리 구조가 명확함
• 타임아웃, 취소 기능 지원

---

간단 예시

import axios from 'axios';

// GET 요청
axios.get('https://api.example.com/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// POST 요청
axios.post('https://api.example.com/users', {
  name: '홍길동'
});

---

한 줄 정리

• Axios = 서버와 통신하기 쉽게 만들어주는 자바스크립트 HTTP 요청 라이브러리

---

“자바스크립트에서 HTTP 요청을 한다”는 건
브라우저(또는 JS 코드)가 서버에게 데이터를 요청하거나 보내는 통신을 한다는 뜻입니다.

---

1. HTTP 요청이란

HTTP는
클라이언트(브라우저)와 서버가 대화하는 규칙입니다.

즉,

• 브라우저 → 서버 : “데이터 주세요” (요청)
• 서버 → 브라우저 : “여기 있습니다” (응답)

---

2. 자바스크립트에서 한다는 의미

웹페이지에서 JS가 직접 서버와 통신합니다.

예를 들어:

• 로그인 버튼 클릭
• 상품 목록 불러오기
• 게시글 저장

이런 동작을 할 때 JS가 서버로 요청을 보냅니다.

---

3. 실제 흐름 (예시)

1. 사용자가 버튼 클릭
2. JS 코드가 서버로 요청 보냄
3. 서버가 처리 후 응답 반환
4. JS가 결과를 화면에 반영

---

4. 코드로 보면

fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  });

이 코드는:

👉 “users 데이터를 서버에 요청(GET)한다”는 의미입니다.

---

5. 요청 종류 (중요)

• GET → 데이터 조회
• POST → 데이터 생성
• PUT/PATCH → 수정
• DELETE → 삭제

---

6. 한 줄 정리

• HTTP 요청 = JS가 서버랑 데이터를 주고받는 통신 행동

---

앞에서 말한 Axios는 이 과정을 더 쉽게 해주는 도구(라이브러리)라고 이해하시면 정확합니다.