1차 프로젝트 - 회원가입창 구현(form, validate, onsubmit)-vanilla JS

 

 

나는 프로젝트 초기 때 스크럼에서 정한 대로 짱구굿즈쇼핑몰 만들기 프로젝트 중이다.

벌써 시작한자 2주 차에 들어섰는데

이제야 비로소 기본적인 html, css를 완성하고 기능구현에 들어가게 됐다.

내가 맡은 페이지는 로그인창과, 회원가입 창인데

 

팀원 중에 피그마를 능숙히 다룰 줄 아는 분이 계셔서, 와이어프레임을 쉽게 짤 수 있었고, 그나마 처음 써보는 tailwindCSS , vanillaJS를 공부하는데 시간을 할애할 수 있었던 것 같다.(아직 한참 감이 안 오긴 한다)

 

vanillaJS에 대해 공부한 것을 짧게 정의와 장점, 단점을 정리해 보자면

 

 

바닐라 자바스크립트(Vanilla JS)는 외부의 라이브러리나 프레임워크를 이용하지 않는 순수 자바스크립트이다.

장점은 라이브러리나 프레임워크를 사용하지 않기 때문에, 그걸 사용했을 때보다 빠르고 호환성이 좋다는 게 특징이고, 이런 특징은 디버그(Debug)*를 할 때. 보통 라이브러리를 통해 만든 구문은 디버그 과정에서 해당 구문과 이용 라이브러리 파일까지 조사하게 되는데 바닐라 JS의 경우엔 해당 구문만 조사하기 때문에 디버그 하는 시간이 크게 줄어든다는 게 가장 큰 장점이다.

 

하지만 단점은 라이브러리를 활용하면 간단한 코드도 바닐라 JS로 작성하면 길어진다는 어려움이 있다. jQuery를 쓰면 한 줄로도 작업할 수 있는 코드를 여러 줄로 작성한다는 것은 비효율적이라고 생각되고, 그래서 바닐라 JS로만 개발하는 것은 쉽지 않다고 한다.

 

 

공부한 내용은 이렇다. 사실 나는 이전에 리액트를 사용하다가 vanillaJS를 사용하니까 어색하고, 불편한 감이 없지 않아 있었다.(물론, 리액트도 확실히 아는 게 아니지만)

 

그래서 본론으로 돌아와 회원가입창에 대한 기능구현을 하면서 validateForm 함수에 대해 깊은 공부를 하게 되었다.

 

-form

기본적으로 form구문을

 

<form action="/join" method="post" onsubmit="return validateForm()">
<input type ="text" name ="name" id = "name"/>
</form>

 

이런 식으로 사용한다

method는 post 방식으로 

-action

 

부분은 아직 공부 중이다 ㅠㅠ(현재로서 action의 정의는 정보를 보낼 주소라고 하는데 정확히 백엔드 서버 db 쪽인지, 아님 form이 완료되고 나서 이동될 주소인지 알아내지 못했다.)

 

 

-onsubmit

 

 

내가 만든 validateForm() 함수에서 유효성 검사를 통해 submit을 제한할 수 있는 기능이다.

이때, 주의할 점은 꼭 return을 작성해 주는 것이다!

 

 

 

 

 

내가 구현하고자 하는 기능은

비밀번호와 비밀번호 확인란의 내용이 다를 때,

이메일 형식이 올바르지 않을 때,

회원가입이 완료되었을 때

각각 alert문으로 오류 표현과, 회원가입을 완료했다는 축하 문구 등을 구현하려고 했다.

 

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("회원가입을 축하합니다!");
    }

 

 

 

 

body에 이메일, 비밀번호, 비밀 번화 확인란 input등에 form 구문을 감싸서 선언해 주었고,

script로 위에 기재한 코드를 기입하였다.

그 결과 기능이 정상적으로 작동되었다!

 

위의

var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

 

는 이메일형식의 정규식이다. 비밀번호, 아이디 등 정규식을 따로 정의할 수 있다.

 

 

 

또한, 공부하게 된 것이 if문에서

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

 

이 부분이다.

 

!== 이 서로 같지 않다는 뜻이다.

결국 저 구문의 말인즉슨, password가 confirmPassword값과 같지 않으면 alert문을 띄우는 말이다.

기본적인 부분이지만 정의를 제대로 정립해야 할 거 같아서 다시 한번 정리해 보았다.

 

내일은, form에서의 action부분에 대한 정의를 공부할 계획이고, 백엔드 개발자와의 협업(공동으로 해야 할 것)등에 대해 공부해 보고,

나머지 기능을 구현할 계획이다.

 

 

 

 

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

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