[JavaScript] Westagram : log-in page (feat. wecode)

Minjae JO·2022년 7월 31일

CSS JavaScript html

id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되도록 해주세요.
원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!

html 코드

자바스크립트 코드

코드 작성 전 구상

고민한 부분

활성화, 비활성화 기능은 어떻게 구현해야 할까?

해결 방법

html input태그의 requierd처럼, disabled 속성으로 button 및 input의 비활성화가 가능하다는 것을 확인하였다.
또한 자바스크립트에서 .disabled로 속성을 선택하여 활성화, 비활성화를 조작할 수 있음을 확인하였다.

맨 처음 짠 자바스크립트 코드는 다음과 같다.

const usernameInput = document.getElementById("input_username");
const passwordInput = document.getElementById("input_password");
const loginBtn = document.getElementById("login_btn");

passwordInput.addEventListener("keyup", () => {
  if (usernameInput.value.length > 0 && passwordInput.value.length > 0) {
    loginBtn.disabled = false;
    loginBtn.classList.remove("login_btn-disabled");
    loginBtn.classList.add("login_btn-abled");
  } else {
    loginBtn.disabled = true;
  }
});

passwordInput.addEventListener("keyup", loginPossible);

코드 작성 후 리뷰

위 코드의 문제점

만약 사용자가 입력을 키보드가 아닌 복사-붙여넣기 등 마우스로만 한다면?
나는 이벤트 발생을 패스워드 인풋 창에만 걸었는데, 사용자가 패스워드를 먼저 입력하고 아이디를 나중에 입력한다면 활성화가 가능한가?

해결 방법

사용자의 키보드, 마우스 입력을 모두 감지하기 위해, "keyup" 이벤트가 아닌 "input" 이벤트를 듣도록 수정하였다.
이벤트 발생을 form 태그 안의 모든 input창에서 듣게 하기 위해, 패스워드 인풋에서만 감지하였던 이벤트를 form태그 전체에서 감지할 수 있도록 수정하였다.

const loginForm = document.querySelector("#login-form");
const usernameInput = document.getElementById("input_username");
const passwordInput = document.getElementById("input_password");
const loginBtn = document.getElementById("login_btn");

const loginAbled = () => {
  loginBtn.classList.remove("login_btn-disabled");
  loginBtn.classList.add("login_btn-abled");
  loginBtn.disabled = false;
};

const loginDisabled = () => {
  loginBtn.disabled = true;
};

const loginPossible = () => {
  usernameInput.value.length > 0 && passwordInput.value.length > 0
    ? loginAbled()
    : loginDisabled();
};

loginForm.addEventListener("input", loginPossible);

삼항 조건 연산자를 사용하기 위해, 함수를 분리하여 코드를 다시 짜 보았다.

새롭게 배운 점

input 이벤트 감지 부분을 통해, 사용자 입장에서 고민해보는 것이 가장 중요한 것이라는 걸 깨닫게 되었음.
함수 로직이 같은 경우, 함수를 분리해서 코드를 재활용할 수 있도록 코드를 구성하도록 하자.

반성하는 점

DOM에 querySelector로 접근할 때, 태그, id, class 등 선택자를 잘 확인하고 접근할 것. id를 class로 접근하는 등의 사소한 실수를 줄이자.
한 기능을 구현할 때, 알고리즘을 더 세세한 단계로 나누어 생각하자. 코드 작성 전, 반드시 알고리즘을 짜본 후 착수하도록 하자. (함수를 어떻게 분리해야 하는지)