회원가입 페이지 만들기 (유효성 검사)

회원가입을 하다보면 대부분 id는 8글자 이상, 비밀번호는 숫자/특수문자/영문자를 조합해서 만들라고 한다. 귀찮아서 대충 입력하면, 다시 입력하라는 경고 문구(?)같은게 나온다. 즉, 정해진 형식에 맞게 입력해야만 하도록 조건을 지정해두고, 조건에 맞지 않는 경우에는 다시 입력하라는 피드백을 주는 것이다. 이렇게 입력값이 '유효한지'를 검사하는게 바로 유효성 검사(form validation)이다.

 

이런 '유효성 검사'를 통해 회원가입을 하는 웹페이지를 만들어봤는데, 자세한 코드는 생략하고 새로 배운 기능이나 기억할만한 것들만 간략히 정리해보려고 한다. 전체적인 과정은 아래와 같은 순서로 진행했다.

 

1. 목업 만들기 (HTML, CSS)
2. 유효성 검증 함수 구현하기
3. 요소들에 이벤트 연결하기

 

1. 목업 만들기

먼저 기본적인 틀을 잡기 위해 HTML로 구조를 잡고, CSS로 디자인을 해 목업부터 만들었다. 

 

 

그리고 이건 나중에 모든 기능이 작동하는 것을 확인한 후, (내일은 크리스마스니까🎅🏻) 크리스마스 버전으로 CSS 디자인만 바꾼 모습이다.

 

 

 

✔️ background-image로 사진 배경 설정하기

배경을 단색이 아닌 이미지로 하고 싶어서, 무료 이미지 공유 사이트인 unsplash에서 이미지 url를 가져와 배경으로 사용했다. 이렇게 웹상에서 url을 가져와 배경 이미지로 사용하고 싶으면 background-image : url(); 을 사용하면 된다. 참고로 그냥 주소창에 있는 url을 복붙해오는 것이 아니라, 여기에 설명된 형식으로 url을 작성해줘야 정상적으로 이미지를 불러올 수 있다. background-size:cover;은 배경을 화면 전체에 넣겠다는 뜻이다. 

background-image: url("https://source.unsplash.com/IHpI0OVUzRk/1600x900"); 
background-size: cover;

 

✔️ box-shadow를 이용해 이미지 위에 불투명한 레이어 깔기

자세히 보면 배경으로 사용한 원본 이미지 위에 불투명한 검정 레이어를 하나 더 깔아 준 것을 볼 수 있다. 원본 사진이 너무 밝아서, 입력창이나 버튼 등 다른 요소들이 처음에 잘 안보여서 배경을 좀 어둡게 하려고 시도해 본 것인데 box-shadow라는 속성을 이용했다.

box-shadow는 요소에 여러 그림자 효과를 입혀주는 속성인데, 차례대로 요소에서의 수평/수직 거리(오프셋), 확산 정도, 색상을 의미한다. rgb값에 투명도를 의미하는 a를 더해 총 네 개의 값으로 이루어진 rgba를 사용해 검정색 단색 박스를 불투명하게 만들었다. inset은 그림자가 움푹 들어간 것처럼 만들어주는 속성값이다.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.6);

 

 

2. 유효성 검증 함수 구현하기

• Id : 8글자 이상 입력할 것
• Password : 숫자, 영문, 특수기호를 포함해 8글자 이상 입력할 것
• Confirm Password : Password에 입력한 값과 같을 것

 

이렇게 세 가지 조건을 먼저 함수로 먼저 작성해두었다. Id와 Confirm Password의 경우에는 비교 연산자인 >=와 ===를 사용해 쉽게 작성할 수 있었지만, Password는 조건이 복잡해 아래와 같은 '정규 표현식'을 사용해야 했다. 사실 구글링을 하면 이렇게 자주 쓰이는 정규 표현식은 쉽게 찾을 수 있지만 언젠가 또 만나게 될 개념인 것 같아서, 전에 블로깅 해뒀던 정규표현식 관련 글에 응용해 사용하는 방법에 대해서도 추가해 두어야겠다. 

function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}

 

 

3. 요소들에 이벤트 연결하기

버튼을 마우스로 클릭하고, 입력창에 키보드로 입력하는 등 HTML로 만든 여러 UI들을 Javascript가 인식하고 사용할 수 있도록 요소들에 이벤트를 연결해 주었다. 이 과정은 querySelector로 요소들을 선택하고, 마우스 클릭 이벤트를 의미하는 onclick, 키보드 입력을 의미하는 onkeydown 등의 이벤트를 부여함으로써 완성할 수 있었다. 그리고 이렇게 연결된 요소의 이벤트가 발생할 때마다 특정한 함수를 실행시킬 수 있게 했다. 2번 과정에서 작성했던 함수와 이벤트를 다루는 이벤트 핸들러(Event Handler)함수들이 이에 해당한다.

 

// 요소 선택
const inputName = document.querySelector('#inputName');
const validName = document.querySelector('#validName');

// 요소에 이벤트 연결 + 이벤트 발생 시 핸들러함수 실행
inputName.onkeydown = handleInputName;

// 핸들러 함수 예시
function handleInputName(){
  if(moreThanLength(inputName.value)){
    validName.classList.remove('hidden');
    inputName.classList.remove('invalid');
  }
  else{
    validName.classList.add('hidden');
    inputName.classList.add('invalid');
  }
}

// 유효성 함수 (2번 과정에서 작성)
function moreThanLength(str) {
  return str.length >= 8;
}

 

 

이렇게 크게 세 단계로 나누어서 유효성 검증 웹페이지를 만들어 보았다. 간단한 기능처럼 보이지만 직접 구현해보면서 UI 요소들과 이벤트, 그리고 각각의 함수들을 서로 어떤 식으로 연결해야 하는 지에 대한 큰 그림을 그릴 수 있었다. 무작정 복잡한 기능을 구현하는 데 뛰어들기보다는 이렇게 서비스의 일부분만 먼저 구현해보는게 전반적인 과정을 이해에 더 도움이 되는 것 같다!