구현 과정

로그인 페이지

instagram 페이지를 통해 체크한 구현 목록
1. ID와 비밀번호 입력값에 따른 로그인 버튼 시각적, 물리적 활성화
2. 메인 페이지로 이동

HTML - input container

<div class="input_container">
    <input type="text" class="id" placeholder="전화번호, 사용자 이름 또는 이메일" />
    <input type="password" class="password" placeholder="비밀번호" />
    <button type="submit" class="log_in_button"
            onclick="location.href='/html/main.html' "
            disabled>로그인</button>
</div>

js logic

const inputItems = document.querySelector(".input_container");
const inputId = inputItems.querySelector(".id");
const inputPw = inputItems.querySelector(".password");
const logInButton = inputItems.querySelector(".log_in_button");

const loginEventTrue = () => {
    logInButton.disabled = false;
    logInButton.style.cursor = "pointer";
    logInButton.style.backgroundColor = "#0095f6";
};

const loginEventFalse = () => {
    logInButton.disabled = true;
    logInButton.style.cursor = "default";
    logInButton.style.backgroundColor = "#B9DFFC";
};

inputItems.addEventListener("keyup", (logInValid) => {
    const inputValid = inputId.value.length >= 2 
    && inputPw.value.length >= 5 
    && inputId.value.includes("@");
    inputValid ? loginEventTrue() : loginEventFalse();
});

처음 dom을 사용할 때 이벤트리스너를 문서 전체에 사용했다. 코드리뷰를 통해 이런 방식은 극단적으로 생각했을 때 장문의 코드에 적용할 경우 성능 이슈가 생길 수 있는 것을 알게 됐다. (너무 당연한 것...)

1.div 컨테이너를 호출해 inputItems로 선언
2.inputItems를 활용해 다른 변수들 선언
3.이벤트리스너를 div 컨테이너에 적용해 버블링! 자식 요소들에 이벤트를 위임했다.
4.패스워드의 최소길이와 includes를 통해 id값에 @가 포함되었는지를 조건으로 설정했다.
5.3항 연산자를 활용해 앞서 선언한 loginEvent를 boolean에 따라 활성화시켰다.
6.시각적인 버튼 활성화는 인라인 스타일을 먹이는 것으로 해결.
7.물리적인 활성화는 disabled를 해제하는 것으로 해결!
8.메인페이지 이동과 관련해서는 초기 코드에 a 태그를 사용했으나 mdn을 확인한 결과 a코드에는 disable이 적용되지 않아 버튼 자체에 onclick 을 사용해 해결했다.