Login만들기

Input values

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

// 방법 1.
//form형태를 가져오고 싶은 코드
const loginForm = document.getElementById("login-form");
//input의 value값을 가져오고 싶은 코드
const loginInput = loginForm.querySelector("input");
//button형태를 가져오고 싶은 코드
const loginButton = loginForm.querySelector("button");

// 방법 2. document 또는 하나의 element를 통해서 
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

 

Form Submission

string의 길이를 나타내는 방법 : ex. username.length

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

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

function onLoginBtnClick() {
  const username = loginInput.value;
  if (username === "") {
    alert("Please write your name");
  } else if (username.length > 15) {
    alert("Your name is too long.");
  }
}

loginButton.addEventListener("click", onLoginBtnClick);

위에 있는 코드보다 아래에 작성되어있는 것이 더 낫다. 

//input의 유효성 검사를 작동시키기 위해선, input이 form안에 있어야 된다.
<form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <button>Log In</button>
</form>

• 브라우저가 새로고침하지 않고 user정보를 저장하도록 하고 싶을 때

      <!-- input을 form안에 위치시켜야 하고, -->
      <!-- 엔터를 누를 때마다 form은 자동적으로 submit이 되어야 한다. -->
   <form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>

▶ loginbutton을 클릭할 때마다 자동적으로 새로고침이 되는 문제점!!! 이 문제점 개입없이 하고싶기 때문에 button event코드를 삭제해준다.

 

event.preventDefault()

• Event (1)
• Submit은 엔터를 누르거나 버튼을 클릭할 때 발생한다. ★
• submit이라는 event가 발생하는 걸 막거나 중간에 개입해서 submit event가 발생했다는 걸 알고 싶을 때 
• Form의 기본동작은 submit!

// 새로고침이 일어나는 건 form submit의 기본 동작이다. 
// 즉,누군가 form을 submit하면 브라우저는 기본적으로 페이지를 새로고침하도록 되어 있다. 
// 이 기본동작을 발생하지 않도록 해야한다. 
const loginForm = document.querySelector("#login-form"); 
const loginInput = document.querySelector("#login-form input"); 

function onLoginSubmit(event) { 
    // 어떤 정보를 브라우저가 주고 있는지 보여주기 위해서 관행적으로 'event'입력하고, 
    // event.preventDefault(); 해보아서 콘솔로그해본다. 
    // 콘솔창엔 'onLoginSubmit function에 대한 argument'로 보여주는 동시에 '방금 실행된 event에 대한 정보들'이라는 것! 
    // preventDefault() === 어떤 event의 기본행동을 발생하지 않도록 막아주는 역할. 
    // 기본행동 === 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작. 
    event.preventDefault(); 
    console.log(event); 
} 
    // ()추가 === function을 자동적으로 '즉시'실행한다 
    // 그래서 submit event가 발생하면 onLoginSubmit함수를 호출시 argument(event object를 담는 정보들)를 담아 호출한다. 
    
    loginForm.addEventListener("submit", onLoginSubmit);​

• 기본동작을 발생하지 않도록 막을 때 (최종적 코드)

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

function onLoginSubmit(event) {
  event.preventDefault();
  console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit);​​

• Event (2)
• 링크의 기본동작은 클릭했을 때 다른 페이지로 이동하는 것
• 기본동작을 발생하지 않도록 막을 때 (최종적 코드)

<a href="https://nomadcoders.co">Go to courses</a>​

 

const link = document.querySelector("a");

function handleLinkClick(event) {
  event.preventDefault();
  console.dir(event);
}

link.addEventListener("click", handleLinkClick);

 

Getting Username

절차 (1) 요소를 숨길 수 있는 hidden이라는 클래스 CSS를 넣어준다.

// form자체를 사라지게 하고 싶은 방버 :  hidden
.hidden {
  display: none;
}

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

↑위에 있는 코드상태의 세팅이 되어야한다.

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

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

loginForm.addEventListener("submit", onLoginSubmit);

콘솔창에 이름이 저장되면서 form형식이 사라지는 걸 확인!

 

절차 (2)

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

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


function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add("hidden");
  const username = loginInput.value;
  greeting.innerText = "Hello " + username;
  greeting.classList.remove("hidden");
}

loginForm.addEventListener("submit", onLoginSubmit);

"hidden"이 반복되고 있고 오류가능성이 있어서 ↓아래처럼 설정한 뒤 해당string을 바꿔준다.

♥ 일반적으로 string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을 때 사용!

const HIDDEN_CLASSNAME = "hidden";

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

//일반적으로 string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을 때 사용!
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  // 1. 브라우저의 기본동작을 막는다.
  event.preventDefault();
  // 2. form에 hidden이라는 class를 추가하는 것.(CSS에 display:none되는 상황)
  loginForm.classList.add(HIDDEN_CLASSNAME);
  // 3. loginInput의 값을 변수에 저장하고
  const username = loginInput.value;
  // 4. 비어있는 h1의 id인 greeting을 가져다가 "hello username"이라는 텍스트를 넣어준다.
  greeting.innerText = `Hello ${username}`;
  // 5. h1에서 hidden이라는 class를 삭제해주면, 넣어준 텍스트가 나타날 것이다.
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

