[075] Spring + Vue: 회원가입 창 만들기

 

2024.08.27(화)
 
Spring+Vue 2일차

 

해당 내용을 배우면서 나만의 프로젝트도 시작하는게

하나의 목표! 수업 내용에 충실하자

 

이번주 Til은 Spring과 Vue 연동 과정에 대해 작성해야지..

나중에 스스로 구현해볼 때 참고하기 위해서!

 

---

 

Spring + Vue

 

 

프로젝트 준비

• CH01.1 프로젝트 준비-백엔드
• CH01.2 프로젝트 준비-프론트엔드

회원관리

• CH02.1 회원관리-회원가입
• CH02.2 회원관리-로그인,로그아웃
• CH02.3 회원관리-정보 수정
• CH02.4 회원관리-비밀번호 변경

게시판

• CH03.1 게시판-백엔드
• CH03.2 게시판-프론트엔드
• CH03.3 인증 가드
• CH03.4 게시판-페이지네이션

 

---

CH02.1 회원관리-회원가입

 

Backend

 

MemberController.java

• @RequiredArgsConstructor과 final은 필수로 같이 나옴

 

 

• checkDuplicate 위에 마우스를 올려두면, return 값이 무엇인지 알 수 있음

 

 

checkusername 실험

• 있는 이름을 검색하면(admin)? true

• 없는 이름을 검색하면(chulsoo)? false

 

Frontend

 

JoinPage.vue

• script setup 부분

<script setup>
import { reactive, reative, ref } from 'vue'; // Vue에서 반응형 상태 관리와 참조를 위한 기능
import { useRouter } from 'vue-router'; // Vue Router 사용하기 위한 훅
import authApi from '@/api/authApi'; // 인증 관련 API 함수들

const router = useRouter();
const avatar = ref(null);
const checkError = ref('');

const member = reactive({
  username: 'sojin',
  email: 'sojin@naver.com',
  password: '1234',
  password1: '1234',
  avatar: null,
});

const disableSubmit = ref(true); // 제출 버튼 비활성화 여부

// username 중복 체크
const checkUsername = async () => {
  if (!member.username) {
    //  사용자 이름이 입력되지 않은 경우 경고 메시지 표시
    return alert('사용자 ID를 입력하세요.');
  }

  // 이름이 중복된 경우 제출 버튼 비활성화
  disableSubmit.value = await authApi.checkUsername(member.username);
  console.log(disableSubmit.value, typeof disableSubmit.value);
  // 제출 버튼이 비활성화된 상태면 ID가 사용중이란 에러 메시지 출력
  checkError.value = disableSubmit.value
    ? '이미 사용중인 ID입니다.'
    : '사용가능한 ID입니다.';
};

// username 입력 핸들러
const changeUsername = () => {
  disableSubmit.value = true; // ID 입력 중엔 항상 제출 버튼을 비활성화
  if (member.username) {
    checkError.value = 'ID 중복 체크를 하셔야 합니다.';
  } else {
    checkError.value = '';
  }
};

const join = async () => {
  if (member.password != member.password2) {
    return alert('비밀번호가 일치하지 않습니다.');
  }
  if (avatar.value.files.length > 0) {
    // 아바타 파일이 업로드된 경우 member 객체에 추가
    member.avatar = avatar.value.files[0];
  }
  try {
    await authApi.create(member); // 회원가입 API 호출
    router.push({ name: 'home' }); // 회원 가입 성공 시, 첫 페이지로 이동 또는 로그인 페이지로 이동
  } catch (e) {
    console.error(e);
  }
};
</script>

 

• template 부분
  • script만 보고 이해가 되지 않은 부분도 포함됨
  • palceholder: 힌트 주는 부분

    <!-- form을 제출할 경우 기본 동작인 서버 전송은 하지 않고 join 메소드만 부르겠다 -->
    <form @submit.prevent="join">
      <div class="mb-3 mt-3">
        <label for="username" class="form-label">
          <i class="fa-solid fa-user"></i>
          사용자 ID :
          <button
            type="button"
            class="btn btn-success btn-sm py-0 me-2"
            @click="checkUsername"
          >
            ID 중복 확인
          </button>
          <!-- 제출 버튼의 활성화 여부에 따라 스타일을 다르게 적용 -->
          <span :class="disableSubmit.value ? 'text-primary' : 'text-danger'">{{
            checkError
          }}</span>
        </label>

 

• input
  • 입력 받는 부분

        <input
          type="text"
          class="form-control"
          placeholder="사용자 ID"
          id="username"
          @input="changeUsername"
          v-model="member.username"
        />
      </div>

 

 

Error

• 파일이 폴더를 만들어줘야함

 

 

 

---

 

회원가입이 되지 않는 오류가 발생했음!

이것과 관련된 해결방안 내일 Til 처음에 작성해려고 한다..