로그인한 상태를 구현 후 발생한 문제점

로그인 후 메인화면으로 진입한 상태

새로고침시 에러발생 - 로딩 스피너와 상단 로그인,회원가입 이뜨며 초기상태로 되는 문제

에러구문을 살펴보면 

로그인 후 메인페이지 진입을 해서 posts 요청을 날리게 되는데 
개발자 도구의 Network > posts 를 보면 Authorization 의 속성이 비어있다. 

이러한 오류가 발생했던 이유는 

구현시 javascript레벨에 저장을 하고 있었고

새로고침을 하게 되면서 vue의 Store에 저장해뒀던 빈문자열 (초기화) 값이 찍히면서 

로그인시 저장되었던 token과 username 값이 사라지게 되면서 초기상태로 돌아가버렸던 것. 

Cookie(쿠키)를 사용하여 문제해결

로그인 인증 값 브라우저 저장소에 저장 후 확인

컴포넌트 파일에서 로그인하고나서 토큰과 username을 저장하고 router도 연결해준 상태.

javascript레벨에 저장하는 것 뿐만 아니라 브라우저 저장소를 이용해서 토큰 값을 저장해놓으면

새로고침을 하더라도 브라우저 저장소에서 해당값을 꺼내와 사용할 수 있게된다.

쿠키(cookie)에 정의된 함수들을 사용해보자 .

cookie를 setup 하는 방법
- document.cookie 를 통해 문자열을 넣어준다.
- til_auth, til_user를 이용해서 쿠키 값을 저장해오고 꺼내오도록 세팅하기

utils/cookies.js 

LoginForm.vue 에서 아래와 같이 cookies.js에 정의됬던

saveAuthToCookie(), saveUserToCooke() 함수를 import 하고 method내 비지니스 로직 안에 해당 함수를 호출한다.

이제 cookie에 token 과 username을 저장한 상태가 되는데  

이때 cookie가 저장된 것을 확인하는 방법은

서버를 실행한 후 브라우저 개발자도구 >  Application 패널 > Storage > Cookies > http://localhost:8080

에 원하는 값이 저장되는걸 확인할 수 있다. 

쿠키 API를 이용해서 브라우저 저장소에 token 과 username을 저장했다.

하지만 새로고침 했을때 여전히 문제가 발생하는데

이유는 앞써 확인한 브라우저 저장소인 cookie에 저장된 값이 Vue의 Store에 연결되지 않았기 때문..

cookie(쿠키)에 저장된 값을 Vue의 Store에 가져오기 위한 작업. 

- store/index.js 파일에서 보면 state에 username과 token이 빈문자열로 초기화되는 상태

- cookie.js에 정의된 함수중 getAuthFromCookie(), getUserFromCookie() 함수를 활용한다. 

store/index.js 

- cookies.js에 정의되 있는 함수 getAuthFromCookie(), getUserFromCookie() 를 import 

- state에 빈문자열이였던 token과 username값에 or 연산자를 사용하여 쿠키 함수를 추가

- 매번 Store를 생성할때마다 쿠키값을 꺼내와서 넣어보고 없으면 빈값의 문자열(초기화)

완료 후 실행결과

utils/cookies.js 본문

// utils/cookies.js

function saveAuthToCookie(value) {
  document.cookie = `til_auth=${value}`;
}

function saveUserToCookie(value) {
  document.cookie = `til_user=${value}`;
}

function getAuthFromCookie() {
  return document.cookie.replace(
    /(?:(?:^|.*;\s*)til_auth\s*=\s*([^;]*).*$)|^.*$/,
    '$1',
  );
}

function getUserFromCookie() {
  return document.cookie.replace(
    /(?:(?:^|.*;\s*)til_user\s*=\s*([^;]*).*$)|^.*$/,
    '$1',
  );
}

