회원가입 유효성 검사
유저가 입력한 값이 알맞은 값인지 유효성 검사를 해야할 필요가 있습니다. 데이터를 어떻게 다루어야 하나, 검색을 많이 해봤는데 vuex 라이브러리를 이용하여 관리를 한다고 하였습니다. 하지만 vue3 의 경우, vuex 보다는 pinia 를 이용하는게 낫다는 기술 블로거들의 의견을 받들어 pinia 를 이용하기로 하였습니다.
아래는 오늘 작업한 결과물을 담은 영상입니다.
영상을 보면 알다시피 npc 의 대화상자를 이용해 유저가 제대로 입력하지 않은 부분이 어딘지 쉽게 알게 하였고, 선택지에 따라 알맞은 페이지로 이동하도록 수정하였습니다.
기본구조
import { defineStore } from "pinia";
export const useSignupStore = defineStore("signup", {
id: "signup",
state: () => ({
// 상태 변수들
}),
getters: {
// 읽기 속성들
// computed처럼 계산이 필요한 경우에도 활용
},
actions: {
// 상태 변경 요청
},
});
JavaScript
복사
signup.js
src 아래 store 디렉토리를 만들고 그 안에 signup.js 파일을 만들어 주었습니다.
signup.js
import { defineStore } from "pinia";
import router from "@/router/index";
import signup from "@/test/signup";
export const useSignupStore = defineStore("signup", {
id: "signup",
state: () => ({
password: "",
email: "",
nickname: ""
}),
getters: {
errorPassword() {
if (this.password.length === 0) return "☑ 비밀번호를 입력해줘. 6자 이상 이여야 해. 엣헴.";
if (this.password.length < 6) return "☑ 비밀번호는 6자 이상 입력해야 된다니까~?";
return "";
},
errorEmail() {
if (this.email.length === 0) return "☑ 이메일을 입력해줘. 아직 공란인걸?";
return "";
},
errorEmailForm() {
if (!checkEmail(this.email)) return "☑ 이메일 형식이 이상해~ 다시 입력해줘.";
return "";
},
errorNickname() {
if (this.nickname.length === 0) return "☑ 닉네임을 입력해줘. 어떤 이름이 좋으려나~?";
},
canSignup() {
return (this.password !== "") &&
(this.password.length >= 6) &&
(this.errorPassword === "") &&
(this.email !== "") &&
(this.errorEmail === "") &&
(this.errorEmailForm === "") &&
(this.nickname !== "") &&
(this.errorNickname === "")
},
},
actions: {
async submit() {
const response = await signup.submit(this.$state);
if (response.data.errorCode) {
alert(response.data.errorMessage);
return;
}
alert("회원가입이 완료되었습니다.");
router.push({ path: '/'});
},
},
});
// 이메일 유효성 검사
function checkEmail(email) {
try {
let pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
return (pattern.test(email));
} catch (error) {
return false;
}
}
// 이메일 중복검사
JavaScript
복사
signup.js
테스트 디렉토리에 있는 동명의 스크립트 입니다.
export default {
submit(request) {
console.log("signup.submit - request:", request);
return {
data: {
// TODO: 에러 테스트 할 때는 아래 코드를 사용합니다.
// errorCode: 100,
// errorMessage: "이미 등록된 이메일입니다.",
},
}
},
};
JavaScript
복사
vue 파일에서의 사용
회원가입을 위한 파일들을 만들어놨으니, 이제 vue 파일에서 데이터를 받아오도록 하겠습니다. 먼저 signup.js 를 사용하기 위해 아래와 같이 import 를 하고, 아래와 같이 setup() 함수를 작성합니다.
이렇게 import 하게 되면, signup.js 의 데이터를 쉽게 받아올 수 있습니다.
예를 들어, 아래와 같이 작성했을 때, 유저가 인풋박스 안에 작성한 내용이 email 값이 되는 것입니다.
그렇게 필요한 내용을 유저가 채우면, 실시간으로 유효성 검사를 진행합니다. 만약 조건을 만족하지 않았는데 버튼을 누른다면 아무리 눌러도 동작하지 않습니다.
하지만 만약 통과했다면, 아래와 같이 확인문구가 나타납니다.
아직 백단에 데이터 전달은 안되는 상태입니다! (axios 설정 안함)