[Vue.js] Today I Learned - 공통 환경 설정

API 설정 공통화

API 호출 시 반복되는 요청 URL을 공통화 시켜 코드를 간결하게 할 수 있고, 설정을 관리하기 용이하다.

구현 방법

import axios from 'axios';
// axios 설정
const instance = axios.create({
  baseURL: 'http://localhost:3000/',
});

function registerUser(userData) {
  // const url = 'http://localhost:3000/signup';
  // return axios.post(url, userData);
  // 설정된 axios 객체를 이용하여 API 호출
  return instance.post('signup', userData);
}

export { registerUser };

.env 파일을 이용한 환경변수 사용

.env 파일을 이용하여 정의된 환경변수를 사용하여 간결하게 코딩할 수 있다. 이전 Vue CLI 2.x 버전에서는 Webpack의 DefinePlugin을 이용하여 환경변수를 사용했지만, Vue CLI 3.x 버전부터는 환경변수 명 앞에 VUE_APP_을 붙이면 자동으로 환경변수를 인식하여 쉽게 사용 가능하다.

구현 방법

1. 프로젝트 root(/) 경로에 .env 파일 생성

VUE_APP_API_URL=http://localhost:3000/

2. 환경 변수를 사용할 곳에서 다음과 같은 방법으로 호출

import axios from 'axios';

const instance = axios.create({
  // 환경 변수 사용
  baseURL: process.env.VUE_APP_API_URL,
});

function registerUser(userData) {
  return instance.post('signup', userData);
}

export { registerUser };

.env 파일의 실무 환경 구성 방법

프로젝트 개발 시 각 사용 환경에 따라 API 호출 URL이 다르게 설정되어 있어야 한다. 왜냐하면 실제 운영 시 사용할 URL 정보를 가지고 개발을 진행하면 테스트의 어려움과 데이터 관리에 어려움이 있기 때문이다.

따라서 .env 파일을 각 사용 환경에 따라 생성, 관리를 할 수 있다.

• .env: 기본 환경 설정 파일로 .env.development 나 .env.production이 없을 경우 사용된다.
• .env.development: 개발 환경에서 사용할 설정 파일. 프로젝트 빌드 이전에 사용되는 파일
• .env.production: 운영 환경에서 사용할 설정 파일. 프로젝트 빌드 후 사용되는 파일

구현 방법

공통적으로 프로젝트 전체의 환경 설정을 관리할 파일이기 때문에 대부분의 환경 변수값이 동일하며 API 호출 URL이나 개발과 운영환경에서 다르게 구현되어야 할 부분을 제외하면 파일명 이외에는 동일하다.