"Hello " + username        새로운 방법 ▶    `Hello ${username}`  - (처음과 끝 사이에 백팁(``)을 넣어준다.)

 

Saving Username 

유저 기억하기 - API를 이용 ---▶ local storage : 브라우저가 뭔가를 저장할 수 있게 해주는 역할◀---

local storage에 뭔가 있는지 확인해보고 싶으면 개발자도구를 이용한다.

크롬개발자도구 Application > Local Storage

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage 에 가면 다양한 방법의 localstorage가 있다.

콘솔창으로 돌아가서 이렇게 나오는 걸 알 수 있다.

localStorage의 정보를 저장하거나, 정보를 가져오거나, 삭제

코드에 작성해주면,

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

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  // 1. 브라우저의 기본동작을 막는다.
  event.preventDefault();
  // 2. form에 hidden이라는 class를 추가하는 것.(CSS에 display:none되는 상황)
  loginForm.classList.add(HIDDEN_CLASSNAME);
  // 3. loginInput의 값을 변수에 저장하고
  const username = loginInput.value;
  // 3.(1) 유저 정보를 저장할 수 있게 만드는 localStorage를 만들어준다.
  localStorage.setItem("username", username);
  // 4. 비어있는 h1의 id인 greeting을 가져다가 "hello username"이라는 텍스트를 넣어준다.
  greeting.innerText = `Hello ${username}`;
  // 5. h1에서 hidden이라는 class를 삭제해주면, 넣어준 텍스트가 나타날 것이다.
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

 

Loading Username

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

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  // 1. 브라우저의 기본동작을 막는다.
  event.preventDefault();
  // 2. form에 hidden이라는 class를 추가하는 것.(CSS에 display:none되는 상황)
  loginForm.classList.add(HIDDEN_CLASSNAME);
  // 3. loginInput의 값을 변수에 저장하고
  const username = loginInput.value;
  // 3.(1) 유저 정보를 저장할 수 있게 만드는 localStorage를 만들어준다.
  localStorage.setItem("username", username);
  // 4. 비어있는 h1의 id인 greeting을 가져다가 "hello username"이라는 텍스트를 넣어준다.
  greeting.innerText = `Hello ${username}`;
  // 5. h1에서 hidden이라는 class를 삭제해주면, 넣어준 텍스트가 나타날 것이다.
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

const savedUsername = localStorage.getItem("username");

if (savedUsername === null) {
  //show the form
} else {
  // show the greetings
}

"username"이 반복되고 있어서 ↓아래처럼 기본설정한 뒤 해당string을 바꿔준다. 

const USERNAME_KEY = "username";

form이랑 h1을 숨긴채로 해야되기 때문에 둘다 class명을 전체form쪽으로 만들어줘서 둘다 없어지는 상황이 됨.

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

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

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
  // 1. 브라우저의 기본동작을 막는다.
  event.preventDefault();
  // 2. form에 hidden이라는 class를 추가하는 것.(CSS에 display:none되는 상황)
  loginForm.classList.add(HIDDEN_CLASSNAME);
  // 3. loginInput의 값을 변수에 저장하고
  const username = loginInput.value;
  // 3.(1) 유저 정보를 저장할 수 있게 만드는 localStorage를 만들어준다.
  localStorage.setItem(USERNAME_KEY, username);
  // 4. 비어있는 h1의 id인 greeting을 가져다가 "hello username"이라는 텍스트를 넣어준다.
  greeting.innerText = `Hello ${username}`;
  // 5. h1에서 hidden이라는 class를 삭제해주면, 넣어준 텍스트가 나타날 것이다.
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

// localStorage에 유저정보가 없을 때 form의 hidden class명을 삭제해주고
if (savedUsername === null) {
  //show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  // show the greetings
  greeting.innerText = `Hello ${savedUsername}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

[greeting.innerText 문과 greeting.classList 문] 2번 있어서 동작이 2번 연속으로 나오기 때문에

그 2줄을 합쳐서 만들 함수를 임의로 만든다.

//paintGreetings함수에 username이라는 argument를 만든다.
function paintGreetings(username) {
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

최종코드

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

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

// 4. form이 submit되면 우리는 input으로부터 유저정보를 받고,
// 5. input에서 받은 user를 가진 paintGreetings를 호출하게 됨.
function onLoginSubmit(event) {
  // (1). 브라우저의 기본동작을 막는다.
  event.preventDefault();
  // (2). form에 hidden이라는 class를 추가하는 것.(CSS에 display:none되는 상황)
  loginForm.classList.add(HIDDEN_CLASSNAME);
  // (3). loginInput의 값을 변수에 저장하고
  const username = loginInput.value;
  // (4). 유저 정보를 저장할 수 있게 만드는 localStorage를 만들어준다.
  localStorage.setItem(USERNAME_KEY, username);
  paintGreetings(username);
}

// 1. username을 argument로 받는 함수를 만들었다.
function paintGreetings(username) {
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

// 3. localStorage에 유저정보가 없을 때 form의 submit을 기다리고
// 2. localStorage에 유저정보가 있다면, 유저정보를 받아서 argument로 넣어준다.
if (savedUsername === null) {
  //show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  // show the greetings
  paintGreetings(savedUsername);
}