4.3 Getting Username

gangmin·2021년 12월 21일

노마드코더

노마드코더-바닐라JS로_크롬앱_만들기

목록 보기

26/43

강의

우리가 해야하는 것은 유저가 이름을 제출하면, form을 없애는 것이다.

이걸 구현하려면 2가지 방법이 있다.
1. HTML 요소 자체를 없앤다.
or
2. CSS를 이용해서 숨긴다.

CSS에 hidden이라는 classname을 만들어 주자!

.hidden {
  display: none;
}

어떤 요소에게든 이 classname을 주면, 그 요소를 숨기게 될거다!! 물론 유저가 이름을 제출한 뒤에만 말이다.
((visibility:hidden은 공간은 그대로 두고 보이지만 않는건데 display:none은 잡아둔 공간도 사라진다.))

function onLoginSubmit(event){
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add("hidden");
    console.log(username);
}
loginForm.addEventListener("submit",onLoginSubmit);

classList를 활용해 클래스이름을 부여해준다. form은 사라지지만 입력값은 콘솔에 기록됐다!!

<h1 class="hiden"></h1>

h1을 새로 생성해서 기본값으로 안보이게 설정한다.
(차후에 Hello "user"가 들어갈 부분이다.)

우리가 할 일은 form은 숨기고 h1은 표시되도록 하는거다!
= 이름을 입력 후 제출하면, 로그인 양식은 사라지고 "안녕 누구야" 이런 문구가 나오게끔 만드는거다!

하지만, h1에 표시할 텍스트가 있을 때만 표시되도록 할거다.
= 빈칸 캍

정리 : 기본 동작은 실행되지 않도록 막아주고, hidden이라는 class name을 더해줘서 form을 숨기고 유저의 이름을 변수로 저장해주고, 그 이름은 h1 안에 넣어줄거다.

<h1 id="greeting" class="hiden"></h1>

id 추가
= h1 요소를 손봐야 하니까 id 부여하는거임. JS로 작업해야하니까

JS 코드 손 봐야함. 근데 "hidden"을 2번 이상 쓰게 되니 변수로 지정해줄거다.

Q) 근데 왜 대문자로 쓰는가??

const HIDDEN_CLASSNAME = "hidden";
= 이건 관습같은거다. 일반적으로 string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을때 사용한다. 그리고 loginForm이나 loginInput처럼 중요한 정보를 담은게 아니라서 대문자로 작성한다.
= 하찮은것만 대문자로 저장한다. 이런 느낌인듯???

const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    console.log(username);
    greeting.innerText = "Hello " + username;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit",onLoginSubmit);

이렇게 작성하면 유저에게 인사 할 수 있다. ヾ(^▽^*)))