BOOKREST - 회원가입 Vanilla JS (4)

한슬희·2021년 7월 26일
11

LIKELION

목록 보기
4/7
post-thumbnail

회원가입, 로그인 창을 많이 만들어 본 것 같다. (내 기준 ..🤫)
그래서 이번 BOOKREST에서는 안 해봤던 기능도 추가해서 업그레이드된 버전으로 만들어보려고 노력했다.

이용약관

전에는 항상 입력받는 폼만 만들었었는데 실제 서비스라 생각해보니 이용약관이 있는 게 더 좋을 것 같다는 생각이 들었다. 🤔🤔

이용약관 기본 내용을 구글링해 보니 내용이 다 나와 있었다.
회사 이름을 BOOKREST로 바꾸고 개인정보 항목을 BOOKREST에서 입력받는 것들로 바꾸어 사용했다.

html

<div class="signupBoxTool__signupBox__terms__title">
        <h3>개인정보 수집 및 이용</h3>
        </div>
        <div class="signupBoxTool__signupBox__terms__summary">
          <dl>
              <dt>
                  시행일자: 2021년 08월 14일
              </dt>
              <br>
              <dd>
                  BOOKREST(이하 "회사" 또는 "BOOKREST"이라고 함)은 통신비밀보호법, 전기통신사업법, 정보통신망 이용촉진 및 정보보호 등에 관한
                  법률 등 정보통신서비스제공자가 준수하여야 할 관련
                  법령상의 개인정보보호 규정을 준수하며, 관련 법령에 의거한 개인정보취급방침을 정하여 이용자 권익 보호에 최선을 다하고
                  있습니다.<br /><br />

                  본 개인정보취급방침은 다음과 같은 내용을 담고 있습니다.<br /><br />
              </dd>

css

.signupBoxTool__signupBox__terms__summary {
  height: 150px;
  overflow: auto;
  padding: 7px;
  margin-bottom: 0;
}

html dl태그는 설명 목록을 나타낸다.
dl은 dt로 표기한 용어와 dd 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성해 이용약관을 쓸 때 이를 이용하였다.

css를 이용해 틀을 잡아주어 안에서 스크롤 되게 만들었다.

이렇게 완성이 되었다. 😉
이제 checkbox를 두어 이용약관 두개 모두 동의를 안할 시 넘어가지 못하도록 설정해보러 가자 👀

이용약관 JavaScript

const termsCheckbox = (event) => {
  event.preventDefault();
  const agreement1 = document.querySelector(".js-agreement1");
  const agreement2 = document.querySelector(".js-agreement2");
 
  if (!agreement1.checked) {
    window.alert("이용약관 이용동의는 필수입니다.");
  } else if (!agreement2.checked) {
    window.alert("개인정보의 수집 및 이용동의는 필수입니다.");
  } else {
    signupAnimate();
  }
};

동의, 동의 안 함 버튼을 두었고 먼저, 첫 번째 이용약관 (agreement1)을 체크 안 했다면 alert로 경고 메시지가 뜨도록 설정하였고 두 번째 이용약관(agreement2)도 마찬가지로 alert를 설정하였다.

JavaScript

const onNoregisterClick = (event) => {
  event.preventDefault();
  if (window.confirm("회원가입을 취소하고 BOOKREST 첫 화면으로 돌아가시겠습니까?")) {
    location.replace("/");
  }
};

동의 안 함 버튼을 눌렀을 시에는 회원가입을 못 하도록 설정하였다.
replace() 메소드는 Location현재 리소스를 제공된 URL의 리소스로 바꾸는 기능을 한다.

replace()는 현재 페이지를 새로운 페이지로 덮어씌우기 때문에 이전 페이지로 이동이 불가능하다.

이렇게 해서 모든 이용약관을 동의 후 동의 버튼을 누르면 정보입력 폼이 나오게 된다.


정보입력

회원가입에서 받을 정보

  1. 이름
  2. 학부 / 전공
  3. 학번
  4. 이메일
  5. 비밀번호
  6. 전화번호

그냥 입력폼만 있는 건 BOOKREST랑 안어울려 ... 😣 양식을 두자 !

정보입력 양식

  1. 이름이 2자 이상
  2. 학번은 9자리 (우리 학교 기준)
  3. 이메일 정규표현식에 맞아야 함
  4. 비밀번호는 6자리 이상
  5. BOOKREST 이용 규정에 동의하는 checkbox에 체크해야 함

그 외

