[Vue.js] Today I Learned - 회원 가입

회원 가입

회원 가입 API를 호출하여 입력된 정보를 바탕으로 회원 가입을 진행한다.

API 호출을 위한 Axios 설치

npm i axios

구현 방법

1. API 호출을 위한 Axios 구현

// src/api/index.js
import axios from 'axios';

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

// 함수 export
export { registerUser };

2. 폼 입력창과 API 호출 기능을 수행하는 SignupForm.vue 컴포넌트 생성

<!-- src/components/SignupForm.vue -->
<template>
  <!-- @submit = v-on:submit -->
  <!-- prevent: 새로고침 방지 -->
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">id: </label>
      <!-- v-model: data 속성과 연결 -->
      <input id="username" type="text" v-model="username" />
    </div>
    <div>
      <label for="password">pw: </label>
      <input id="password" type="text" v-model="password" />
    </div>
    <div>
      <label for="nickname">nickname: </label>
      <input id="nickname" type="text" v-model="nickname" />
    </div>
    <button type="submit">회원 가입</button>
    <!-- 결과 메시지 출력 -->
    <p>{{ logMessage }}</p>
  </form>
</template>

<script>
import { registerUser } from '@/api/index';

export default {
  data() {
    return {
      // form
      username: '',
      password: '',
      nickname: '',
      // log
      logMessage: '',
    };
  },
  methods: {
    async submitForm() {
      // API 요청시 전달할 userData 객체
      const userData = {
        username: this.username,
        password: this.password,
        nickname: this.nickname,
      };
      const { data } = await registerUser(userData);
      
      this.logMessage = `${data.username} 님이 가입되었습니다.`;
      
      // 가입 후 폼 초기화
      this.initForm();
    },
    initForm() {
      this.username = '';
      this.password = '';
      this.nickname = '';
    },
  },
};
</script>

동작 확인