Axios 통신

Axios 설정 및 API 폴더 구조화

• Axios 설치

# npm install --save axios

• Axios로 통신

1. 직접 Axios를 호출한다

<script>
    import axios from 'axios';

    export default {
      ...
        methods: {
            submitForm() {
                console.log('제출');
                axios.post();
            }
        },
    }
</script>

2. api 디렉토리 및 모듈파일들을 생성한다

import axios from 'axios';

async function registerUser(userData) {
  const url = 'http://localhost:8080/signup';
  await axios.post(url, userData);
  return;
}

export { registerUser };

axios.post() 의 결과는 Promise 이기 때문에 async + await 형태로 포현했다. 가장 중요한 것은 협업하는 팀원들과 컨벤션을 준수해서 개발하는 것이 좋을 것으로 판단된다.

API 설정 공통화

• url 공통화

import axios from 'axios';

const axiosService = axios.create({
 baseURL: 'http://localhost:3000/',
});

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

export { registerUser };

위와 같은 형태로 모듈(역할 또는 기능) 마다 분리해서 개발하면 더욱 편리할 것으로 예상된다.
자바스크립트의 모듈 스코프를 최대한 활용하는 것이 가장 효율 적으로 판단된다.

env 설정하기

env 파일과 설정 방법

• 프로젝트 루트 경로에 .env 파일을 생성한다.
• 버전에 따라 {root}/config/dev.env.js 와 같이 생성해야 하는 경우도 왕왕 있음
• .env 파일은 KEY - VALUE 로 구성

// @/.env
VUE_APP_API_URL=http://localhost:8080/

Vue CLI 의 env 파일 규칙과 실무 환경 구성 방법

• 개발모드와 배포모드를 구분해서 환경을 구성
• .env.development 파일을 새로 생성(개발모드에서만 적용)
• .env 는 우선순위가 낮아서 배포버전에서는 development 파일을 제거하고 배포하면 된다
• .env.production 파일은 배포 버전에서만 적용한다