function deleteCookie(value) {
  document.cookie = `${value}=; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
}

export {
  saveAuthToCookie,
  saveUserToCookie,
  getAuthFromCookie,
  getUserFromCookie,
  deleteCookie,
};

로그인 후 아래의 전환된 화면에서 새로고침을 하게되면 

콘솔에러가 발생.

로딩스피너가 계속 돌면서  에러에 대한 처리가 안되어있는 상태 

로그인후 메인페이지 진입을 해서 posts 요청을 날리게 되는데 

Network > posts 를보면 Authorization 의 속성이 비어있다. 

로그인한 상태를 javascript레벨에 저장을 하고있었고

아래와 같이 vue Store에 state값을 저장해 둿었다.

하지만 당연히 새로고침을 하게되면서 refresh상태가 되기때문에 token과 username이 사라지게 되면서

해당 페이지로 다시 진입할때 로그인이 다시 필요해지며 API요청도 먹통이 된다. 

이런부분들을 쿠키로 처리해보자.

2. 로그인 인증 값 브라우저 저장소에 저장 후 확인

컴포넌트 파일에서

로그인하고나서 토큰과 username을 저장하고 router도 연결해준 상태.

javascript레벨에 저장하는 것 뿐만 아니라 브라우저 저장소를 이용해서 토큰값을 저장해놓으면

새로고침을 하더라도 브라우저 저장소에서 해당값을 꺼내와 사용할수 있게된다.

쿠키에 정의된 함수들을 사용해보자 .

cookies.js 정의된 함수 

cookie를 setup하는 방법

document.cookie 를 통해 문자열을 넣어주면 된다.

til_auth, til_user를 이용해서 쿠키 값을 저장해오고 꺼내오는 작업을 

// utils/cookies.js

function saveAuthToCookie(value) {
  document.cookie = `til_auth=${value}`;
}

function saveUserToCookie(value) {
  document.cookie = `til_user=${value}`;
}

export {
  saveAuthToCookie,
  saveUserToCookie,
};

로그인폼으로 돌아와 아래와 같이

cookie 함수 2개를 컴포넌트파일에 import하고 비지니스 로직안에 해당 함수를 호출한다. 

그렇게하면 cookie에 token 과 username을 저장한 상태가 된다. 

// LoginForm.vue

import { saveAuthToCookie, saveUserToCookie } from '@/utils/cookies';
export default {

 methods: {
    async submitForm() {
      try {
        // 비즈니스 로직
        const userData = {
          username: this.username,
          password: this.password,
        };
        ...
        saveAuthToCookie(data.token);
        saveUserToCookie(data.user.username);
      
      } catch (error) {
       ...
      } finally {
        ...
      }
    },
    ...
  },
}

cookie가 저장된것을 확인하는 방법

서버를 질행한 후 개발자도구 > Application 패널 > Storage > Cookies > http://localhost:8080

에 원하는 값이 저장되는걸 확인한다. 

쿠키 API를 이용해서 브라우저 저장소에 토큰값과 유저네임을 저장했다.

새로고침 했을때 여전히 문제가 발생하는데 이유는

앞써 확인한 쿠키에 저장된 값이 Vue의 Store에 연결이 되어있지 않았기 때문이다.

store/index.js 파일을 확인해보면

state에 username과 token이 빈문자열로 초기화 되는 상황.

해결방법은 cookies.js 에 있는 쿠키 함수 중 

getAuthFromCookie(), getUserFromCookie() 함수를 가져와서

저장된 값을 store/index.js에 활용한다. 

store/index.js 

cookies.js파일에 있는  getAuthFromCookie(), getUserFromCookie() 를  연결해준다. 

state에 빈문자열이였던 token과 username값에 or연산자를 사용하여 

매번 Store를 생성할때마다 쿠키값을 꺼내와서 넣어보고 없으면 빈값의 문자열(초기화)

이를 해결하기위해 쿠키를 설정해줍니다.

// utils/cookies.js

function saveAuthToCookie(value) {
  document.cookie = `til_auth=${value}`;
}

function saveUserToCookie(value) {
  document.cookie = `til_user=${value}`;
}

function getAuthFromCookie() {
  return document.cookie.replace(
    /(?:(?:^|.*;\s*)til_auth\s*=\s*([^;]*).*$)|^.*$/,
    '$1',
  );
}

function getUserFromCookie() {
  return document.cookie.replace(
    /(?:(?:^|.*;\s*)til_user\s*=\s*([^;]*).*$)|^.*$/,
    '$1',
  );
}

function deleteCookie(value) {
  document.cookie = `${value}=; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
}

