Nodejs express로 에어비앤비 클론코딩 해보기 4.

local 계정 회원가입 구현

// 프론트 코드
document.getElementById('join__form').addEventListener('submit', (e) => {
            e.preventDefault();
            const joinData = {
                email: e.target.email.value,
                password: e.target.password.value,
                name: e.target.name.value,
                nickname: e.target.nickname.value,
                phone: e.target.firstNum.value + e.target.middleNum.value + e.target.lastNum.value,
            } 
            console.log(joinData);  
            if(joinData.email === "" ) {
                return alert('이메일을 입력해주세요.');
            }
            if(joinData.password < 4) {
                return alert('비밀번호는 4글자 이상입니다.');
            }
            if(joinData.name === "" || joinData.nickname === "" || joinData.phone === "" || joinData.phone.length > 11) {
                return alert('잘못된 정보입니다.');
            }
            
             axios.post('/auth/join', joinData)
                .then((response) => {
                    if(response.data.joinsuccess){
                        alert(response.data.message);
                        return window.location = "/login";
                    }
                    alert(response.data.message);
                    return location.reload();
                })
                .catch((error) => {
                    console.log(error);
                });

           
            e.target.email.value = '';
            e.target.password.value = '';
            e.target.name.value = '';
            e.target.nickname.value = '';
            e.target.firstNum.value = '';
            e.target.middleNum.value = '';
            e.target.lastNum.value = '';
        });
// 서버 코드
router.post('/join', isNotLoggedIn, async (req, res, next) => {
    try {
        const {
            email,
            password,
            name,
            nickname,
            phone,
        } = req.body;
        console.log(req.body);
        //const phone = firstNum + middleNum + lastNum;
        const user = await User.findOne({ where: {email} });
        if(user) {
            return res.json({ joinsuccess: false, message: "입력하신 이메일로 가입한 계정이 존재합니다..." });
        }
        const hash = await bcrypt.hash(password, 12);
        const newUser = await User.create({
            email,
            password: hash,
            name,
            nickname,
            phone,
        });
        return res.json({ joinsuccess: true, message: "회원가입 성공입니다."});
        
    } catch (error) {
        console.error(error);
        return res.json({ joinsuccess: false, message: "데이터 베이스 오류 입니다 관리자에게 문의 하세요..."});
    }
});

회원 가입 페이지에서 가입 정보를 받아온 후 User모델에 새로운 데이터를 생성하여 회원을 생성한다.

가입 전 회원을 구분할 수 있는 이메일로 기존의 데이터와 일치한 정보가 있는지 확인을 하고 없을 때 생성하는 방식으로 진행했다…

결과

회원 가입을 할 정보를 입력한다.

서버에서 처리 후 json형식으로 보낸 데이터에 따라 성공 실패 여부를 확인 한다.

입력한 데이터가 없는 회원이기 때문에 성공이라는 메시지를 띄웠고 성공했다는 것을 알수있다..✌✌

users 테이블을 확인하면 아까 입력한 데이터가 성공적으로 생성 된 것을 확인 할 수 있다. 👍

문제점

로컬 계정 회원 가입 처리 코드 작성은 간단하게 구현해서 어렵게 느껴지지는 않았지만… 페이지에서 데이터를 보낼 때 검사하는 방법이 너무 많고 어려운게 많아서 간단하게 검사 후 서버로

데이터를 보내는 방식으로 진행했다…

자바 스크립트를 이용해서 데이터를 검사해서 보내야 하는 방법에 치여서 조금 어려움을 느꼈다 자바스크립트의 공부가 필요하다는 것을 느끼는 과정 이였다.

보완점

혼자 하는 프로젝트라서 많은 것을 축소해서 진행 하려 하다 보니 회원 가입 과정이 너무 단순하다는 생각이 들었다. 많은 사이트들을 참고해서 비슷한 과정으로 만들고 싶었지만

본인 인증 부분을 제외 시킨 것이 조금 아쉽다.

본인 인증 구현도 공부해서 사용해봐야겠다.