[노마드코더] 바닐라JS로 크롬 앱 만들기(2)

scroll0908·2023년 4월 8일

본격적으로 웹앱을 만들어보자

우선 html에 뼈대를 작성한다

  <div id="login-form">
    <input type="text" placeholder="what is your name?"/>
    <button>Log In</button>
  </div>

로그인 버튼에 클릭이벤트를 만들어보자

특정 id에서 특정 element를 찾고 싶을 때(정밀 검색)

const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")
const loginButton = loginForm.querySelector("button")

참고로 이렇게도 쓸 수 있다.

const loginInput = document.querySelector("#login-form input")
const loginButton = document.querySelector("#login-form button")

loginInput에 입력한 값을 콘솔에 보고 싶다면?

👉console.dir() 으로 확인한다!
function onLoginBtnClik(){
  console.dir(loginInput)
}

loginButton.addEventListener("click", onLoginBtnClik)
👉그렇구나, loginInput.value구나!

username 유효성 검사 구현하기

alert, if...else 로 필수 입력값, username의 길이 제한 등 구현할 수 있지만
html에서 기본 제공하는 required, maxlength을 이용하면 간단.
단, form 태그 안쪽에 input을 써야 한다.
클릭에 신경쓸 필요없이 엔터를 치면 form이 자동으로 submit된다. 그리고 웹사이트가 새로고침된다.

<body>
  <form id="login-form">
      <input required maxlength="15" 
             type="text" placeholder="what is your name?"/>
      <input type="submit" value="Log In" />
  </form>
  <script src="app.js"></script>
</body>

preventDefault() : 브라우저의 기본동작(새로고침)을 방지

event라는 argument에 js가 이벤트 동작 시 발생하는 여러가지 정보를 객체 형태로 담아준다.
defaultPrevented: true

엔터를 쳤을 때: 새로고침 되지 않는다

const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input")

function onLoginSubmit(event){
  event.preventDefault()
  console.log(event)
}

loginForm.addEventListener("submit", onLoginSubmit)

링크를 클릭했을 때: 해당 링크를 열지 않는다
function handleLinkClick(event) {
  event.preventDefault()
  console.dir(event)
}

link.addEventListener("click", handleLinkClick)
강의에선 MouseEvent던데 왜 PointerEvent라고 표시되는지 모르겠다..

4.4

hidden 클래스를 설정해서 로그인버튼을 클릭하면
입력창은 안 보이게하고 인삿말과 함께 입력값을 화면에 띄워보자

html파일에서 인삿말 form을 hidden 클래스로 설정하고

  <form id="login-form">
    <input required maxlength="15" type="text"
           placeholder="what is your name?"/>
    <input type="submit" value="Log In" />
  </form>
  <form>
    <h1 id="greeting" class="hidden"></h1>
  </form>

css파일도 hidden클래스를 설정한다

.hidden {
  display: none;
}

입력 전후로 element 탭에서 hidden 클래스의 추가/삭제는 확인됐는데는데 화면이 전혀 표시되지 않아서 당황했다. 알고보니 css파일을 연결해주는 link태그를 작성하지 않아서 그랬음..ㅋㅋ

js파일에서 classList에 hidden 추가/삭제를 실행

const greeting = document.querySelector("#greeting")

const HIDDEN_CLASSNAME = "hidden" 
// 네이밍 컨벤션: string값만 담은 경우 대문자로 변수명을 정한다

function onLoginSubmit(event){
  event.preventDefault() 
  // submit을 수행시 브라우저 새로고침이 발생하는데 그걸 막는 역할
  
  const username = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME)
  greeting.innerText = `Hello ${username}`
  greeting.classList.remove(HIDDEN_CLASSNAME)
}

loginForm.addEventListener("submit", onLoginSubmit)

4.5 localStorage

4.4에서 입력된 username을 localStorage에 저장하는 방법

📌localStorage API

localStorage.setItem(key, value): 저장

localStorage.getItem(key): 조회

localStorage.removeItem(key): 삭제

function onLoginSubmit(event){
  event.preventDefault()
  const username = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME)
  
  localStorage.setItem("username", username) // 👈
  
  greeting.innerText = `Hello ${username}`
  greeting.classList.remove(HIDDEN_CLASSNAME)
}