TIL 11 인스타그램 로그인창 구현

 

위 사진이 직접 구현한 로그인창 모습이다. 아이디창과 비밀번호창에 둘 다 최소한 한글자 이상 입력이 되어야 로그인 버튼이 활성화 되는 

로직을 구현해봤다.

 

 

위 gif를 보면 나오지만 둘 중 하나라도 입력값이 없으면 로그인 버튼이 비활성화 되는것을 볼 수 있다.

저걸 어떻게 구현했는지 밑에 코드로 설명해보겠다.

 

 

inputId, inputPassword, button 변수에 각각 아이디 패스워드 input 태그와 버튼 태그를 querySelector로 담은 코드다.

그리고 밑에 inputs변수에 input태그들을 전부 다 지정하는 querySelectorAll로 지정했다.

 

01.  querySelector vs querySelectorAll

document.querySelector은 일치하는 선택자들 중 일치하는 문서내에 첫번째 요소 하나만을 반환한다.

반면에 document.querySelectorAll은 지정된 셀렉터 그룹에 일치하는 다큐먼트의 요소 리스트를 반환한다.

input태그들에다가 동일한 이벤트를 등록하기 위해서는 querySelectorAll을 통해서 요소들을 받아야 했다.

 

02.  forEach문

 

inputs.forEach((inputTag) => {
    inputTag.addEventListener('keyup', checkInput);
});

 

배열 메소드중 하나인 forEach문을 통해서 input태그들을 모은 inputs배열들을 순회하면 keyup이 이벤트가 발생했을때

checkInput 콜백함수가 실행되도록 만든 코드이다. 화살표 함수내에 들어가있는 inputTag 파라미터는 inputs배열에 

들어가있는 input태그 요소이다.

 

03.  삼항연산자

 

IdLength>0 && passwordLength>0 ? (
        button.style.opacity = 1,
        button.style.cursor = 'pointer'
    ) : (
        button.style.opacity = 0.5,
        button.style.cursor = 'default'
    )

 

아이디와 비밀번호 둘 다 길이가 1 이상이면 로그인 버튼을 활성화 시키고 아니라면 비활성화 시키는 코드이다.

삼항연산자를 통해서 구현한 코드인데 기본적인 삼항연산자의 로직은 조건 ? 참일때 실행할식 : 거짓일때 실행할식으로 만든다.

위 로직들을 통해서 인스타그램 로그인창을 구현했다.