/
API를 모듈로 분리하여 효과적으로 관리할 수 있는 설계를 찾다가, 적합한 방식을 발견하여 아래의 블로그 글을 번역하였습니다. 개발하는데 작은 도움이 되었으면 합니다.
번역) https://www.telerik.com/blogs/api-factories-vue-nuxt
/
대규모 프로젝트에서 어떻게 구조를 형성하고 유지할지에 대한 고민이 필요하다.
그중 하나가 API Factories(API modules라고 불리기도 한다) 이고, 자세히 파헤쳐보자.
당신의 어플리케이션에서 특별히 따르고있는 API 호출 방식이 있는가?
만약 없다면 이 글이 필수적이다! 이러한 구조는 당신의 팀과 모든 동료들에게 큰 이익을 준다고 확신하기 때문이다.
어떻게? API Factories는 당신의 codebase를 더욱 이해하기 쉽게 만들고, 모든이들의 생산성을 향상 시킬 것이다.
this.$api.myModule.myEndpoint()
와 같이 사용할 수 있다그럼 지금부터 API Factories가 우리 앱에서 동작되는걸 알아보자!
/
$ npm install --save axios vue-axios
// src/main.js
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
⚡️NOTE: Vue.js에서는 this.axios or this.http로 접근할 수 있다
$ npm install @nuxtjs/axios
// nuxt.config.js
module.exports = {
modules: ['@nuxtjs/axios']
}
⚡️NOTE: Nuxt.js에서는 this.$axios로 접근할 수 있다
/
API module을 모두 담을 수 있는, api 폴더를 생성하자
⚡️NOTE: Vue라면 src폴더 안에 생성되어야 하고, Nuxt라면 root에 생성하자
각 module은 주어진 특성에 맞게 endpoint와 연관지어 지고, 아래는 auth module의 모습이다
// api/auth.js
export default axios => ({
forgotPassword () {
return axios.post('/auth/password/forgot', { email })
},
login (email, password) {
return axios.post('/auth/login', { email, password })
},
...
})
여기서 기억할 중요한 점은 axios instance가 모든 module에 전달되었다는 것이다.
/
API module을 더 좋게 사용할 수 있는 방법에 대해 논의해보자
첫째로는 api.js를 src폴더 안에 생성하고 모든 API module을 import 하자
각각의 Factories에 Axios instance를 전달하기 위해 Vue도 import 하자
// src/api.js
import Vue from 'vue'
import Auth from '@/api/auth'
import Blog from '@/api/blog'
import Settings from '@/api/settings'
// API Factories를 초기 설정하다
const factories = {
auth: Auth(Vue.axios),
blog: Blog(Vue.axios),
settings: Settings(Vue.axios),
}
// API Factories를 App에서 this.$api로 사용할 수 있도록 하자
// 참고: https://vuejs.org/v2/cookbook/adding-instance-properties.html
Vue.$api = factories
마침내 api.js를 main.js에 import 할 수 있다.
// src/main.js
import Vue from 'vue'
import axio from 'axios'
import VueAxios from 'vue-axios'
import @/api.js
Vue.use(VueAxios. axios)
만약 Nuxt의 injection이 익숙하지 않다면 공식문서 를 참고하면 좋다.
간단히 말하자면, 결합된 injection은 component에서 함수로 쓰일 수 있을 뿐 아니라, Vuex module에서도 쓰일 수 있다
동작하기 위해 plugin을 생성하자
// plugins/api.js
import Auth from '@/api/auth'
import Blog from '@/api/blog'
import Settings from '@/api/settings'
export default (context, inject) => {
// API Factories를 초기설정하자
const factories = {
auth: Auth(context.$axios),
blog: Blog(context.$axios),
settings: Settings(context.$axios)
}
// $api를 Inject하자
inject('api', factories)
}
이제 plugin을 등록해보자
// nuxt.config.js
module.exports = {
plugins: [{ src: '@/plugins/api.js' }]
}
/
이제 response의 log를 사용하는 방법을 알아보자
<template>
...
</template>
<script>
export default {
methods: {
async onLogin () {
const response = await this.$api.auth.login({ email, password })
}
}
}
</script>
끝으로 이러한 구조가 당신의 프로젝트에 기여되길 바란다. 🎉
*참고: Repository pattern관련하여 잘 정리된 블로그