☑️javascript - 로그인 기능 구현

instagram 클론 코딩 첫 단계, 로그인 페이지 제작하기

html과 css를 활용한 레이아웃 구성은 크게 막히는 부분이 없긴 했는데,,,
javascript으로 구현하는 로그인 기능에서 꽈악 막혔다😅

구현하고자 하는 기능

DOM으로 html에 접근하고, 이벤트를 통해 두 가지 조건(1. id를 입력했을 때, 2. 비밀번호를 6자 이상 입력했을 때)을 동시에 충족했을 때 로그인 버튼이 활성화(투명도 1)시킨다.

나의 코드

//javascript

const instagramId = document.getElementById('idBox'); // idBox : id를 입력할 수 있는 input 
const instagramPassword = document.getElementById('passwordBox'); // passwordBox : password를 입력할 수 있는 input

instagramId.addEventListener('keyup', function(){
    if(instagramId.value !== "" && instagramPassword.value.length > 5){
         document.getElementById('loginButton').style.opacity = '1';
    } // loginButton : 로그인 버튼
});

instagramPassword.addEventListener('keyup', function(){
    if(instagramId.value !== "" && instagramPassword.value.length > 5){
         document.getElementById('loginButton').style.opacity = '1';
    }
});

아직 코드리뷰를 받기 전이지만, 내가 현재까지 구현한 코드이다.

시행착오의 과정들👩‍💻

1. 단순 오타

console.log를 통해 js 파일이 아예 동작하지 않는 사실을 알았다. 이유는 html 파일에서 <script> 태그의 src에 파일명을 잘못 적어서...😩

역시 console.log의 소중함을 다시 한번 깨달았고, 오타를 내지 않는 것도 코딩에서는 너~~~무나 중요하다는 것을 절실히 느꼈다ㅎㅎ...

2. event syntax

요소.addEventListener(이벤트종류, function() { //이벤트가 일어났을 때 실행할 내용 });

이벤트를 사용할 때는 내가 이벤트를 넣고 싶은 요소를 정확히 넣어주어야 한다!

처음에 로그인 기능이 구현되지 않았던 이유는 이벤트를 적용하고 싶은 부분이 id와 password의 input이였는데 로그인 버튼에 주었기 때문이였다.(사용자가 id와 password를 입력하고 if 문 조건에 충족하면 그때 버튼이 활성화되는 기능을 구현하고 싶었기 때문!)

또한, 요소 자리에 요소가 오는 것도 중요하다!
처음에 나는 const instagramId = document.getElementById('idBox').value;를 요소 자리에 넣었는데 value 값은 요소가 아닌 점을 주의해야 한다.
만약 getElementsByClassName으로 요소를 찾으면 여러 요소가 담긴 배열이 반환되기 때문에 마지막에 [index]를 붙여 특정 요소를 찾도록 하자!

Element의 메소드 getElementsByClassName() 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection 을 반환한다. 맨 뒤에 [index]를 붙여야 요소를 반환시킬 수 있다.

3. ""

if(instagramId.value !== "" && instagramPassword.value.length > 5)

처음에는 if 문 내에서 id 값이 없는 경우를 undefined로 표기했다. 하지만, undefined는 변수는 존재하나 어떠한 값으로도 할당되지 않아 자료형이 정해지지 않은 상태를 의미하기 때문에 적절하지 않다. 따라서 ""를 사용했다.

4. id와 password 모두 event를 적용하고 싶다면?

두가지 input(id, password) 요소에 이벤트를 적용하고, if 문을 활용하여 두가지 조건이 충족 되었을 때만 로그인 버튼의 투명도가 1이 되도록 설정한다.

처음에는 두가지 input 요소를 한번에 컨트롤 하기 위해 div를 부모 태그로 주었지만 실패... if 문에서 두가지 조건이 만족되었을 때만 실행되도록 설정했기 때문에 분리해도 상관없다는 것을 알 수 있었다.

instagramId.addEventListener('keyup', function(){
    if(instagramId.value !== "" && instagramPassword.value.length > 5){
         document.getElementById('loginButton').style.opacity = '1';
    }
}); // id input에 event

instagramPassword.addEventListener('keyup', function(){
    if(instagramId.value !== "" && instagramPassword.value.length > 5){
         document.getElementById('loginButton').style.opacity = '1';
    }
}); // password input에 event

keyup event
keyup event occurs when the user releases a key (on the keyboard)
keyup event 적용 예시