Axios는 브라우저 및 node.js를 위한 간단한 비동기 통신 HTTP 클라이언트입니다. Axios는 매우 확장 가능한 인터페이스를 가진 작은 패키지로 사용하기 쉬운 라이브러리를 제공합니다.
브라우저에 내장되어 있는 fetch 와 비교한 표입니다.
axios vs fetch
Axios
Fetch
요청 객체에 url이 있습니다.
요청 객체에 url이 없습니다.
써드파티 라이브러리로 설치가 필요합니다.
현대 브라우저에 기본 탑재되어 별도 설치가 필요 없습니다.
XSRF(크로사 사이트 위조) 보호 기능이 있습니다.
별도 보호 기능이 없습니다.
data 속성을 사용합니다.
body 속성을 사용합니다.
data는 object를 포함 합니다.
body는 문자열화 되어있습니다.
status가 200이고 statusText가 ‘OK’이면 성공 입니다.
응답객체가 ok 속성을 포함하면 성공 입니다.
자동으로 JSON데이터 형식으로 변환됩니다.
.json()메서드를 사용해야 합니다.
요청을 취소할 수 있고 타임아웃을 걸 수 있습니다.
해당 기능 존재 하지않습니다.
HTTP 요청을 가로챌수 있습니다.
기본적으로 제공하지 않습니다.
download진행에 대해 기본적인 지원을 합니다.
지원하지 않습니다.
많은 브라우저를 지원합니다.
Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원합니다.
axios가 좀더 많은 기능을 제공해 줍니다. 그래서 인지 가장 많이 사용합니다.
설치
yarn add axios
main.js 파일 수정
import Vue from 'vue'import Element from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import router from './router'import '@fortawesome/fontawesome-free/js/all.js'import axios from "axios";import App from './App.vue'Vue.prototype.$axios = axios;Vue.config.productionTip = falseVue.use(Element, { size: 'small', zIndex: 3000 });new Vue({router,render: h => h(App),}).$mount('#app')
예제 (행정코드)
법정 행정 코드를 다운로드 받아서 csv 파일을 만들고 이를 axios로 불러와서 행정동을 선택하는 예제를 만들어 보겠습니다.
화면 개발할때 아이콘을 자주 사용합니다. 아이콘을 사용하면 사용자가 해당 기능에 대한 이해가 수월해 지고 만든 화면의 완성도도 높아진다는 장점이 있습니다. 하지만 아이콘이 필요할때 마다 디자이너에게 요청하면 상당히 눈치가 보일것 같네요. 그렇다고 포토샵을 열어서 아이콘을 만들수도 없고 이때 사용할수 있는 유용한 웹 아이콘 폰트 라이브러리가 있습니다. Font Awesome 이라는 라이브러리 인데요 웹 아이콘 폰트 시장에서 가장 인기있는 라이브러리 입니다. 이번 시간에는 Vue.js 에서 Font Awesome 을 사용하는 방법에 대해서 알아 보겠습니다.
설치
Vue.js 프로젝트를 생성했다고 가정하고 font awesome 을 추가 설치 하는 방법입니다. yarn 또는 npm 둘중 하나의 방법을 이용해 라이브러리를 추가해 주세요
yarn을 이용한 설치
yarn 을 이용한 설치 방법입니다.
yarn add @fortawesome/fontawesome-free
npm 설치 방법
npm을 이용한 설치 방법 입니다.
npm install --save @fortawesome/fontawesome-free
main.js 수정
main.js 에 import '@fortawesome/fontawesome-free/js/all.js' 코드를 추가합니다.
vue 는 컨포넌트로 시작해서 컨포넌트로 끝난다라고 생각하시면 됩니다.. 이 컨포넌트에 대해서 잘알고 있으면 앞으로 문법들이나 예제들을 보는데 도움이 될것 같아 정리해 보겠습니다.
CBD(Component Based Development)
CBD 는 시스템을 일체형으로 구축하지 않고 레고 블록 부품 하나씩을 조립해서 큰 레고 블록을 만드는 것처럼 시스템의 구성요소들을 컨포넌트라는 작은 요소로 분리하여 하나씩 만들고 이를 조립해서 하나의 시스템을 만든다는 개념입니다.
아래 app 은 총 5개의 컨포넌트로 이루어져 있습니다.
팝업된 윈도우 자체가 컴포넌트 입니다. 이컨포넌트는 윈도우 제목과 창닫기 버튼이 있습니다. 창닫기 버튼을 클릭하면 창을 닫는 역할을 수행합니다.
메모 3,4,5를 가지고 있는 부모 컨포넌트 입니다. 2번 화면에서 데이터를 저장하고 메모리스트를 가지고 오는 로직이 들어 있지만 화면은 존재하지 않습니다.
메모 상단에 위치한 컨포넌트 입니다.
메모를 작성하는 컴포넌트 입니다. 제목과 내용을 입력받아 저장버튼을 클릭하면 입력받은 글을 부포 컨포넌트에게 전달합니다.
댓글 리스트 컨포넌트로 댓글 배열을 받아서 리스트업하고 수정이나 삭제 버튼을 클릭하면 부모에게 수정및 삭제 이벤트를 발생합니다
왜 이렇게 개발할까요 ?그냥 하나로 개발하면 되는데 왜 복잡하게 이렇게 개발하는 걸까요 ? 만든 컴포넌트를 재사용하기 위해서 입니다. 위에 5번 댓글 컨포넌트는 상당히 많이 사용되죠 ? 메모 app 에서도 사용될수 있지만 게시판의 글 보기 app 에도 사용될수 있습니다. 같은 기능을 계속 개발한다면 시간도 많이 들어가고 유지보수 하기도 힘들꺼에요 예를 들어 모든 댓글의 아이콘을 바꾼다고 가정하면 이걸 일일이 찾아서 모두 변경해 줘야 되죠 하지만 컴포넌트를 불러와서 사용했다면 하나만 수정하면 모든 app 들의 아이콘이 한번에 변경됩니다. 컨포넌트 기반으로 개발하면 불필요한 코딩을 줄일수 있고 유지 보수도 용이해 집니다. 그리고 실력있는 고참 개발자분들이 컨포넌트를 잘 만들어 놓았다면 화면을 개발하는 개발자는 해당 app 에서 사용하는 데이터 모델과 비지니스 프로세스만 잘 구현하고 실제 구현에 필요한 개발공수는 줄어듭니다. 그래서 cbd 기반으로 개발을 진행합니다.
예제
아래와 같은 tab 컴포넌트는 여러화면에서 사용하는 컴포넌트 입니다. 이름이 default 로 선택되어져 있는데 "나이"가 default 선택된 탭을 하나더 만든다고 가정하면 컴포넌트를 사용하지 않으면 중복된 코드들이 존재 할수 있습니다. 이렇게 공통으로 사용하는 탭 같은경우에는 컨포넌트로 만들어서 active 되는 탭만 props 로 지정해서 넘겨주고 props 값에 따라 default 선택 탭을 변경하면 됩니다.