{"componentChunkName":"component---src-templates-blog-post-js","path":"/vue/vue-js-axios-및-rest-api-를-활용한-crud-구현/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"268f9230-46a3-5011-b601-90393bfec606","excerpt":"Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현 Aajx AJAX (Asynchronous Javascript And XML)\nAJAX란, Javascript의 라이브러리중 하나이며 Asynchronous Javascript And Xml…","html":"

\"Vue

\n

Aajx

\n

AJAX (Asynchronous Javascript And XML)\nAJAX란, Javascript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며, avaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 정리하자면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

\n

비동기 방식이란?

\n

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.

\n

비동기 방식의 장점

\n

페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.

\n

Axios

\n

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

\n

Axios 특징

\n\n

\"Synchronous

\n

Axios 설치 및 등록

\n
npm install axios
\n

\"Vue

\n

Axios 를 등록할 자바스크립트 파일을 하나 새로 생성합니다. 이름은 http/index.js 로 합니다.

\n

\"Vue

\n

axios 를 등록 하여 사용할 컴포넌트 views/Sample.vue 를 생성후 Axios (http) Instance 를 import 합니다.

\n

\"Vue

\n

REST API

\n

제공되는 sample api 를 활용하여 crud 를 개발 해보도록 하겠습니다. crud 란 create, read, update, delete 의 약어 이다.\nREST API 를 활용한 CRUD 개발에 앞서 HTTP 와 REST API 에 대해 알아 보도록 하낟.

\n

HTTP

\n

HTTP는 Hyper Text Transfer Protocol의 두문자어로, 인터넷에서 데이터를 주고받을 수 있는 프로토콜입니다.

\n

REST API

\n

REST의 정의

\n

“Representational State Transfer” 의 약자 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representation) 에 의한 상태 전달

\n\n

REST는 네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나이다.

\n

REST의 구체적인 개념

\n

HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.\n즉, REST는 자원 기반의 구조(ROA, Resource Oriented Architecture) 설계의 중심에 Resource가 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐를 의미한다.\n웹 사이트의 이미지, 텍스트, DB 내용 등의 모든 자원에 고유한 ID인 HTTP URI를 부여한다.

\n
CRUD Operation
\n\n

REST API 요청 및 응답 예시 와 HTTP 상태 설명

\n

views/Sample.vue 에서 입력,수정,삭제,조회 기능을 구할 것이다. 각 CRUD 예시는 아래와 같으며 HTTP 응답은 아래와 같이 구성 했다.

\n

HTTP 응답

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Status CodeDescription
200 (성공)서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다.
204 (콘텐츠 없음)서버가 요청을 성공적으로 처리했지만 콘텐츠를 제공하지 않는다.
400 (잘못된 요청)서버가 요청의 구문을 인식하지 못했다.
401 (권한 없음)이 요청은 인증이 필요하다. 서버는 로그인이 필요한 페이지에 대해 이 요청을 제공할 수 있다. 상태 코드 이름이 권한 없음(Unauthorized)으로 되어 있지만 실제 뜻은 인증 안됨(Unauthenticated)에 더 가깝다.
403 (Forbidden, 금지됨)서버가 요청을 거부하고 있다. 예를 들자면, 사용자가 리소스에 대한 필요 권한을 갖고 있지 않다. (401은 인증 실패, 403은 인가 실패라고 볼 수 있음)
410 (사라짐)서버는 요청한 리소스가 영구적으로 삭제되었을 때 이 응답을 표시한다. 404(찾을 수 없음) 코드와 비슷하며 이전에 있었지만 더 이상 존재하지 않는 리소스에 대해 404 대신 사용하기도 한다. 리소스가 영구적으로 이동된 경우 301을 사용하여 리소스의 새 위치를 지정해야 한다.
412 (사전조건 실패)서버가 요청자가 요청 시 부과한 사전조건을 만족하지 않는다.
\n

입력

\n

\"Vue

\n
URL: https://testrestapi.cafe24.com/api/sample/sample\nMethod: POST\n\nbody\n{\n  \"name\": \"name edit\",\n  \"description\": \"description edit\"\n}
\n

조회

\n

\"Vue

\n
URL: https://testrestapi.cafe24.com/api/sample/sample\nMethod: GET
\n

단건 조회

