[개발자의품격][부트캠프][1기][22차시] Vue.js #11 | mixin, axios, 전역 처리

mixin

mixin을 import 한 컴포넌트는 mixin 자바스크립트 파일의 export default를 모두 사용할 수 있다. mixin과 컴포넌트의 동일 시점에서의 실행 순서는 mixin이 우선이다. 아래 코드를 작성하여 서버를 실행하면 콘솔 창에 [그림 1]과 같은 결과가 출력된다.

 

mixin

src 폴더에서 mixins 폴더를 생성하고 mixin 파일로서 axios.js를 생성한다.

// src/mixins/axios.js
export default {
  created() {},
  mounted() {
    console.log('mixin에서 출력')
  },
  unmounted() {},
  methods: {}
}

 

컴포넌트

MixinView.vue 파일에 axios.js를 import 한다.

// src/views/5_advanced/MixinView.vue
<script>
import Axios from '@/mixins/axios.js'
export default {
  mixins: [Axios],
  ...
  mounted() {
    console.log('컴포넌트에서 출력')
  },

 

[그림 1] mixin 결과, 실행 순서 유의

 

mixin

함수도 mixin 된다. mixins에 printA() 함수를 선언한다.

// src/mixins/axios.js
export default {
  ...
  methods: {
    printA() {
      console.log('A')
    }

 

컴포넌트

컴포넌트의 마운트 시점에 mixin의 printA() 함수를 호출하게 한다.

// src/views/5_advanced/MixinView.vue
<script>
import Axios from '@/mixins/axios.js'
export default {
  mixins: [Axios],
  ...
  mounted() {
    console.log('컴포넌트에서 출력')
    this.printA() // 컴포넌트가 아닌 mixin에 선언한 printA() 함수 호출
  },
  ...
  methods: {
    printB() {
      console.log('B')
    }

 

[그림 2] 컴포넌트에 mixin된 printA() 함수

 

---

 

Axios를 이용한 서버통신

실무에서 서버와 통신을 위해 Fetch API보다 Axios 모듈을 주로 사용한다. Axios는 프론트엔드에서 가장 인기 있는 모듈로서 서버와 데이터 통신할 때 CRUD를 간편하게 할 수 있다.

https://axios-http.com/kr/docs/intro

 

Axios 설치

npm install axios

※ package-lock.json에서 설치된 여부를 확인할 수 있다.

 

mixin

mixin에 axios를 import 하고 axios 코드를 작성한다.

// src/mixins/axios.js
import axios from 'axios'

export default {
  ...
  methods: {
    // $를 붙이면 mixin 함수라는 것을 약속한다.
    async $get(url) {
      return (
        await axios.get(url).catch((e) => {
          console.log(e)
        })
      ).data
    }
  }

 

컴포넌트

서버로부터 데이터를 가져오는 getCustomers() 함수를 생성한다. 이때 mixin에서 선언한 get() 함수를 이용한다. axios를 mixin에 구현하는 이유는 서버와 통신하지 않는 화면이 거의 없기 때문이다. mixin으로 만들어두면 각각의 컴포넌트에 매번 구현하지 않아도 import 해서 쉽게 연동할 수 있다.

// src/views/5_advanced/MixinView.vue
export default {
  ...
  mounted() {
    ...
    this.getCustomers() // getCustomers() 호출
  },
  ...
  methods: {
    // 서버로 부터 데이터를 가져오는 getCustomers() 생성
    async getCustomers() {
      const customers = await this.$get('http://localhost:3000/customers')
      console.log(customers)
    }
  }

 

[그림 3] axios로 조회한 서버의 데이터가 mixin되어 콘솔 창에 출력되었다.

 

※ 컴포넌트 전체 코드(MixinView.vue)

<template>
  <div></div>
</template>
<script>
import Axios from '@/mixins/axios.js'
export default {
  mixins: [Axios],
  components: {},
  data() {
    return {
      sampleData: ''
    }
  },
  setup() {},
  created() {},
  mounted() {
    this.getCustomers()
  },
  unmounted() {},
  methods: {
    async getCustomers() {
      const customers = await this.$get('http://localhost:3000/customers')
      console.log(customers)
    }
  }
}
</script>

 

※ mixin 전체 코드(axios.vue)

// src/mixins/axios.js
import axios from 'axios'

export default {
  created() {},
  mounted() {
    // console.log('mixin에서 출력')
  },
  unmounted() {},
  methods: {
    async $get(url) {
      return (
        await axios.get(url).catch((e) => {
          console.log(e)
        })
      ).data
    }
  }
}

 

---

 

mixin 전역 처리

mixin

mixins폴더에 index.js(전역으로 사용할 mixin 자바스크립트 파일 명은 보통 index라고 작명)를 생성한다. axios의 get 함수를 이용해 조회 기능을 적용한다.

// src/mixins/index.js
import axios from 'axios'

export default {
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    async $get(url) {
      return (
        await axios.get(url).catch((e) => {
          console.log(e)
        })
      ).data
    }
  }
}

 

main.js

main.js에 mixin 처리하면 전역에서 사용할 수 있고, [그림 3]과 동일한 결과가 출력된다.

// src/main.js
...
import mixin from './mixins' // mixins 폴더 내에 있는 모든 js파일을 가져온다.
...
const app = createApp(App)
...
app.mixin(mixin)
...

 

mixin

mixins폴더의 index.js에 axios의 post, put, delete 함수도 추가해 본다. 이제 get, post, put, delete 함수는 전역으로 설정되었기 때문에 모든 컴포넌트에서 호출 가능하다. 전역 변수에는 사용빈도가 높은 함수(거의 모든 컴포넌트에서 호출하는 함수)만 넣도록 해야 한다. 사용빈도가 낮다면 import 방식을 사용하는 것이 좋다.

// src/mixins/index.js
import axios from 'axios'

export default {
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    async $get(url) {
      return (
        await axios.get(url).catch((e) => {
          console.log(e)
        })
      ).data
    },
    async $post(url, data) {
      return (
        await axios.post(url, data).catch((e) => {
          console.log(e)
        })
      ).data
    },
    async $put(url, data) {
      return (
        await axios.put(url, data).catch((e) => {
          console.log(e)
        })
      ).data
    },
    async $delete(url) {
      return (
        await axios.delete(url).catch((e) => {
          console.log(e)
        })
      ).data
    }
  }
}

 

※ mixin하게 되면 mixin의 함수가 컴포넌트의 함수 위 놓여 처리된다. 즉 먼저 처리되는 것이다. 만약 mixin의 함수와 컴포넌트의 함수명이 동일하다면 컴포넌트의 함수만 호출된다. 함수명이 동일한 상황이 발생되지 않도록 하기 위해 mixin 함수의 경우 prefix로 '$'를 붙인다.