Vue.js 사용하기 -6( 화면 구성하기-axios & alert )

Axios !! 

보통 웹페이지를 개발하는 사람들은 ajax 통신을 많이 사용한다. 다른곳에서 데이터를 가져와야하는 통신이 필요할때는 옛날부터 ajax 가 기본이였다. 

 Jquery 를 사용할떈 Jquery 를 이용하여 간편하게 ajax 통신을 사용했다. 하지만 일단 vue.js 를 사용하면서 jquery 를 사용할수 있음에도 불구하고 안사용하기로 마음 먹었기 때문에 뭔가 대체할만한것을 찾기 시작했고 아주 빠르게 Axios 란 놈을 찾을수 있었다. 

일단 axios 를 사용하기위에선 npm 플러그인 설치가 필요하다. 간단하다

npm install --save axios

바로 설치가 가능하고 사용해주면 된다. 사용하는 vue 영역에서는 꼭 import 를 해놓고 사용한다.

import axios from "axios"

사용전에 주의할점이 하나 있다. 웹개발하면서 항상 걸림돌이 되는것중 하나인 호환성인다. 

아래 버전들만 지원이 가능하다 정말 하위 호환이 필요하다면 그냥 jquery 를 넣어서 무겁더라도 사용 하거나 jquery lite 가 있다고 알고있으니 그걸 사용해도 된다. 

그외에 다른 별다른 이슈사항이 없다면 그대로 사용해도 된다. 

사용법은 아주아주 단순하고 간단 명료하다. post 통신을 위해서는 .post 를 선언해주고 get 방식을 이용하기 위해선 .get 을 선언해주면 된다. 

axios 통신시 일단 통신에 필요한 데이터 세팅이 필요하다. 아래 캡쳐화면을 참고하면되는데  데이터는 선언된 괄호안에 아래와같이 키-값 구조로 넣으면 되고 javascript 에서 지원하는 모든 구조형식으로 전달이 가능하다. 

응답처리는 더 쉽다. .then 으로 연결해준다음 response(변수) 로 받아주면 바로 사용이 가능하다. 보통 axios 는 응답을 받을 경우 response 안에 data 형식으로 받아 주기 때문에 response에서 값을 꺼내준다음 처리할 필요가 있다. 

 통신시 에러가 생길경우는 .catch 를 붙여주면 된다. 이경우는 function 으로 error 를 명시 해줘야 정상 동작한다.  axios 사용시 특이한점은 json 형태의 값을 주고 받을시에 숫자형은 자동을 소수점을 붙이는 경우가 발생한다. 왜 그렇게 해놓은지 모르겠지만 소수점을 사용해야만 할때는 유용 하였다.  하지만 api 에서 받을때 멋모르고 숫자형태를 단순 String으로 변환 하려고 할때 int 가 아니다 보니 에러가 발생 했고, 반대로 화면으로 보냈을때 내가 의도하지 않은 숫자 포맷이 생겨서 그부분이 좀 불편했다.  그래서 임시 방편으로 데이터를 전달할때는(JS 내에서) 변수+"",  응답받을때는 응답주는곳에서 숫자를 문자로 변경해서 보내는 작업을 추가해주었다. 그래도 일단 axios 를 쓸거 같다. 확인해본바로는 현재 까지 github 내에서 vue 와 관련된 프로젝트중에 가장 좋은 평가를 받고 있으며 실제로 사용이 쉽다는게 좋다. 

axios.post(this.mainUrl+"/test/getUser", {
  id: this.id,
  name: this.name
}).then((response) => {
  var data = response.data;
  this.body_data = data.detail;
  this.game_paginationData.total = data.cnt;
  if (this.body_data == null ) {
    let Alert = Vue.extend(BasicAlert);
    new Alert({el: document.createElement("div"), data: {comment: "조회된 데이터가 없습니다."}});
  }
})
.catch(function (error) {
      console.log(error);
});

}

<template>

  <div class="basic_alert_body">
    {{comment}}
  </div>

  <div>
    <button name="확인" @onClick="close"></button>
  </div>


</template>
<script>
  export default {
    components: {
      BasicButton
    },
    name: 'BasicAlert',
    created() {
    },
    beforeMount() {
      setTimeout(() => {
        document.body.appendChild(this.$el)
      }, 150);
    },
    mounted() {

    },
    data() {
      return {
        comment: "",
        timeout: 0
      }
    },
    methods: {
      close() {
        this.$destroy()
        this.$el.remove()

      }
    }
  }</script>

axios 를 사용하다보니 검색이 안되거나 에러가 날경우 팝업창혹은 경고창을 띄울 필요가 생겼다. 컴포넌트 를 만들어서 호출하면 될거 같은데 생각보다 막연했다 ( 단순 구글링으로 중구난방으로 시작하다보니 당연한 결과... ) 

 같은팀 동료에게 도움을 요청 했고 alert 이나 modal 창을 사용할수 있는 방법에 대한 도움을 얻었다. 

일단 컴포넌트를 제작한다. 아래는 단순한 alert 을 구현한것이다. 지정한 코멘트와 닫기 버튼 정도이다. 일단 호출부분부터 보면 위에서 Alert 이라는 vue 객체를 extend 하고 그다음에 생성을 한다. 이때 생성을 하는부분에서 data 를 넣어주고 element 를 생성하는 옵션을 같이 컴포넌트로 넘겨준다. 

호출이 될 경우 이제 위에 만들어진 vue 컴포넌트가 호출되는데 현재 화면의 child 형태로 창이 열리게 되고 기본적으로 부모창은 회색으로 처리가 된다. 회색 영역을 누르면 자동을 창이 닫히는거 같다. 

comment 라는 키로 받은 데이터는 바로 {{comment}} 에 바인딩이 되고 화면에 노출된다. 여기서 중요한건 닫기 버튼 같다. 

버튼 확인을 누르면 close 라는 녀석이 호출 되는데 내용은 간단하지만 이해하려면 vue.js 에서 사용하는 전역변수라는 개념을 알아야 한다. 

$destroy 를 할경우 이벤트나 속성 값들이 this 에 속한 모든것들이 제거가된다. 

$el.remove 를 수행하면 element 가 삭제되면서 alert 창이 사라진다. 

라고 이해하고 있다. 아직 깊숙히 vue.js 를 전반적으로 파악한게 아니라 이정도 이해하고 사용중이다. 

위에 alert 을 응용하면 modal 창도 충분히 컴포넌트 제작이 가능할거 같다.