23.02.26 개발일지

#asiox 

왠지모르지만 애니 명대사중 하나인 i am atomic 떠오르는 asiox.

axiox란 node.js와 브라우저를 위한 promise API를 활용하는 http 통신 라이브러리

비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다

#장점

• response timeout (fetch에는 없는 기능) 처리 방법이 존재
• HTTP 요청을 가로챌수 있음
• download진행에 대해 기본적인 지원을 함
• 자동으로 JSON데이터 형식으로 변환된다
• status가 200이고 statusText가 ‘OK’이면 성공이다
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 브라우저 호환성이 뛰어남
• XSRF(공격자가 GET 또는 POST 방식의 HTTP 요청을 통해 희생자 모르게 공격자의 의도된 행위를 수행하게 하여 특정 피해를 주는 형태) 보호를 해준다.

#단점

• 사용을 위해 모듈 설치 필요 (npm install axios)

결론 FE 와 BE와의 서로 통신을 위한 promise를 지원하는 node기반의 라이브러리다.

편리하고 기능이 많아서 사용하기 좋다.

 

#사용예제 

axios({
  method: 'post',
  url: 'https://localhost:3000/user',
  data: {
    userName: 'Cocoon',
    userId: 'co1234'
  }
}).then((response) => console.log(response));

 

#Ajax

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

#장점

• jQuery를 통해 쉽게 구현이 가능하다.
• error, success, complete의 상태를 통해 실행흐름을 쉽게 조절할 수 있다.

#단점

• jQuery를 사용해야한다.
• promise기반이 아니다.

몇년전만해도 많이 사용되었던 jQuery를 유지보수를 위해 사용할 일이 물론 있겟지만 왠만해서는 에이전시(si)같은 곳이 아닌이상 사용할 일이 많지는 않을꺼라고 생각이 된다.

 

#이번주 후기

이번주는 json을 이용해서 개인 프로젝트를 만드는 주간과 백엔드분들과의 소통을 위해 axios를 공부햇던 주간이 아닐까 싶다. 

근데 아직 axios가 어떻게 사용되는지는 대략 감이 오는데 어떻게 통신이 되는거지 라는 감은 아직 오지 않아서 해매고 있다.

거기다가 혼자할때는 혼자니까 부담감이 많이 없엇지만 이제는 같이 작업을 하니까 내가 못하면 다른 사람들이 더 작업을 해야하는 불상사가 나기때문에 조금 부담스러운 주간이 아닐까 생각이 된다.

내가 공부를 더 잘햇다면 내가 더 개발쪽 공부를 더했다면 이런 생각은 없었을까 라는 의문점에 아니 라는 답변이 나오지만 그레도 덜 부담스럽진 않을까 싶다.

기획은 다른 사람들이 많이 도와주고 디자인은 뭐 대강 피그마에서 스케치만 대강 햇었고 아래 첨부해야징 ㅋㅋ

ui짜는거는 내파트는 어렵지는 않았으나 결국 백엔드와의 소통이 ㅠㅠ 내일은 소통 열심히 해서 화요일까지는 대부분의 개발이 끝나있어야하는데 그레야 기능추가하면서 놀지 다음주도 신이 있다면 도와주시려나....

 

이거는 피그마 링크다잉 

https://www.figma.com/file/r7aTWyDpA5CjkKxq5qsoEp/%EC%BA%98%EB%A6%B0%EB%8D%94?node-id=0%3A1&t=PTPqUKaB9zz64M2E-0