[번역]Vue 프로젝트를 위한 API Factories 설계

Bewell·2022년 5월 25일

/
API를 모듈로 분리하여 효과적으로 관리할 수 있는 설계를 찾다가, 적합한 방식을 발견하여 아래의 블로그 글을 번역하였습니다. 개발하는데 작은 도움이 되었으면 합니다.
번역) https://www.telerik.com/blogs/api-factories-vue-nuxt

대규모 프로젝트에서 어떻게 구조를 형성하고 유지할지에 대한 고민이 필요하다.
그중 하나가 API Factories(API modules라고 불리기도 한다) 이고, 자세히 파헤쳐보자.

당신의 어플리케이션에서 특별히 따르고있는 API 호출 방식이 있는가?
만약 없다면 이 글이 필수적이다! 이러한 구조는 당신의 팀과 모든 동료들에게 큰 이익을 준다고 확신하기 때문이다.

어떻게? API Factories는 당신의 codebase를 더욱 이해하기 쉽게 만들고, 모든이들의 생산성을 향상 시킬 것이다.

왜 API Factories를 당신의 프로젝트에 써야하는가?

모든 endpoint를 하나 혹은 다수의 module로 모을 수 있다. 당신의 프로젝트 곳곳에 흩어져있는게 아니기 때문에 모든사람이 빠르게 인지할 수 있다.
endpoint를 바꿀 경우, 한곳만 업데이트 해주면 된다. 당신에 코드에 확신이 생기고, 오류로부터 보호해준다.
백엔드 api와 프론트 API Factories를 나란이 비교하여 사용되지 않는 endpoint를 빠르게 인지할 수 있으며 사용하지 않은 코드를 쉽게 제거하거나, 유지할 수 있다.
Vue instance의 신규 property로 정의하여 API Factories를 프로젝트 어디서든 사용하게 만들 수 있다. this.$api.myModule.myEndpoint()와 같이 사용할 수 있다

그럼 지금부터 API Factories가 우리 앱에서 동작되는걸 알아보자!

1. Axios 설치

Vue.js

$ 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로 접근할 수 있다

Nuxt.js

$ npm install @nuxtjs/axios

// nuxt.config.js

module.exports = {
	modules: ['@nuxtjs/axios']
}

⚡️NOTE: Nuxt.js에서는 this.$axios로 접근할 수 있다

2.모든 endpoint를 하나 혹은 다수의 module로 모을 수 있다.

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에 전달되었다는 것이다.

3.당신의 App 어디서든 API Factories를 사용할 수 있게 해보자.

API module을 더 좋게 사용할 수 있는 방법에 대해 논의해보자

vue.js

첫째로는 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.js

만약 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' }]
}

4. API Factories를 어떻게 사용할지 알아보자

이제 response의 log를 사용하는 방법을 알아보자

<template>
	...
</template>
<script>
export default {
	methods: {
    	async onLogin () {
        	const response = await this.$api.auth.login({ email, password })
        }
    }
}
</script>