export {
  saveAuthToCookie,
  saveUserToCookie,
  getAuthFromCookie,
  getUserFromCookie,
  deleteCookie,
};

cookies.js에 정의해둔 함수를 이용해 연결해준다.

로그인 을 성공하여 전환된 화면에서 새로고침을 했을때 

개발자도구 > Application > Cookies 에서 오류발생 

로그인 인증 값 브라우저 저장소에 저장

// LoginForm.vue
import { saveAuthToCookie, saveUserToCookie } from '@/utils/cookies';

export default {
  data() {
    return {
      // form values
      username: '',
      password: '',
      // log
      logMessage: '',
    };
  },
  computed: {
    isUsernameValid() {
      return validateEmail(this.username);
    },
  },
  methods: {
    async submitForm() {
      try {
        // 비즈니스 로직
        const userData = {
          username: this.username,
          password: this.password,
        };
        const { data } = await loginUser(userData);
        console.log(data.token);
        this.$store.commit('setToken', data.token);
        this.$store.commit('setUsername', data.user.username);
        saveAuthToCookie(data.token);
        saveUserToCookie(data.user.username);
       
      } catch (error) {
        // 에러 핸들링할 코드
        console.log(error.response.data);
        this.logMessage = error.response.data;
      } finally {
        this.initForm();
      }
    },
    initForm() {
      this.username = '';
      this.password = '';
    },
  },
};

개발자도구 > Application > Storage > Cookies

개발자도구 > Vue > Switch to Vuex(반시계아이콘) > Base State 클릭

아래의 State token값이 빈값.

쿠키에 저장된 값이

Vue Store에 연결이 되어있지 않다. 

util/cookies.js 함수

saveAuthToCookie, saveUserToCookie 를 통해 저장을 했다. 

쿠키에서 값을 가져올때 

getAuthFromCookie(), getUserFromCookie() 함수를 이용해서

저장된 값을 Store의 index.js에서 활용해주는작업

매번 Store를 생성할때마다 쿠키값을 꺼내와서 넣어보고 없으면 빈값의 문자열(초기화)

// store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import { getAuthFromCookie, getUserFromCookie } from '@/utils/cookies';

export default new Vuex.Store({
  state: {
    username: getUserFromCookie() || '',
    token: getAuthFromCookie() || '',
  },
 
});

실행결과

store/index.js 에도 cookie 함수 연결해주기

서버로 요청을 보내는것과 서버에서 받은 응답을 화면(컴포넌트)단에서 처리하기전에

추가로직을 넣을수 있는 API

인터셉터를통해 token을 실어보낼 수 있다.

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // 요청보내기 전 코드
    return config;
  }, function (error) {
    // 요청에러 처리
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // 응답을 받기 전에 처리
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // 응답에러 전처리
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

• 액시오스 인터셉터 문서

Vuex

Vuex는 vue.js 애플리케이션을 위한 상태관리 라이브러리 
모든 컴포넌트들에 접근가능한 데이터 저장소로
컴포넌트간 공통으로 사용되는 데이터 속성을 저장한다.
Vuex는 Vue.js의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 의도적인 방법으로 상태를 변경 및 관리할 수 있다.
Vuex는 기존 React의 Flux의 아키텍처를 따라가고 있고 React로 본다면 Redux와 비교 대상으로 볼 수 있다.
Vue.js에서도 Redux를 사용할 수 있지만 Vue.js는 Vuex와의 호환이 좋을 뿐만 아니라 더 직관적으로 개발할 수 있다.

설치 (dependencies에 설치)

npm i vuex

store/index.js

//store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    username: '',
  },
});

main.js

// main.js

import Vue from 'vue';
import App from './App.vue';
import router from '@/routes/index';
import store from '@/store/index';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,
  store,
}).$mount('#app');

