1차프로젝트-회원가입창 JS구현

내가 담당했던 로그인창과 회원가입창을 

어느정도 구현을 완료하니,

눈에 보이지않던 이상한 코드들이 눈에 띄기시작했다.

그리하여 오늘은 코드를 리팩토링을 진행하려고 한다

<script>

function validateForm() {
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    var confirmPassword = document.getElementById("confirmPassword").value;
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailRegex.test(email)) {
        alert("올바른 이메일 주소 형식이 아닙니다.");
        return false;
    }

    if (password.length < 8) {
        alert("비밀번호는 최소 8자 이상이어야 합니다.");
        return false;
    }

    if (password !== confirmPassword) {
        alert("비밀번호와 비밀번호 확인란이 일치하지 않습니다.");
        return false;
    }

    alert("회원가입을 축하합니다!");
    return true;
}
</script>

기능은 잘되서 얼렁뚱땅 넘어갔지만

인터넷검색중 html안에 script문으로 기능을 구현하게되면
내 로컬에서는 잘되다가도, 안될수도 있고, 무거워지는 문제도 생기며
여러가지문제가 생긴다고 배웠다.

(추가: HTML 코드가 js에 의존적인 웹사이트라면 사용자가 의미없는 화면을 볼 수 있다. 즉, 의미있는 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다)



그래서 script문 자체를 javascript로 옮겨버리기로 결정했다!

import "../../index.css"

function validateForm(e) {
    e.preventDefault();
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const name = document.getElementById('username').value;
    const confirmPassword = document.getElementById("confirmPassword").value;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailRegex.test(email)) {
        alert("올바른 이메일 주소 형식이 아닙니다.");
        return false;
    }
    
    if (password.length < 5) {
        alert("비밀번호는 최소 5자 이상이어야 합니다.");
        return false;
    }
    
    if (password !== confirmPassword) {
        alert("비밀번호와 비밀번호 확인란이 일치하지 않습니다.");
        return false;
    }
    
    document.getElementById("signIn").addEventListener("submit", validateForm);

이렇게 옮겨주었고 
다만 js로 옮겨주면서 맨밑줄을 꼭 추가해줘야 동작을한다!

document.getElementById("signIn").addEventListener("submit", validateForm);

 

일단은 리팩토링은 이정도했고,

백엔드 서버가 배포 됬다고해서 급하게 백엔드와 연결작업에 들어가게됬다.

 

이슈는 회원가입창에 적은 정보를 백엔드 서버로 보내고, DB에 저장하는 기능
(FE는 백엔드서버로 보내는거만 담당)
그리고 로그인시 DB에 있는 정보를 불러와 유효한지 체크한뒤 로그인시키는 기능을 추가해야한다!
다음엔 그 작업에 대해 깊이 정리해보겠다.

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript