[Vue2] 개발 기록 - .env 환경변수 분리, 비동기 에러처리
Vue 개발 중 공부내용을 기록하는 포스트 입니다.
1. 개요
프로젝트 진행 간 적용 기술에 대한 정리
2. .env 파일을 통한 환경변수 분리
import axios from 'axios';
const instance = axios.create({
baseURL: process.env.VUE_APP_API_URL,
});
function registUser(userData) {
return instance.post('signup', userData);
}
export { registUser };
위와 같이 우리는 axios를 실제 Component가 아닌 분리하여 하나의 API js 파일로 분리를 할 수 있다.
실제 사용하는 Component에서는 API 파일을 import 하여 사용하면 되는 이점이 있다.
이때 내부적으로도 동일한 URL의 경우 이렇게 공통으로 묶어 조금 더 중복을 줄이는 코드를 만들 수 있다.
하지만, 이경우에 localhost, dev, prod 환경에서 동일하게 URL을 줄 수는 없지 않을까?
이러한 부분을 Vue cli에서 제공하는 .env파일로 대체할 수 있다.
위 이미지에서 보이듯이 .env(공통), .env.development(개발), .env.production(운영) 세가지의 파일을 제공한다.
이 세가지 안의 변수들은 각 환경에 따라 해당 .env파일에서 값을 불러와서 사용하게 된다.
3. Async / Await 에러 처리방안
보통 Async / Await 비동기 구조로 개발을 진행하게 되면 중요하게 에러처리이다.
단순하게 axios를 통해 API요청을 하고 그 응답값을 넣는 구조로 개발을 하면 응답이 200이 아닌 실패가 발생했을때 아래와 같은 상황을 마주한다.
async submitForm() {
const userData = {
username: this.username,
password: this.password,
};
const { data } = await loginUser(userData);
console.log(data.user.username);
this.logMessage = `${data.user.username}로 로그인 되었습니다.`;
this.initForm();
},
우리는 이 Error 로그를 보면서 LoginPage.vue 에서 발생한거긴 한데 정확히 어디가 문제인지 가시적으로 알기가 힘들다.
따라서, 에러처리를 try/catch를 통해 개선하면 아래와 같이 문제가 발생한 Line 및 원인에 대해서 조금 더 쉽게 접근할 수 있도록 할 수 있다.
웹 개발을 하면서 에러처리에 대해 가장 중요한 부분은 사용자에게 어떤 문제로 인한 오류인지 나타내 주는 부분일 것이다.
따라서, 이러한 부분을 아래와 같이 화면에 표시해 주는 것이 좋을 것 같다.
async submitForm() {
try {
const userData = {
username: this.username,
password: this.password,
};
const { data } = await loginUser(userData);
console.log(data.user.username);
this.logMessage = `${data.user.username}로 로그인 되었습니다.`;
this.initForm();
} catch (error) {
this.logMessage = error.response.data;
}
},
Gatsby router 활용에 대한 포스트 입니다.