npm run serve

크롬 Vue개발자도구

Vuex 구조

Vuex는 state, mutations, action, getters 4가지 형태로 관리가 되며,

이때 이 관리 포인트는 store 패턴을 사용하고 통상 store라고 불린다.

이 4가지는 서로간의 간접적으로 영향이 있으며 단방향 데이터 흐름으로 볼 수 있다.

1. State

• 컴포넌트 간에 공유하는 데이터 = data() { ... }
• Vue 컴포넌트에서 data로 볼 수 있다. 원본 소스의 역할을 하며, View와 직접적으로 연결되어있는 Model이다. 이 state는 직접적인 변경은 불가능하고 mutation을 통해서만 변경이 가능하다. mutation을 통해 state가 변경이 일어나면 반응적으로 View가 업데이트된다.

2. Mutations

• 동기로직 
• state를 변경하는 유일한 방법이고 이벤트와 유사하다. mutation은 함수로 구현되며 첫 번째 인자는 state를 받을 수 있으며, 두 번째 인자는 payload를 받을 수 있다. 여기서 payload는 여러 필드를 포함할 수 있는 객체형태도 가능하다. 이 mutation은 일반적으로(Helper를 쓰지 않는 경우)는 직접 호출을 할 수 없으며, commit을 통해서만 호출할 수 있다.

3. Actions

• 비동기 로직 = axios
• Action은 mutation과 비슷하지만 mutation과는 달리 비동기 작업이 가능하다. 또한 mutation에 대한 commit이 가능하여 action에서도 mutation을 통해 state를 변경할 수 있다. 
• action에서는 첫 번째 인자를 context 인자로 받을 수 있으며 이 context에는 state, commit, dispatch, rootstate와 같은 속성들을 포함한다. 두 번째 인자는 mutation과 동일하게 payload로 받을 수 있다.
• commit을 통해 mutation을 호출했다면 Action은 dispatch를 통해서 호출한다. context의 속성을 보면 dispatch가 있는 것으로 보아 action에서는 서로 다른 action을 호출할 수 있다는 것을 볼 수 있다.

4. Getters

• 중복된 데이터 처리
• Getters는 쉽게 Vue 컴포넌트에서 Computed로 볼 수 있다. 
• 말로 풀자면 계산된 속성인데 getter의 결과는 종속성에 따라 캐시 되고 일부 종속성이 변경된 경우에만 다시 재계산된다. 
• 즉, 특정 state에 대해 어떠한 연산을 하고 그 결과를 View에 바인딩할 수 있으며, state의 변경 여부에 따라 getter는 재계산이 되고 View 역시 업데이트를 일으킨다. 이때 state는 원본 데이터로서 변경이 일어나지 않는다.

dependencies 

애플리케이션 로직과 관련된 라이브러리 목록

npm run build 를 수행하게되면 dependencies 에 있는 라이브러리 목록이

포함되어  최종적인 자원이 압축(변환)이 됨.

• axios
• vue
• vue-router
• vuex

vuex 애플리케이션이 동작할때 필요한 라이브러리

devDependencies 

npm run build 의 결과물에 포함되지 않음. 

• cli-server
• eslint

components/LoginForm.vue

views/LoginPage.vue

App.vue

components/common/AppHeader.vue

컴포넌트 간 데이터전달 방법

1. 기본 컴포넌트 통신 방법

LoginForm안의 데이터 값을 LoginPage를 거쳐서 APP 로 보낸 후 다시 AppHeader로 전달

LoginForm에서 이벤트를 2번 올리고 App에서 1번 내린다

2. EventBus

로그인폼에서 APP헤더로 보내서 스트링값으로 표현하는 방법

3. Store - Vuex (추천)

Data를 Store에 담아 꺼내서 어디서든 자유롭게 사용

규모가 커질수록 스토어를 통해 상태괸라를 하면 편하게 관리할 수 있다. 

• 뷰 라우터 Programmatic Navigation 문서

router.push(location, onComplete?, onAbort?)

// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

