[Vue.js] Today I Learned - API 함수 모듈화

API 모듈화

데이터 성격에 따른 API 함수를 모듈화하여 코드를 효율성 있게 관리할 수 있다.

기능별 모듈화

기본 API 설정, 계정 관련, 학습 노트 관련 등 기능별로 모듈화를 하여 관리할 수 있다.

 

기본 API 설정

기본 Axios 사용 및 Axios 인스턴스를 생성하는 기능을 구현한 파일이다.

// src/api/index.js
// API 설정용 파일
import axios from 'axios';
import { setInterceptors } from './common/interceptors';

// 기본 엑시오스 초기화 함수
function createInstance() {
  return axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });
}

// 인증 정보를 저장, 사용하는 액시오스 초기화 함수
function createInstanceWithAuth(url) {
  const instance = axios.create({
    baseURL: `${process.env.VUE_APP_API_URL}${url}`,
  });
  return setInterceptors(instance);
}

// export 하여 모듈화 한 파일에서 해당 인스턴스를 사용할 수 있게 한다.
export const instance = createInstance();
export const posts = createInstanceWithAuth('posts');

계정 관련 API

로그인, 회원가입, 회원탈퇴 등 계정 관련한 기능을 구현한 파일이다.

// src/api/auth.js
// 로그인, 회원 가입, 회원 탈퇴 등
// 계정 동작과 관련된 API 함수 파일

// index.js에서 정의한 계정정보용 인스턴스 사용
import { instance } from './index';

// 회원가입 API
function registerUser(userData) {
  return instance.post('signup', userData);
}

// 로그인 API
function loginUser(userData) {
  return instance.post('login', userData);
}

export { registerUser, loginUser };

학습 노트 관련 API

학습 노트 조회, 등록, 삭제, 수정 등 학습 노트 관련한 기능을 구현한 파일이다.

// src/api/posts.js
// 학습 노트 조작과 관련된 CRUD API 함수 파일

// index.js에서 정의한 학습 노트 조작용 인스턴스 사용
import { posts } from './index';

// 학습 노트 데이터를 조회하는 API
function fetchPosts() {
  return posts.get('/');
}

// 학습 노트 데이터를 생성하는 API
function createPost(postData) {
  return posts.post('/', postData);
}
export { fetchPosts, createPost };

이외 파일 처리

API 함수들을 데이터 유형 및 기능에 따라 모듈화를 하였기 때문에 이전에 API 함수 import 구문을 해당 기능에 맞는 파일 경로로 수정해야 한다.