\n

\"Vue

\n
URL: https://testrestapi.cafe24.com/api/sample/sample/{id}\nMethod: GET
\n

단건 수정

\n

\"Vue

\n
URL: https://testrestapi.cafe24.com/api/sample/sample/{id}\nMethod: PUT\n\nbody\n{\n  \"name\": \"name edit\",\n  \"description\": \"description edit\"\n}
\n

단건 삭제

\n

\"Vue

\n
URL: https://testrestapi.cafe24.com/api/sample/sample/{id}\nMethod: DELETE
\n

Axios 를 활용한 REST API 연동

\n

적용 화면

\n

\"Vue

\n

코드

\n

아래 코드 로직은 아래와 같다.

\n
    \n
  1. http 를 import 한다.
    2. \n
  2. data 에 items, totalItems, totalPages 를 초기화 한다.
    3. \n
  3. created 에서 read() 함수를 호출 한다.
    4. \n
  4. read() 함수에서 axios 를 활용하여 sample api 를 GET 으로 호출 한다.
    5. \n
  5. 응답값 response 에서 items, totalItems, totalPages 를 각각 Vue data 변수에 대입해 준다.
    6. \n
\n
<template>\n  <div class=\"vuex\">\n    <h1>Sample 화면 입니다.</h1>\n    totalItems : {{ totalItems }} <br />\n    totalPages : {{ totalPages }} <br />\n    <ul>\n      <li v-for=\"(row, i) in items\" :key=\"'result_table_' + i\">{{ row }}</li>\n    </ul>\n  </div>\n</template>\n\n<script>\n  import http from \"../http\"\n\n  export default {\n    name: \"Vuex\",\n    components: {},\n    data() {\n      return {\n        items: [],\n        totalItems: 0,\n        totalPages: 0,\n      }\n    },\n    methods: {\n      delete(id) {\n        http\n          .delete(\"/api/sample/sample/\" + id)\n          .then(response => {\n            const { data } = response\n            console.log(data)\n          })\n          .catch(error => {\n            alert(error)\n          })\n      },\n      create(id, params) {\n        http\n          .post(\"/api/sample/sample/\", params)\n          .then(response => {\n            const { data } = response\n            console.log(data)\n          })\n          .catch(error => {\n            alert(error)\n          })\n      },\n      update(id, params) {\n        http\n          .put(\"/api/sample/sample/\" + id, {\n            params: params,\n          })\n          .then(response => {\n            const { data } = response\n            console.log(data)\n          })\n          .catch(error => {\n            alert(error)\n          })\n      },\n      read() {\n        let params = {}\n        http\n          .get(\"/api/sample/sample\", {\n            params: params,\n          })\n          .then(response => {\n            const { data } = response\n            console.log(data)\n            this.items = data.items\n            this.totalItems = data.totalItems\n            this.totalPages = data.totalPages\n          })\n          .catch(error => {\n            alert(error)\n          })\n      },\n    },\n    created() {\n      console.log(http)\n      this.read()\n    },\n  }\n</script>\n\n<style scoped>\n  .main {\n    border: solid 5px #000;\n    padding: 100px;\n  }\n</style>
","tableOfContents":"","wordCount":{"words":564},"fields":{"slug":"/vue/vue-js-axios-및-rest-api-를-활용한-crud-구현/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현","date":"2021년 4월 11일","dateISO":"2021-04-11T23:11:34.709Z","updatedISO":null,"category":"vue","description":"Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.","tags":["vue","javascript","framework","frontend","web","axios","ajax","crud"]}}},"pageContext":{"slug":"/vue/vue-js-axios-및-rest-api-를-활용한-crud-구현/","previous":{"fields":{"slug":"/vue/vue-js-vuex-저장소-store-속성-및-모듈화/"},"frontmatter":{"title":"Vue Js Vuex 저장소(store) 속성 및 모듈화","tags":["vue","javascript","framework","frontend","web","vuex","modules"]}},"next":{"fields":{"slug":"/etc/mac-에서-node-js-npm-업데이트-하기-2021/"},"frontmatter":{"title":"Mac 에서 Node.js, NPM 업데이트 하기 (2021)","tags":["javascript","nodejs","npm","update","mac"]}}}},"staticQueryHashes":["213619243","3262363727"]}