const userId = '123'
router.push({ name: 'user', params: { userId } }) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// This will NOT work
router.push({ path: '/user', params: { userId } }) // -> /user

• Email Validation 정규 표현식 코드

utils/validation.js

function validateEmail(email) 
    {
        var re = /\S+@\S+\.\S+/;
        return re.test(email);
    }
    
console.log(validateEmail('anystring@anystring.anystring'));

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">ID: </label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div>
        <label for="password">PW: </label>
        <input type="text" id="password" v-model="password" />
      </div>
      <button :disabled="!isUsernameValid || !password" type="submit">
        로그인
      </button>
      <p>{{ logMessage }}</p>
    </form>
  </div>
</template>

import { validateEmail } from '@/utils/validation';

computed: {
    // 데이터의 변화에 따라서 자동으로 계산해주는 연산식
    isUsernameValid() {
      // 조건식 form이 유효하면 true, 유효하지않으면 false
      return validateEmail(this.username);
    },
  },

Vue CLI 3.X 부터 적용되는 내용

지난포스팅에서 .env파일에 Vue Cli 3부터 제공되는 VUE_APP_ 접두사를 활용하여 환경변수를 설정 

로컬호스트 3000번으로 설정해준 상태이지만

실무에선 Public한 도메인에 오픈되기 때문에 배포하게되면 맞지 않게 된다.

프로토타이핑시엔  http://localhost:3000/ 을쓰고

서버배포시 들어갈때 아래의 도메인.com 으로 사용하게됨.

이와같이 배포용과 개발용 매번환경변수들을  따로 관리하게되는데

아래의 예 처럼 키를 따로 분리하여 관리하는것이 아닌 Vue CLI에서 제공하는 방법으로 설정해주면 편리하다.

예시 (X)

VUE_APP_API_URL_DEPLOYMENT = https://vue-til.com/
VUE_APP_API_URL = http://localhost:3000/

.env파일과 마찬가지로 프로젝트 루트에 .env.development 파일생성

.env 파일보다 .env.development 파일이 최 우선순위로 설정됨

.env / .env.development  / .env.production  가 제공됨.

.env.development 은 개발시에 띄울 로컬서버(호스트), 

.env.production 은 npm run build 에 적용된 production모드이고

.env 에는 위의 개발모드와 프로덕션모드가 없을때 공통으로 들어갈 변수를 설정해주는 기본 파일이다.

설정파일을 변경했을땐 서버 재실행이 필요함. 

서버 엔드포인트 API 주소를 환경변수로 관리하는 방법

프로젝트 Root돌더 위치에 .env 파일 생성. 키 = 값 의 형태로 작성한다. (환경변수 파일)

.env

API_URL = http://localhost:3000/

기존 axios API 파일 

설정한 .env환경변수 파일을 api/ index.js에서 가져오는 방법

vue-cli 2.X 까지는 .env팡리을 애플리케이션 소스코드에서 들고올려면 웹펙의 DefinePugin을 사용해줘야했다. 
vue-cli 3.X 부턴 사용자 편리를 위해 자체로 규칙을 제공하는데 
VUE_APP_ 접두가사 붙은 변수는 자동 로드된다.

.env환경변수의 파일은 자동으로  axois api/index.js에서 들고올 수 있게 된다.

index.js 에서 .env 파일내 소스 사용하기

// api/index.js

// url 공통화
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
});

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

https://webpack.js.org/plugins/define-plugin/

API 설정 공통화

기존 url전체 로컬호스트 3000을 바라보는 반복되는 url 소스를 각각 연결하게되는데

// 회원가입 api함수
function registerUser(userData) {
  const url = 'http://localhost:3000/signup';
  return axios.post(url, userData);
}

// 로그인 api함수
function loginUser() {
  const url = 'http://localhost:3000/login';
  return axios.post(url);
}

하나의 엔드포인트를 바라보는 상황에서

로컬호스트 서버 url을 공통화한 후 환경변수 파일을 설정해준다. 

AxiosRequestConfig 공통설정은 axios.create({ })  안에 넣어준다. 

