WIL 항해 5주차

4주차

프론트끼리의 협업을 했던 한 주였고

금요일부터는 새로운 팀 구성과 함께

과제를 진행하게 되었다.

먼저 프론트협업을 했을때 열정 넘치는

팀원 분들을 만나 거의 밤새듯이 매일

새벽까지 과제하고 얘기하고 했는데

초반에는 마음가짐부터

첫 협업이니 팀에 녹아들어 늦게까지 하는 팀원이

있으면 같이하고 팀원에게 문제가 발생하면

같이 해결하고 좋았지만

개인이 하던 페이스를 잃게되니까원래 하던 집중도도 안나오고체력은 더 쓰고 해서효율이 안나오는 느낌이었다.

따라서 팀에 녹아드는 것도 중요하지만

개인에게 맞는 페이스도 생각했어야 했고

이 양쪽에서의 밸런스를 잘 맞추고

팀에서도 그 밸런스를 맞출 수 있도록 도와주어야 한다고 생각한다.

특히나 이번에는 조금 더 잘하시는 분이 계신데그 사람을 중심으로 해서팀원들이 맞춰서 해나가는 느낌이었는데그 안에서 팀원분과 나는끌려가는 느낌이어서 제대로 성능을 발휘하지 못했다고 생각한다.

물론 그에 따른 결과물이 아쉽기도 했다.이러한 아쉬움을 발판 삼아 지금과 앞으로는팀에서에 종합적인 의견을 중심으로얘기하고 싶은 사항들을 얘기하고양해를 구할 때도 확실하게 말을 하고다른 사람의 의견에도 귀 기울이는 것에조금 더 집중해보려고 한다.

지금은 백엔드 분들과 프론트 분들과 함께프로젝트를 진행중인데이렇게 맞춰보는 것도 처음이기때문에어떻게 업무를 나누어서 함께 프로젝트를 진행하는지에 대해모두가 걱정했던 가운데 프로젝트 주제, api 설계 등정할 것을 정하면서 서로 진행상황 소통하고개인적인 얘기도 하면서 즐겁게 프로젝트 중이다.

이렇게 잘맞고 좋은 팀을 만난만큼 이번

프로젝트 안에서의 내가 맡은 업무는 확실하게 수행하고 싶다.

 

---

 

이번 주 핵심 내용  Axios

 

Axios란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 쓰는 편이라고 보면 된다.

 

Axios특징

운영 환경에 따라 브라우저의 XMLHttpReques객체(서버와 상호작용 할 때 사용하며 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있음) 또는 Node.js의 http api 사용

Promise(ES6) API 사용

요청과 응답 데이터의 변형

HTTP 요청 취소

HTTP 요청과 응답을 JSON 형태로 자동 변경

 

Axios 문법구성

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});

 

Axios 문법구성

- method: 요청방식. (default = get)

- url : 서버 주소

- headers : 요청 헤더

- data : 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터

- parans : URL 파라미터 (?key = value로 요청하는 url get 방식을 객체로 표현한 것)

- responseType : 서버가 응답해주는 데이터의 타입 지정 (arraybuffer, document, json, text, stream, blob)

- responseEncoding : 디코딩(부호화/ 암호화 해제) 응답에 사용하기 위한 인코딩(정보를 부호화/ 암호화) (utf-8)

- withCredentials : cross-site access-control 요청을 허용 유무. 이를 true로 하면 cross-origin으로 쿠키값을 전달 할 수 있다.  

 

Axios 문법구성

 axios를 통해 요청을 서버에게 보내면, 서버에서 처리를 하고 다시 데이터를 클라이언트에 응답 하게 된다.

이를 .then으로 함수인자로 (response)로 받아 객체에 담긴 데이터가 바로 응답 데이터이다.

axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
})
.then(function(response) {
  console.log(response.data)
  console.log(response.status)
  console.log(response.statusText)
  console.log(response.headers)
  console.log(response.config)
})

response.data: {}, // 서버가 제공한 응답(데이터)
 
response.status: 200, // `status`는 서버 응답의 HTTP 상태 코드
 
response.statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지
 
response.headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공
 
response.config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)
 
response.request: {}
// `request`는 응답을 생성한 요청
// 브라우저: XMLHttpRequest 인스턴스
// Node.js: ClientRequest 인스턴스(리디렉션)

 

Axios 단축 메소드

 

axios를 편리하게 사용하기 위해 모든 요청메소드는 aliases가 제공된다.

위 처럼 객체 옵션을 이것저것 주면 가독성리 떨어지고 너저분하니

함수형으로 재구성하여 나눠논 것으로 이해하면 된다.

axios의 대표적인 Requestmethod 4가지

GET : axios.get(url[, config])

POST : axios.post(url, data[, config])

PUT : axios.put(url data[, config])

DELETE : axios.delete(url[, config])

axios.request(config)
 
axios.get(url[, config])
 
axios.delete(url[, config])
 
axios.head(url[, config])
 
axios.options(url[, config])
 
axios.post(url[, data[, config]])
 
axios.put(url[, data[, config]])
 
axios.patch(url[, data[, config]])

 

더욱 자세히 알아보려면 이 분 포스팅을 참고바랍니다..!

AXIOS에 대한 내용 출처 : [https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9]