[chrome app 코딩 챌린지] 1. 로그인 화면

노마드 코더의 바닐라 JS 수업을 들으며 챌린지를 하고 있는데 Window 95 컨셉으로 잡고 작업 중이다. (덕분에 디자인 할 일이 거의 없다. 챌린지는 굉장히 촉박한데 시간은 아끼면서 퀄리티는 챙기는 방법이라 좋은 선택이라 생각하고 있다) 개중 로그인 화면 로직을 짜고 있다. Login 버튼을 Submit 하면 로그인 화면이 사라지고 유저 화면이 뜨는 방식인데 submit 이벤트와 display: none css를 사용하였다.

컨셉 레퍼런스 

코드 리뷰

<main class="main__greeting"></main>
<main class="main__user-interface hidden"></main>

<form class="login__form">
    <label for="name"> <u>N</u>ame: </label>
    <input id="name" type="text" required autocomplete="off"> <br>
    <label for="password"> <u>P</u>assword: </label>
    <input id="password" type="password"  required minlength="4" autocomplete="off"> <br>
    <input type="submit" value="Login...">
</form>

.hidden {
    display: none;
}

const greeting = document.querySelector(".main__greeting");
const userInterface = document.querySelector(".main__user-interface"); 

const loginForm = document.querySelector(".login__form");
const loginInput = document.querySelector(".login__form input");

const HIDDEN_CLASSNAME = "hidden" 

function onLoginSubmit(event) {
    event.preventDefault();
    greeting.classList.add(HIDDEN_CLASSNAME);
    userInterface.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

• variables time
  1. 먼저 로그인 화면과 유저 화면을 변수로 할당해 선언해준다.
  2. 그 다음 id와 password를 입력하고 submit로 제출하는 input을 감싸는 form을 변수로 할당해 선언해준다.
  3. 값을 저장할 input도 변수로 할당해 선언해준다. 어차피 html에서 required로 필수 입력을 지정해놨으니 id와 password를 굳이 나누어 작성할 필요가 없다.
  4. css에 hidden class를 작성해주고 js에서 class를 불러올 변수를 할당해 선언해준다. 
     • 해당 변수만 대문자로 한 이유는 string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을 때 사용하기 때문이다. greeting, userInterface 등 상단에 적힌 변수보다 중요한 정보가 아니다. (니꼬 말씀)
• function time
  1. 이 함수는 submit 이벤트(=로그인)가 수신될 때마다 호출되는 함수이다. 그에 걸맞게 함수 이름을 선언해주고 함수를 실행시키는 동시에 인자를 받아주기 위해 event를 작성해준다.
  2. submit 이벤트는 브라우저가 자동으로 새로고침 되며 내가 원하는 화면이 나오지 않는다. 이에 preventDefault(); 라는 브라우저의 기본 동작을 prevent해주는 메서드를 evnet에 타겟시켜 준다.
  3. submit 이벤트가 수신되면 로그인 화면은 hidden 처리되고, hidden 되어 있는 유저 화면은 나타날 수 있도록 classList를 add, remove 해준다.
• event time
  1. 이벤트 타겟인 loginForm에 addEvnetListener() 메서드를 추가해주고 submit 유형의 이벤트와 함수를 호출해준다.

결과물

아차! 나의 실수!

처음엔 submit 이벤트를 submit input에 주고 계속 먹히지 않아 이것도 시도해보고 저것도 시도해봤다. click 이벤트는 정상적으로 되지만 submit 이벤트만 먹히지 않길래 찾아본 결과, submit 이벤트는 submit를 감싸는 폼에 줘야 한다는 걸 알았다.

❌❌❌❌❌ const loginSubmit = document.querySelector(".login__form input:last-child"); ❌❌❌❌❌
❌❌❌❌❌ loginSubmit.addEventListener("submit", onLoginSubmit); ❌❌❌❌❌

한참을 화면을 노려다봤는데 너무 어이없는 이유여서 나에게 많이 실망했다 😅 적어놓고 다음엔 실수하지 않아야지.

이 외에도

작업하면서 콘솔 창을 보는데 이런 게 있다. autocompleat attributes는 자동완성 이슈인 것 같은데 빨간색은 아니지만 콘솔 창이 더러운 것도 괜히 싫어서 해당 페이지에 들어가봤다.

https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands/

이 페이지에서 autocomplete라는 요소가 있어 넣고 껐다.

<label for="password"> <u>P</u>assword: </label>
<input id="password" type="password"  required minlength="4" autocomplete="off">

깔 - 꼼