url api 공통화 처리 (instance에 모두 담아서 처리)

// url 공통화
// 요청할때 공통설정들을 모두 넣을수 있다.
const instance = axios.create({
  baseURL: 'http://localhost:3000/',
});

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

템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 방식입니다. 기존에는 var str = 'Hello ES6'와 같은 방식으로 사용하였으나 ES6에서는 백틱(back-tick)이라는 기호(`)를 사용하여 정의합니다.

const str = `Hello ES6`;

여러 줄에 걸쳐 문자열 선언하기

기존 자바스크립트 문자열 선언 작은따옴표 '는 아래와같은 문제가 있다. 자동으로 개행이 되지않아 \n 을 중간중간 추가해줘야함...

var str = 'Template literals are string literals allowing embedded expressions. \n' + 
'You can use multi-line strings and string interpolation features with them. \n' + 
'They were called "template strings" in prior editions of the ES2015 specification.';

백틱을 이용하면 문자열 선언시엔 개행할 필요가 없다. 

const str = `Template literals are string literals allowing embedded expressions.
You can use multi-line strings and string interpolation features with them.
They were called "template strings" in prior editions of the ES2015 specification.`;

문자열 중간에 변수 바로 대입하기

기존 문자열 정의 방식에서 또 번거로웠던 부분은 바로 자바스크립트 변수 값을 문자열과 함께 사용하는 부분이었습니다.

기존

var language = 'Javascript';
var expression = 'I love ' + language + '!';
console.log(expression); // I love Javascript!

백틱안에서 ${}  을 이용하면 변수의 값을 대입할수 있고 간단한 연산도 가능하다.

var language = 'Javascript';
var expression = `I love ${language.split('').reverse().join('')}!`;
console.log(expression); // I love tpircsavaJ!

Destructuring (디스트럭처링) ES6문법

기본 객체 배열구조

var arr = [1, 2, 3, 4];
var obj = {
  a: 10,
  b: 20,
  c: 30
};

'구조 분해' 변수 선언 형식이 아래와 같이 자유로워지는 것

var { a, b, c } = obj;

ES6에선 정상동작됨

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

구조 분해 문법을 적용하면 훨씬 더 간편하게 꺼내올 수 있다.

var josh = {
  language: 'javascript',
  position: 'front-end',
  area: 'pangyo',
  hobby: 'singing',
  age: '102'
};

var { language, position, area, hobby, age } = josh;
console.log(language); // javascript
console.log(position); // front-end
console.log(area); // pangyo
console.log(hobby); // singing
console.log(age); // 102

코드 라인 숫자를 줄일 수 있고, 이 문법이 익숙해지면 전체적으로 코드가 더 간결해지는 것을 느낄 수있다.

https://joshua1988.github.io/es6-online-book/destructuring.html#%ED%8A%B9%EC%A0%95-%EA%B0%9D%EC%B2%B4%EC%9D%98-%EA%B0%92%EC%9D%84-%EA%BA%BC%EB%82%B4%EC%98%A4%EB%8A%94-%EB%B0%A9%EB%B2%95

자바스크립트의 비동기 처리 시리즈의 마지막 연재물 async & await 문법.

async & await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법으로

기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고

개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 비동기 처리와 콜백 함수

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 Promise 쉽게 이해하기

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

Axios

Axios는 브라우저, node.js를 위한 Promise API를 활용하는 HTTP 비동기통신 라이브러리 
Axios를 활용하여 API문서를 구조화 한다. 

axios 설치하기 (dependencies에 설치)

npm i axios

기본 사용법

※ 위와 같이 사용할 컴포넌트(.vue)파일에서 간단하게 import하여 사용하는 방법이 있으나

API폴더로 구조화하여 import 정리된 코드로 작성하는 것을 권장한다. 

API 구조화

1. api 폴더생성 > index.js파일 생성

api/index.js

import axios from 'axios';

function registerUser() {
  const url = 'http://localhost:3000/signup';
  return axios.post(url);
}

export { registerUser };

2. 컴포넌트 파일(SignupForm.vue)에서 registerUser를 가져오기