Westagram 5번째 미션으로 '아이디, 패스워드 유효성 검사를 통한 로그인 버튼 활성화'를 도전했다.

구현 목표

아이디, 패스워드 유효성 검사 구현

구현 사항 설명

조건

• id는 '@' 포함해야합니다.
• pw는 5글자 이상이어야 합니다.
• 두 조건을 만족 시에만 로그인 버튼을 활성화 시키세요.

조건에는 없지만, 사용자 입장에서 안내 멘트 없이 무조건 버튼을 비활성화시킨다면 굉장히 답답할 것 같다.
또 버튼을 눌러 제출 후 alert 창으로 틀렸다고 안내해도 화가 날 것 같다.
그 때문에 만약 사용자가 조건과 다른 인풋 값을 입력하면 인풋 아래 붉은 글씨로 안내 멘트가 나오는 기능을 따로 추가했다.

구현 사항

1. id에 '@' 이 없을 경우 email input 밑에 "이메일에는 @가 있어야합니다." 안내 메세지 추가 기능 구현
2. pw가 5글자가 아닌 경우 password input 밑에 "비밀번호는 5자리 이상이어야합니다." 안내 메세지 추가 기능 구현
3. id와 pw 둘 다 조건 충족 시 로그인 버튼 활성화 기능 구현

구현

1. id 유효성 검사

조건 뽀개기

• id에 '@'문자 포함 여부 확인

1. HTML에 있는 로그인 email input 요소를 변수 userEmail에 할당한다.
2. userEmail.value를 통해 사용자가 입력한 값을 불러온다.
3. 불러온 입력값이 '@'을 포함하는지 확인한다.
   -> 입력값은 문자열이기 때문에 String.prototype.includes()메서드를 사용할 수 있다.

• id에 '@'문자가 없을 경우, email input 밑에 "이메일에는 @가 있어야합니다." 안내 메세지 추가

4. HTML에서 email input 밑에 에러메세지를 넣을 수 있는 span 태그를 추가한다.
5. CSS에서 추가한 span 태그 스타일 값을 설정한다.
6. id에 '@'문자가 없을 경우와 있을 경우, 즉 조건에 따라 안내 메세지를 추가하므로 삼항 연산자를 사용할 수 있다.
   (if문이 아닌 삼항 연산자를 사용한 이유는 아래에)

// 1. HTML에 있는 로그인 email input 요소를 변수 userEmail에 할당한다.
const userEmail = document.getElementById("userEmail");

// 2. userEmail.value를 통해 사용자가 입력한 값을 불러온다.
// 3. 불러온 입력값이 '@'을 포함하는지 확인한다. 
let isEmailValid = userEmail.value.includes("@");

// 4. HTML에서 email input 밑에 에러메세지를 넣을 수 있는 span 태그를 추가한다.
// 5. CSS에서 추가한 span 태그 스타일 값을 설정한다.
// 6. 삼항 연산자를 통해 안내 메세지를 구현한다.
isEmailValid ? emailErrorMs.innerHTML = "" : emailErrorMs.innerHTML = "이메일에는 @가 있어야합니다.";

2. pw 유효성 검사

조건 뽀개기

• pw가 5글자 이상인지 확인

1. HTML에 있는 로그인 password input 요소를 변수 userPw에 할당한다.
2. userPw.value를 통해 사용자가 입력한 값을 불러온다.
3. 불러온 입력 길이 값이 5이상인지 확인한다.
   -> 입력 값은 문자이기 때문에 String.length를 사용할 수 있다.

• password input 밑에 "비밀번호는 5자리 이상이어야합니다." 안내 메세지 추가 기능 구현

4. HTML에서 password input 밑에 에러메세지를 넣을 수 있는 span 태그를 추가한다.
   이때 email과 같은 스타일의 안내 메세지이기 때문에 이메일과 같은 class명을 사용하고 id명만 다르게 설정한다.
5. 이메일에서 추가한 span 태그 스타일 값을 그대로 사용한다.
6. 비밀번호가 5자리 이상인 경우와 아닌 경우, 즉 조건에 따라 안내 메세지를 추가하므로 삼항 연산자를 사용할 수 있다.

// 1. HTML에 있는 로그인 password input 요소를 변수 userPw에 할당한다.
const userPw = document.getElementById("userPw");

// 2. userEmail.value를 통해 사용자가 입력한 값을 불러온다.
let pwValueLength = userPw.value.length;

// 3. 불러온 입력 길이 값이 5이상인지 확인한다. 
let isPwValid = pwValueLength >= 5;

