[ 엘리스 SW 엔지니어 트랙 ] 20일차

📍 20일 차 11.20. 토.(온라인 강의)

오늘은 JS기본 내장 라이브러리인 fetch와 HTTP 비동기 외부 라이브러리인 Axios와의 차이점, API 그리고 HTTP methods에 대해서 배웠다. 본론으로 들어가기 전 Window는 DOM document를 포함하는 창을 나타내는 창을 말하고, document는 브라우저에 로드된 웹 페이지를 나타내는 객체이다. 쉽게 말해 window는 브라우저 전체를, document는 브라우저 내부의 화면을 말한다.

---

❏ Axios

1. Ajax는 비동기 JS란 의미로 Asynchronous JavaScript and XML의 약자입니다. Ajax는 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 화면 전체를 새로고침하지 않고 변경된 일부 데이터만 로드하는 비동기 처리가 가능합니다. Axios는 Ajax와 유사하며, API를 이용한 통신을 할 때 주로 사용합니다.
2. Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해 백엔드와 프런트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로, Ajax처럼 사용되는 것입니다. 비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로 처리되어야 하므로 코드의 순서를 신경 써서 작성해야 합니다. 코드 작성이 매우 복잡해지며, 따라서 비동기 통신을 쉽게 해주는 Axios나 Ajax같은 것이 자주 사용되는 것입니다.

❏ Axios vs Fetch

1. 둘 다 HTTP 요청을 처리하기 위한 JS 라이브러리지만 몇 가지 차이점이 존재합니다.
2. Fetch의 경우 JS에 내장되어있기 때문에 별도의 import나 설치가 필요하지 않습니다. 하지만, Axios의 경우 설치 과정이 필요합니다.
3. Fetch는 IE에서 사용이 불가하고 Edge 14버전 이상부터 사용이 가능합니다.(caniuse) 반면, Axios는 Fetch보다 많은 브라우저에서 지원하고 있어 크로스 브라우징이 더 뛰어납니다.
4. Fetch에서 지원하지 않는 JSON자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원해줍니다.
5. 무조건 Axios를 사용하기보다는 자신의 개발 상황에 맞는 라이브러리를 선택해야 합니다.

❏ API

1. 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 말합니다.
2. 만약 여러분이 밥을 먹기 위해 식당을 갔다고 해봅시다. 손님인 여러분은 요리사에게 음식 주문을 해야 밥을 먹을 수 있습니다. 하지만 직접 요리사에게 말하지는 않죠. 일반적인 경우 점원을 통해 주문을 할 텐데요. 이때 점원 역할이 바로 API라고 생각하시면 됩니다. 즉, 프로그램과 프로그램을 연결해 주는 다리 역할을 하는 것이 API입니다.
3. 나 자신이 URL을 통해 누군가에게 해당 정보를 요청하면, 요청한 정보를 누군가가 나에게 다시 전달해줍니다. 이러한 규칙을 HTTP라고 부릅니다.
4. 요청받은 데이터를 가져오는 것은 웹 서버의 역할이며 HTTP는 바로 그 클라이언트와 서버 간의 규칙입니다. 이때, 클라이언트의 요청을 HTTP Request, 서버의 응답을 HTTP Response라고 합니다.

 

 

5. 200 <= HTTP status code <= 299 : true, 그 외 false
6. CRUD는 Create, Read, Update, Delete의 제일 앞 문자를 하나씩 따와 만든 줄임말로 각각은 아래처럼 매칭이 됩니다. C : Create(생성) - POST, R : Read(조회) - GET, U : Update(수정) - PUT, D : Delete(삭제) - DELETE
7. PUT : 데이터의 전체를 바꿀 때 사용
8. PATCH: 데이터의 일부만 바꿀 때 사용
9. 예를 들어, PUT 으로 넘겨준 객체가 name 만 가지고 있다면, email 은 null 로 바뀌지만, PATCH 로 넘겨주면 name 이 변경되고, email 은 기존의 데이터를 유지합니다. 보통 openAPI 에서는 PUT 을 지원하지 않습니다. 주로 API 를 직접 만들 때 주로 PUT 이 사용됩니다.
10. openAPI 에 DELETE 요청을 보내도 실제 서버에 있는 데이터가 삭제되지는 않습니다.
11. HTTP 204: 요청이 성공했으나, 클라이언트가 현재 페이지에서 벗어나지 않아도 된다는 것을 나타냅니다.

728x90

❏ Axios 사용법

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

// POST: 새로운 자원 생성
axios.post(url, data 객체)

// GET: 자원을 요청
axios.get(url)

// PUT: 자원을 갱신
axios.put(url, data 객체)

// DELETE: 자원을 삭제
axios.delete(url)

 

// POST
function axiosPost() {
  const token = document.getElementById("token");
  const data =  { "email": "eve.holt@reqres.in", "password": "cityslicka" };
  const URL = "https://reqres.in/api/login";

  axios.post(URL, data)
    .then(res => {
        token.innerHTML = res.data.token
    })
}
export default axiosPost;

// GET
function axiosGet() {
  const name = document.getElementById("name");
  const email = document.getElementById("email");

  const URL = "https://reqres.in/api/users/2";
  axios.get(URL)
    .then(res => {
        const {data} = res.data;
        const emailData = data.email;
        const nameData = `${data.first_name} ${data.last_name}`
        name.innerHTML = nameData;
        email.innerHTML = emailData;
    })
}
export default axiosGet;

// PUT
function axiosPut() {
  const name = document.getElementById("name");
  const emailEl = document.getElementById("email");
  const updateDate = document.getElementById("update_date");

  const data = { "first_name": "White", "last_name": "Rabbit" , "email": "alice@elice.io" };
  const URL = "https://reqres.in/api/users/2";

  axios.put(URL, data)
    .then(res => {
        const {email, first_name, last_name, updatedAt} = res.data;
        emailEl.innerHTML = email;
        name.innerHTML = `${first_name} ${last_name}`
        updateDate.innerHTML = updatedAt
    })
}
export default axiosPut;

// DELETE
function axiosDelete() {
  const statusEl = document.getElementById("status");
  const URL = "https://reqres.in/api/users/2";

  axios.delete(URL)
    .then(res => {
        const {status} = res;
        statusEl.innerHTML = status;
    })
}
export default axiosDelete;