항해99-5주차 기록(주특기 숙련 -React)

 

*Axios

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

 

Axios의 특징

• 오래된 브라우저에서도 지원한다.(많은 브라우저에서 지원된다.)
• 라이브러리이기 때문에 설치가 필요하다. (비슷한 역할을 하는 fetch는 설치가 불필요하다.)
• data object를 포함한 속성을 사용한다.
• 자동으로 JSON 데이터 형식으로 변환된다.
• 요청을 취소할 수 있고 타임아웃을 걸 수 있다.(fetch에서는 불가능하다.)
• HTTP 요청을 가로챌 수 있다.(interceptors)

 

 

Axios 단축 메서드

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

위 처럼 객체 옵션을 이것저것 주면 가독성이 떨어지고 너저분하니, 함수형으로 재구성하여 나눠논 것으로 이해하면 된다.

axios의 Request method에는 대표적으로 다음과 같은 것들이 있다.

• GET : axios.get(url[, config])
• POST : axios.post(url, data[, config])
• PUT : axios.put(url, data[, config])
• DELETE : axios.delete(url[, config])

(구체적인 사용법이나, 경험에 대해서는 사용후에 추가하도록 하겠다.)

 

---

*한주 마무리.

 이번주 과제를 하면서 깨달은게 많다. 리덕스에 대한 이해가 제대로 이뤄지지 않아서 리덕스를 사용하지 않고 구현을 했다. 가장 큰 실수로는 navigate와 history를 혼용해서 썼다는 건데, 이제는 history를 사용하지 않아야 한다는 것을 정확히 숙지했다. 이번주에는 useState, useEffect 등의 훅에 대해서 복습하고, 기본적인 부분을 다루는데 시간을 많이 썼던 것 같다. 이번 주차를 진행하면서 여전히 느꼈던 부분은 강의나 자료등에서 사용하는 방식과 구조에서는 사용이 가능한데, 실제로 내 프로젝트에서 적용하는 것은 또 별개의 문제가 있다는 것을 느꼈다. 좀 더 많이 묻고, 다른 사람들의 코드를 보면서 배우는 시간을 가져야할 것 같은 느낌이 크게 들었다. 

새로 미니프로젝트를 위한 팀을 빌딩하면서, api와 와이어프레임 설정에 생각보다 많은 시간들을 들였고, 1주차때 했던 과정들이 약식처럼 너무 쉽게 넘어갔었다는 생각을 했다. 반나절 넘게 시간을 투자해서 api와 와이어프레임을 자세하게 설정하고, 동작내용을 자세히 적어두니 이후 개발이나 수정에 있어서 제대로 된 지침표가 되었다. 훌륭한 조원들을 만나서 많이 물어보고 성장하는 계기가 될 것 같다.