사용자 이름, 이메일, 비밀번호를 입력해 회원가입하는 페이지 구현을 연습했다.

와이어 프레임

회원가입 폼은 input 4개와 button 1개로 구성되어 있고 정가운데 위치한다.

기능 목록

1. Username의 유효성 검사
   • 빈 문자열인지 검사
   • 입력 값의 길이가 특정 범위 안에 있는지 검사
2. Email의 유효성 검사
   • 빈 문자열인지 검사
   • 이메일 형식에 맞는지 검사
3. Password의 유효성 검사
   • 빈 문자열인지 검사
   • 입력 값의 길이가 특정 범위 안에 있는지 검사
4. Confirm Password의 유효성 검사
   • 빈 문자열인지 검사
   • Password와 값이 동일한지 검사
5. Submit 버튼 클릭 시 4가지 input 유효성 검사
6. 유효성 검사를 통과했다면 테두리를 초록색으로 변경
7. 유효성 검사를 통과하지 못했다면 테두리를 빨간색으로 변경하고 에러 메시지 보이기

완성본

완성본(Github) 바로가기

배운점

DOM 요소 가져오기

html 문서에 있는 요소를 자바스크립트 파일에서 어떻게 참조할 수 있는지 알게 되었다.

id로 가져오기: getElementById()

document.getElementById({id 속성값});

html 파일에서 id를 부여한 요소를 참조하려면 다음과 같이 getElementById 메서드를 사용해 요소를 가져올 수 있다.

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

특정 요소의 부모 요소 가져오기: parentElement()

{자식요소}.parentElement;

html의 element들은 parentElement 프로퍼티를 가지고 있으며, 자신의 부모 요소를 프로퍼티 값으로 가지고 있다.

html이 다음과 같이 작성되어 있을 때, input은 parentElement 프로퍼티에 div를 가지고 있다.

<div id="parent">
	<input id="child" type="text" class="input" />
</div>

document.getElementById('child').parentElement; // div

셀렉터로 가져오기: querySelector(), querySelectorAll()

document.querySelector({셀렉터})

css에서 html 요소에 접근할 때 사용하는 셀렉터와 querySelector라는 메서드로 해당 셀렉터로 접근할 수 있는 첫 번째 요소를 가져올 수 있다.

querySelectorAll 메서드를 쓰면 해당 셀렉터에 해당하는 모든 요소를 가져올 수 있다.

<div id="parent">
	<input id="child" type="text" class="input" />
</div>

<ul>
	<li>one</li>
	<li>two</li>
	<li>three</li>
</ul>

// querySelector
document.querySelector('#parent'); // <div..
document.querySelector('.input'); // <input..
document.querySelector('ul li'); // <li>one</li>

// querySelectorAll
document.querySelectorAll('ul li'); // <li>one.., <li>two.., <li>three..

DOM의 class 변경하기

css를 사용하지 않는 앱 개발 방식에 익숙해져있어서 visibility 여부나 색깔 등 요소에게 변화를 주려면 자바스크립트 파일에서 해당 속성에 접근해 직접 변경해주는 식으로 개발하는 줄 알았는데, 해당 속성을 가지는 class를 넣어주는 방식으로도 개발할 수 있다는 것을 처음 알게되었다.

예를 들어, 유효성 검사의 통과 여부에 따라 input의 border 색상을 변경하고, 통과하지 못한 경우에는 기존에 보이지 않게 숨겨두었던 에러 메시지를 출력해야 하는 상황을 살펴보자.

1. border 색상 변경하기

   border 색상이 변경되어야 하는 경우는 유효성 검사가 성공(success)한 경우와 실패한 경우 submit하는데 에러가 발생한 경우(error) 이렇게 두 가지가 있다.

   .form-control input {
     border: 2px solid #f0f0f0;
     border-radius: 4px;
     display: block;
     width: 100%;
     padding: 10px;
     font-size: 14px;
   }
   
   .form-control.success input {
     border-color: var(--success-color);
   }
   
   .form-control.error input {
     border-color: var(--error-color);
   }

   우선 유효성 검사 전에는 부모 요소인 div를 .form-control 이라는 클래스명으로 만들어 자식 요소인 input에 기본적인 디자인이 보이도록 그려놓는다.

   유효성 검사가 성공했다면 기존 클래스에 success라는 클래스를 추가한 .form-control.success로, 실패했다면 기존 클래스에 error라는 클래스를 추가한 .form-control.error로 클래스를 변경해주면 된다.

   이런 식으로 작성하면 직접 border-color 속성에 접근해서 색상을 바꿀 필요가 없게되며, 클래스명으로 코드에 의미를 더해줄 수 있기 때문에 가독성도 좋아질 수 있다.

   
   

   이제 자바스크립트 파일에서 클래스명을 변경해줘야 하는데, 특정 요소의 클래스 이름은 className 프로퍼티로 참조할 수 있다. className 속성에 새로운 클래스명을 재할당해주면 해당 요소의 클래스를 변경할 수 있다.

   요소의 클래스명을 알고 싶다면 className을 참조한다.

   // 유효성 검사 성공 시
   formControl.className = 'form-control success';
   
   // 유효성 검사 실패 시
   formControl.className = 'form-control error';

   
   

   결과적으로 input의 부모 요소인 div는 form-control 클래스에 success 또는 error가 추가되었기 때문에 자식 요소인 input은 색상이 변경된다.

2. 숨겨뒀던 에러 메시지 보이기

   submit 버튼을 누르기 전과 유효성 검사에 성공한 경우에는 에러 메시지를 보여줄 필요가 없기 때문에 visibility가 hidden으로 설정된 상태다.

   .form-control small {
     color: var(--error-color);
     position: absolute;
     bottom: 0;
     left: 0;
     visibility: hidden;
   }

   
   

   테두리 색상을 바꾸는 것과 마찬가지로, error가 발생한 경우에 한해서 visibility를 변경해주면 되기 때문에 error라는 클래스를 추가로 작성한 다음 자바스크립트 파일에서 클래스명을 변경하면 된다. 이때 원래 값이었던 hidden은 visible로 상쇄(cascading)된다.

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

   // 유효성 검사 실패 시
   formControl.className = 'form-control error';

   
   

   따라서 form-control과 error 클래스 밑에 있는 자식 요소 small은 visibility가 visible로 변경된다.

변수에 색상값 담기

특정 색상 값을 여러 곳에서 사용하는 경우, 매번 색상 코드를 찾아 치기엔 너무나 번거롭다.

이런 경우를 위해 프로그래밍 언어처럼 css에서도 색상 값을 변수에 담아 사용할 수 있다.

이번 프로젝트에서 성공은 초록색(#2ecc71), 에러는 빨간색(#e74c3c)으로 표현하였다. 이를 다음과 같이 변수화할 수 있다.

:root {
  --success-color: #2ecc71;
  --error-color: #e74c3c;
}

이 변수는 다음과 같이 변수명을 var로 감싸 사용하면 된다. 여러 번 색상 값 입력할 필요 없이 복잡한 값의 색상을 사용할 수 있게 된다!

var({변수명})

.form-control.success input {
  border-color: var(--success-color);
}

.form-control.error input {
  border-color: var(--error-color);
}

더 공부해야 할 키워드

• css에서 root의 역할
• 세 자리 색상 값
• position: absolute
• font-family 작성법 (sans-serif)