[Vue.js] axios 설치

[Vue.js] axios 설치

2022. 3. 18. 19:39ㆍFront-End 작업실/Vue.js

728x90

🚀 Axios란?

JavaScript Application에서 Server 즉, Back End와의 통신을 하기 위한 HTTP Library가 바로 Axios라는 친구에요. 이 친구는 Vue.js에 종속된 것이 아니라 다른 JavaScript Application 즉, React.js 등에도 이용할 수 있는 것이에요.

Web이나, App을 개발하다 보면 우리는 Data를 저장하고, 불러오기 위해 Back End Server를 구축하고 이용해야 하는 것이에요. Axios는 Promise 기반의 JavaScript 비동기 처리 방식을 이용하는 것이에요. 그렇기 때문에 Request를 보낸 뒤 .then()을 이용해서 결과값을 받아 처리하는 형식으로 구성이 되어 있답니다.

axios.get('/api/data').then(res => { console.log(res.data) })

위 코드를 분석해 보면 /api/data 라는 BackEnd에서 구성된 URI를 통해 Data에 대한 Request를 보내 Data를 달라고 하는 것이에요. 불러온 Data는 `.then()`의 res라는 곳에 담아 처리하는 방식이랍니다.

그런 뒤 브라우저에 개발자 모드에서 Console 화면에 결과값을 보여주도록 만들어 준 Code인 것이에요.

github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js

github.com

🚀 Axios 설치

Axois를 설치하기 전에 먼저 Node.js를 설치해야 하는 것이에요. 그런 뒤 npm이나, yarn을 이용해서 Axios를 설치할 수 있답니다.

Axois는 아래 3가지 방법 중 하나를 이용해서 설치할 수 있는 것이에요.

● npm으로 설치를 하고자 할 경우
# npm install --save axios

● yarn을 이용해 설치를 하고자 할 경우
# yarn add axios

● 설치를 하지 않고, CDN 방식으로 이용하고자 할 경우
직접 Web Page Source Code에 <HEAD></HEAD> 영역에 입력

> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

🚀 Axios 이용하기

Axios는 RESTFul을 별칭으로 이용해 쉽게 통신할 수 있도록 해 주는 것이에요.

● Data 가져오기(불러오기) : axios.get(url[, config])
● Data 입력하기 : axios.post(url[, data[, config]])
● Data 수정하기 : axios.put || patch (url[, data, config]])
● Data 삭제하기 : axios.delete(url[, config])

🔽 Data 가져오기(불러오기) - Get

GET은 Server로 부터 Data를 가져올 때 이용하는 것이에요. Back End에서 정의한 URI Path를 통해 값을 불러올 때 이용하는 것이랍니다.

Axios 요청(Request)를 할 때, 매개 변수(Parameter) 정보 `(/api/todos/1)`를 같이 입력하여 정보를 얻어 올 수도 있는데, 위와 같은 방식은 목록 조회 시에 이용하는 방법이고, 이 방법은 상세 조회 시에 이용하는 방법인 것이에요.

또한, Axios 요청 시에 매개 변수 정보가 아니라 Method의 두번째 인자인 config 객체로 요청을 할 수도 있는 것이에요.

🔽 Data 입력하기 - Post

`/api/data` URI를 이용해서 값을 입력할 때 이용하는 것이에요. 값을 입력한다는 것은 어떤 정보를 DB에 저장하겠다는 의미인 것이에요.

Server의 Data List의 마지막에 작성한 내용을 추가 해 주는 것이랍니다.

🔽 Data 수정하기 - Patch / Put

RESTFul 하게 Web Service 구성 시 수정에 대한 HTTP Method는 Patch와 Put이 있는 것이에요. 이 둘의 차이점을 간략하게 설명하면 Put은 전체 Data를 수정 할 때 즉, 제목, 내용, 첨부파일 등이 있다고 가정을 했을 때, 이 모든 것이 수정이 일어난다면 사용하는 Method인 것이고, Patch는 제목, 내용, 첨부파일 중 하나 혹은 N개만 수정할 때 이용하는 Method인 것이에요.

여기서는 Patch를 통해 제목만 수정하는 것을 확인 해 볼 것이에요.

🔽 Data 삭제하기 - Delete

`/api/data/3` 즉, `/api/data`라고 정의된 API URI에 ID 값이 3이라는 의미인데, 이것을 삭제할 땐 아래와 같이 해 주면 되는 것이에요.

728x90

저작자표시 비영리 변경금지 (새창열림)

'Front-End 작업실 > Vue.js' 카테고리의 다른 글

[Vue.js] Template refs (0)	2022.03.19
[Vue.js] Props (0)	2022.03.19
[Vue.js] vue-router.esm-bundler.js?ec2d:72 [Vue Router warn]: No match found for location with path "/support/devInquryList" (0)	2022.03.15
[Vue.js] 기초 개념 정리 - Watch, Array, for문(반복문), if문 (0)	2022.03.08
[Vue.js] 기초 개념 정리 - data(), Data 처리 (0)	2022.03.08

Juny's ITLog

Juny's ITLog

태그

최근글

댓글

공지사항

아카이브

🚀 Axios란?

🚀 Axios 설치