학부 / 전공은 select 태그로 총 네 개의 학부 중 하나를 선택하도록 (우리 학교 기준)
전화번호는 그냥 입력받을지 막대기(-) 할지 아직 고민중이다.

html

<div class="signupBoxTool__signupBox__form-control">
   <div class="signupBoxTool__signupBox__form-control__title">
          <span>이름</span>
   </div>
   <input type="text" class="name input" placeholder="Enter username" />
          <small>Error message</small>
</div>

input 태그로 입력을 받는 곳을 두고 아래에 error message가 들어갈 곳을 만들어 준다.

css

.signupBoxTool__signupBox__form-control small {
  font-size: 11px;
  font-weight: 500;
  bottom: 0;
  left: 0;
  visibility: hidden;
}

.signupBoxTool__signupBox__form-control.error small {
  visibility: visible;
}

visible - 요소가 보이고, hidden - 요소가 숨겨진다 (그려지지 않음).
css를 이렇게 설정해두고 Javascript로 코드만 짜면 된다.

Javascript

const loadName = () => {
  if (name.value.length === 0) {
    errorRed(name, `사용자 이름은 2자 이상이어야 합니다`);
  } else if (name.value.length >= 2) {
    successLight(name);
  } else {
    errorRed(name, `사용자 이름은 2자 이상이어야 합니다`);
  }
};

const signInit = () => {
  name.addEventListener("input", loadName);
  email.addEventListener("input", checkEmail);
  password.addEventListener("input", checkPassword);
  studentID.addEventListener("input", checkstudentID);
  checkbox.addEventListener("change", handleCheckboxForm);

  signupForm.addEventListener("submit", (e) => {
    e.preventDefault();
    checkPassword(password, 1, 6);
    loadName();
    checkEmail(email);
    checkstudentID(studentID);
    handleCheckboxForm();
  });
};

signInit();

양식이 많아 이름만 기록해야겠다..
먼저 등록 버튼을 누를시 (submit) 아래 함수들이 실행되게 설정하였고 또한 input 창에 내용을 적을 때 위와 같은 함수가 실행되도록 하였다.

loadName 함수는 사용자가 입력한 길이가 0일 경우 아래와 같은 error메시지가 뜨도록 하였다.
``은 "백틱(backtick)" 이라고 하는데 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals 을 참고하면 좋을 것 같다.

사용자가 입력한 길이가 2 이상일 경우 successLight라는 함수를 실행하는데 successLight 함수는 아래와 같이 error를 classList에서 빼주는 기능이다. 즉 양식에 맞아 에러 메시지가 안 뜨도록 한 것이다.

Javascript

const successLight = (input) => {
  const formControl = input.parentElement;
  formControl.classList.remove("error");
};

이외

const checkEmail = () => {
  const emailRule =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (emailRule.test(email.value.trim())) {
    successLight(email);
  } else {
    errorRed(email, `이메일이 유효하지 않습니다`);
  }
};

이메일 정규표현식은 구글링해보면 쉽게 나온다.
나중에 시간이 된다면 나머지 함수들도 적어보도록 하겠다.


결과

에러 메시지가 안 떴을 때

아무것도 안 쓰고 등록 버튼을 눌렀을 때

실행해보면 input창에 정보양식에 맞게 입력하면 해당 오류 메시지가 사라진다.


느낀 점

이번 회원가입 개발을 통해 checkbox의 체크 여부를 확인할 때 checked라는 속성을 사용한 것, 매개변수를 받았는지 안 받았는지, 세미콜론 항상 주의하기, 변수명 카멜케이스로 동사형으로 지었는지 등등을 생각하며 Javascript 코드를 짜는 데 도움이 되었다.

구글링을 통해 다양한 속성들을 배울 수 있었고 코드를 보고 이해하면서 기능을 만들어 나가는 게 어렵고 시간도 걸렸지만, 결과물을 보니 뿌듯했고 뭘 더 배워야 하는지 느끼게 되었다.

다음에 회원가입 폼을 만들게 된다면 무엇을 해볼까 🤔😊

profile
🧡 Frontend developer / 어제보다 오늘 더 성장한 개발자

4개의 댓글

comment-user-thumbnail
2021년 7월 27일

항상 배우고 노력하는 자세가 너무 좋네요 !! 저도 자극 받고 갑니다 🔥🔥🔥🔥🔥
좋은 정보 감사해용 ~~~

1개의 답글
comment-user-thumbnail
2021년 7월 29일

👍👍

1개의 답글