// 4. HTML에서 password input 밑에 에러메세지를 넣을 수 있는 span 태그를 추가한다.
// 5. 이메일에서 추가한 span 태그 스타일 값을 그대로 사용한다.
// 6. 삼항 연산자를 통해 안내 메세지를 구현한다.
isPwValid ? (pwErrorMs.innerHTML = "") : (pwErrorMs.innerHTML = "비밀번호는 5자리 이상이어야합니다.");

3. 로그인 버튼 활성화

조건 뽀개기

• id와 pw 둘 다 조건 충족 시

1. 불리언 결과 값을 담을 수 있는 변수 isInputValid를 선언한다.
2. 두 조건을 모두 만족해야 하므로 AND 논리 연산자를 사용한다.
   위에서 선언한 isPwValid, isEmailValid 두 변수 값이 모두 true인지 확인한다.

• 로그인 버튼 활성화 - 버튼 색상 부분

3. isInputValid가 true값을 가질 경우 로그인 버튼색상의 opacity 값을 1로 변경한다.
4. isInputValid가 false값을 가질 경우 로그인 버튼색상의 opacity 값을 0.3으로 변경한다.

• 로그인 버튼 활성화 - 버튼 disabled 부분

5. isInputValid가 true값을 가질 경우 버튼을 활성 요소로 변경한다.
6. isInputValid가 false값을 가질 경우 버튼을 비활성 요소로 변경한다.

// 1. 불리언 결과 값을 담을 수 있는 변수 isInputValid를 선언한다.
// 2. 두 조건을 모두 만족해야 하므로 AND 논리 연산자를 사용한다.
let isInputValid = isEmailValid && isPwValid;

// 3. isInputValid가 true값을 가질 경우 로그인 버튼색상의 opacity 값을 1로 변경한다.
// 4. isInputValid가 false값을 가질 경우 로그인 버튼색상의 opacity 값을 0.3으로 변경한다.
isInputValid ? (loginSubmitBtn.style.backgroundColor = "var(--color-blue)") : (loginSubmitBtn.style.backgroundColor = "var(--color-opacity-blue)");

// 5. isInputValid가 true값을 가질 경우 버튼을 활성 요소로 변경한다.
// 6. isInputValid가 false값을 가질 경우 버튼을 비활성 요소로 변경한다.
loginSubmitBtn.disabled = !isInputValid;

완성

성장 포인트

if문이 아닌 삼항 연산자를 사용한 이유

if문과 삼항 연산자 둘 다 가능하다.
하지만 구현 사항 조건에 삼항연산자를 사용하라고 적혀 있었다.
왜 굳이 삼항 연산자를 써야 할까 의문이 들었다.
if문은 블록 실행 컨텍스트를 생성하고 삼항 연산자를 사용하면 더 효율성 있는 게 아닌가 생각했다.
그래서 고민 끝에 조사한 내용과 질문을 정리해 래영님(멘토님)께 질문했다. 답변이 굉장히 명쾌하셨다!

나: "왜 삼항 연산자를 사용해야 하는지 고민을 해봤는데, if문을 사용하면 실행 컨텍스트에 블록 문이 추가되고 삼항 연산자를 쓰면 추가되지 않기 때문인가요?"
래영님: "그런 맥락으로 쓰라고 하기보다 앞으로 배울 리엑트에서도 삼항 연산자를 많이 사용할 거라 익숙해지시라고 사용하라 한 거예요 😅 (이후 최근 리엑트 동향과 다른 질문에 대한 말씀···)"

리엑트에 발만 살짝 담군 현재 상태로 생각해보니 JSX에 삽입할 수 없는 if문보다 훨씬 간결한 삼항 연산자를 통해 값을 지정했었다.
결론은 다음 주에 배울 리엑트를 위한 큰 그림이었다! 🤣 🤣 🤣

CSS

개발자 도구 element 패널로 CSS 리팩토링하는 방법을 배웠다.
이전에는 CSS 파일에서 코드를 정검했었는데 이번 프로젝트를 통해 element 패널에서 클릭해보며 CSS 디버깅을 실행했다.
만약 스타일이 변하지 않는다면 결국 필요없는 속성을 지정했다는 뜻이므로 삭제한다.
element 패널 디버깅 방법으로 속성이 정말로 필요한가를 생각할 수 있었다.

Git

서버에 업로드한 커밋 메세지를 삭제하는 방법과 협업 시 삭제하면 안되는 이유를 배웠다.