js) fatch , ajax 에 관해

-ajax

Asynchronous JavaScript And XML의 약자이며,
자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신입
XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수있다

 

-axios

axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리
비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다

 

-fatch

ES6부터 들어온 JavaScript 내장 라이브러리.
Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고,
내장 라이브러리라는 장점으로 상당히 편리

JSON으로 변환해주는 과정 필요

 

=> 결국 다 같은 기능을 한다 !

 

 

이런 이해도가 없을때 우리는 fetch로 데이터를 가져오고 axios로 api를 연결해주면 되겠다 !

라는 말도 안되는 생각을 갖고 개발을 시작했다 ...

지금 생각하면 대체 무슨 자신감이였는지 .....

 

그래서 이런 말도 안되는 코드를 짜고 이 방식을 그대로 이용해서 모든 로직을 구현했었다 ..

그래서 계속해서 모든 js에서 에러가 났었고 우린 이걸 고친다고 말도 안되는 코드들을 덧붙였다 ....

결국 나중엔 수정기능이 아예 작동이 안됬고 다른 팀원들께 도움을 받았었다

이때 모든것이 잘못된 걸 알았다 ...

이렇게 우리의 이틀이 날라갔다.................

 

 fetch("http://localhost:8000/api/posts", config)
    .then((response) => response.json())
    .then((data) => {
      let rows = data;
      $("#cardLists").empty();
      for (let i = rows.length - 1; i >= 0; i--) {
        let post_id = rows[i]["post_id"];
        let user_id = rows[i]["user_id"];
        let title = rows[i]["title"];
        let content = rows[i]["content"];
        let category = rows[i]["category"];
        let pimage_url = rows[i]["pimage_url"];
        let createdAt = rows[i]["createdAt"];

이렇게 코드를 짜고 진행했는데

axios를 사용하면 더 간단하게 구현할 수 있었던 것이다 ... !

그걸 프로젝트 제출 5시간전에 알았다

이미 팀원 모두가 못 잔 상태였기 때문에 우린 ... 수정할 수 없었다 ....

그게 지금 제일 아쉬운 부분이다