Vue axios 라이브러리 사용 및 설정

Vue api 구조화

• axios 인스턴스 생성과 api URL 공통화
  : ✨✨ 배포 시 API URL과 프로토타이핑 할 때 URL이 다를 수 있기 때문에, URL을 공통화하고, 환경 변수 파일에 저장해 주어야 한다.

const instance = axios.create({
	baseURL: "http://localhost:3000/",
})
//1.
axios.post("http://localhost:3000/signup");
//2.
instance.post("signup");

api 공통화 및 인스턴스 생성을 통해 코드를 간결하게 작성할 수 있다.
axios.post()의 첫번째 인자로 url을 전달해야 하는데, baseURL을 설정해 주었기때문에, signup만 인자로 넘기게 되면 url을 "http://localhost:3000/signup"로 작성한 것과 같이 동작한다.

• ✨✨✨ 서버 API 엔드포인트 주소를 환경변수로 관리하는 방법
  : 프로젝트의 루트 폴더에 .env 파일 생성
  : .env 파일은 키=값 형태로 변수를 저장할 수 있는 파일.

• ✨✨✨ env 파일 생성하고, api/index.js 파일에서 사용하기

//.env
VUE_APP_API_URL=http://localhost:3000

//api/index.js
const instance = axios.create({
	baseURL: process.env.VUE_APP_API_URL,
})

env파일안의 변수 앞에 VUE_APP이라는 접두사가 붙은 변수는 process.env.VUE_APP_API_URL과 같이 다른 파일에서 접근할 수 있다. ( vue-cli3 버전 부터 적용! )

• 배포용 env, 개발용 env 파일 생성하기
  : ✨ vue-cli에서 지원하는 방법을 이용해서 배포용, 개발용 그리고 공통 env 파일을 생성해서, 모드에 따라 다른 환경변수가 적용되도록 설정할 수 있다.

//.env.production
VUE_APP_API_URL=https://vue-til.com/

배포용 환경 변수 파일, 배포 시에 api url 주소를 환경변수로 설정했다.

//.env.development
VUE_APP_API_URL=http://localhost:3000

개발용 환경 변수 파일

//.env
VUE_APP_API_URL=https://vue-til.com/

공통 env 파일, 기본적으로 .env.development나 .env.production이 있다면, 이 두개의 파일이 우선순위를 가지지만, 이 두개의 파일이 없을 경우 공통 .env파일의 환경변수가 적용된다.

• axios 가이드
  : https://xn--xy1bk56a.run/axios/guide/api.html#http-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%B3%84%EC%B9%AD