회원가입 Component 생성

본격적으로 어플리케이션을 제작해보자.

이번 어플리케이션 주제는 학습 노트를 정리하는 어플을 만들것이다.

주요 기능으로는 회원가입, 로그인, 게시물 CRUD가 되겠다.

회원가입 부터 만들어본다.

SignupPage.vue

<template>
  <div>
    <h1 class="page-header">회원 가입 페이지</h1>
    <SignupForm></SignupForm>
  </div>
</template>

<script>
import SignupForm from '@/components/SignupForm.vue';

export default {
  components: {
    SignupForm,
  },
};
</script>

SignupForm.vue

<template>
  <div class="contents">
    <div class="form-wrapper form-wrapper-sm">
      <form @submit.prevent="submitForm" class="form">
        <div>
          <label for="username">id: </label>
          <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" class="btn">회원 가입</button>
      </form>
      <p class="log">{{ logMessage }}</p>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      // form values
      username: '',
      password: '',
      nickname: '',
      // log
      logMessage: '',
    };
  },
  methods: {
    async submitForm() {
      const userData = {
        username: this.username,
        password: this.password,
        nickname: this.nickname,
      };
      const { data } = await registerUser(userData);
      console.log(data.username);
      this.logMessage = `${data.username} 님이 가입되었습니다`;
      this.initForm();
    },
    initForm() {
      this.username = '';
      this.password = '';
      this.nickname = '';
    },
  },
};
</script>

// api/index.js

import axios from 'axios';

const instance = axios.create({
  // localhost:3000
  baseURL: process.env.VUE_APP_API_URL,
});

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

export { registerUser };

회원가입시 필요한 정보는 ID로 사용할 email, pw, nickname 3가지 정보이다.

2way binding을 위해 v-model을 이용하여 input form에 각각 data를 연결한다.

async await를 이용하여 비동기 패턴을 처리한다.

출처 : Vue.js 끝장내기 - 실무에 필요한 모든 것