노마드 코더 JS

Computer Science/FrontEnd

노마드 코더 JS | #4 Login

토마토. 2022. 2. 22. 14:08

이제 애플리케이션 빌드를 시작한다.

#4.0 Input Values

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
        <div id="login-form" class="form">
            <input type="text" placeholder="What is your name?"/>
            <button>Log In</button>
        </div>
        <script src="app.js"></script>
    </body>
</html>

03:36 보던 중

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

이건 아래 코드랑 동일함

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

user가 버튼을 클릭하는 걸 감지하는 방식

= click event

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

function onLoginBtnClick(){
    console.dir(loginInput);
    console.log("click!");
    alert("click");
}
loginButton.addEventListener("click",onLoginBtnClick);

input 안에 있는 값을 console.dir에서 value라는 값으로 알아낼 수 있다.

value property를 이용해서 input에 있는 내용을 가져올 수 있다.

console.log(loginInput.value);

user가 어떤 이름을 입력했을 때만 할 수 있도록 if else 활용하기

#4.1 Form Submission

=> username의 유효성

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

function onLoginBtnClick(){
    const inputValue = loginInput.value;
    if (inputValue == ""){
        alert("No input value");
    }
    else {
        console.log("click!");
        alert("hi "+loginInput.value);
    }
}
loginButton.addEventListener("click",onLoginBtnClick);

길이 유효성 검사

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

function onLoginBtnClick(){
    const username = loginInput.value;
    if (username == ""){
        alert("No input value");
    }
    else if (username.length > 15){
        alert("Your name is too long")
    }
    else {
        console.log("click!");
        alert("hi "+username);
    }
}
loginButton.addEventListener("click",onLoginBtnClick);

if else 말고 브라우저 자체 기능을 활용하고 싶다.

=> 절대 유저를 믿지 말 것

html form에 다양한 것을 할 수 있음

<input required maxlength="15" type="text" placeholder="What is your name?" />

Form이 아니기 때문에

input 유효성 검사를 위해서는 input이 form 안에 있어야 한다.

login을 누르면 submit 되고 있다.

엔터를 누르고, input이 존재하지 않는다면, form이 자동으로 submit 된다.

더 이상 click을 고려하고 싶다.

새로고침 하지 않고 user 정보를 저장하도록

#4.2 Events 10분

=> submit event에 listen 해주어야 함

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

function onLoginSubmit(){
    const username = loginInput.value;
    console.log(username);
    
}
// 엔터를 누르거나 버튼 클릭할 때 발생
loginForm.addEventListener("submit", onLoginSubmit);

새로고침을 없애주고 싶음

즉시 실행된다는 뜻

브라우저는 onLoginSubmit 함수를 호출하고,

실행시키지만,

특정한 정보를 전달해주고 있다.

function onLoginSubmit(info){
    //const username = loginInput.value;
    //console.log(username);
    info.preventDefault();   
    console.log(info);
}
// 엔터를 누르거나 버튼 클릭할 때 발생
loginForm.addEventListener("submit", onLoginSubmit);

+ preventDefault();는 브라우저의 기본적인 수행 동작을 멈추도록 하는 것이다.

페이지를 새로고침 하도록 되어있다.

그 정보는 이런 형태

이 argument로 여러 가지를 할 수 있게 된다.

onLoginSubmit 하나의 argument를 받아오도록 하고 있다.

SubmitEvent {isTrusted: true, submitter: button, type: 'submit', target: form#login-form, currentTarget: form#login-form, …}
isTrusted: true
bubbles: true
cancelBubble: false
cancelable: true
composed: false
currentTarget: null
defaultPrevented: true
eventPhase: 0
path: (5) [form#login-form, body, html, document, Window]
returnValue: false
srcElement: form#login-form
submitter: button
target: form#login-form
timeStamp: 1477.2000000476837
type: "submit"
[[Prototype]]: SubmitEvent

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

function onLoginSubmit(event){
    event.preventDefault();   
    const username = loginInput.value;
    console.log(username);
}
// 엔터를 누르거나 버튼 클릭할 때 발생
loginForm.addEventListener("submit", onLoginSubmit);

#4.3 Events part Two 8분

=> JS를 이용해서 기본 동작을 막을 것이다.

이전 영상에서는 form의 submit을 막았음

=> 링크의 기본 동작은 클릭으로 다른 곳에 이동하는 것

function handleLinkClick(){
    alert("clicked");
}
// 엔터를 누르거나 버튼 클릭할 때 발생
loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);

일단 함수에 적어둔 alert가 실행되고

그 다음에 확인을 누르면 그 링크로 이동한다.

디폴트를 막아야 할 때가 있다. 무엇이 클릭되었는지 확인해야 하는 경우들

첫번째 인자는 event에 관한 정보

function handleLinkClick(event){
    console.log(event);
    alert("clicked");
    
}

넣어서 확인해보니, 클릭할 때마다 클릭 이벤트가 달라진다.

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

이벤트로부터 받을 수 있는 이벤트가 굉장히 다양하다

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
isTrusted: true
altKey: false
altitudeAngle: 1.5707963267948966
azimuthAngle: 0
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 48
clientY: 42
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: true
detail: 1
eventPhase: 0
fromElement: null
height: 1
isPrimary: false
layerX: 48
layerY: 42
metaKey: false
movementX: 0
movementY: 0
offsetX: 40
offsetY: 10
pageX: 48
pageY: 42
path: (5) [a, body, html, document, Window]
pointerId: 1
pointerType: "mouse"
pressure: 0
relatedTarget: null
returnValue: false
screenX: 125
screenY: 122
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: a
tangentialPressure: 0
target: a
tiltX: 0
tiltY: 0
timeStamp: 1518.5
toElement: null
twist: 0
type: "click"
view: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
which: 1
width: 1
x: 48
y: 42
[[Prototype]]: PointerEvent

재생을 멈추지 말고 다양한 자극을 주기

#4.4 Getting Username 11분

=> login 엔터 누른 뒤에 login form을 없애고 싶을 때

옵션 1. html 삭제

옵션 2. css 이용해서 감추기

style.css

.hidden {
    display:none;
}

app.js

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

+ 여기에다가 html 요소를 추가하기

h1 내용을 비워둔다.

        <h1 class="hidden">Hi</h1>

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

function onLoginSubmit(event){
    // hide form
    event.preventDefault();   
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    // show greeting
    console.log(username);
    greeting.innerText = "Hello " + username;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

function handleLinkClick(event){
    event.preventDefault();   
    console.log(event);
    alert("clicked");
    
}
// 엔터를 누르거나 버튼 클릭할 때 발생
loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);

오와아앙

+ string 생성하는 법

    greeting.innerText = `Hello ${username}`;

키보드에서 이 키 처음 써본다..

string 안에 넣고 싶으면 ${}

그리고 시침 ``

#4.5 Saving Username 7분

=> 아~~~주 기본적인 것 user 기억하기

localStorage라는 기능을 이용하면 된다.

localStorage.setItem('myCat', 'Tom');

Window.localStorage - Web API | MDN (mozilla.org)

나중에 더 써보기!!!

localStorage.setItem('myCat', 'Tom');
Storage {myCat: 'Tom', length: 1}

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

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

function handleLinkClick(event){
    event.preventDefault();   
    console.log(event);
    alert("clicked");
}
// 엔터를 누르거나 버튼 클릭할 때 발생
loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);

#4.6 Loading Username 10분

=> 만약 localStorage에 username이 있다면,

=> form 보여주지 않고 바로 hello 하기

const savedUsername = localStorage.getItem(USERNAME_KEY);

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

기본 로직은 이렇게 흘러감

const loginForm = document.querySelector("#login-form");
const loginInput = loginForm.querySelector("input");
const link = document.querySelector("a");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event){
    // hide form
    event.preventDefault();   
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    // show greeting
    console.log(username);
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
    
}

function handleLinkClick(event){
    event.preventDefault();   
    console.log(event);
    alert("clicked");
}

function paintGreetings(HIDDEN_CLASSNAME,savedUsername){
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText=`Hello ${savedUsername}`;
}
// 엔터를 누르거나 버튼 클릭할 때 발생
const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername == null){
    // show the form
    console.log("user is null");
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
}
else {
    console.log("user is not null");
    // show the greeting
    paintGreetings(HIDDEN_CLASSNAME,savedUsername);
}

link.addEventListener("click", handleLinkClick);

#4.7 Super Recap 13분

- css로 form hidden

- 브라우저 api local storage

- js로 null -> form / else -> greeting

- 으로 받아줌

흥미롭군..

'Computer Science > FrontEnd' 카테고리의 다른 글

노마드 코더 JS \| #6 Quotes and Background (0)	2022.02.24
노마드 코더 JS \| #5 Clock (0)	2022.02.22
노마드 코더 JS #3 \| JavaScript on the browser (0)	2022.02.21
노마드 코더 JS #2 \| Welcome to JavaScript (0)	2022.02.20
노마드 코더 바닐라 JS #1.0~#2.2 (0)	2022.02.20

현재글노마드 코더 JS | #4 Login

HappyTomatoLife

기록하는 토마토

linked Queue, binary search, Deque, react.js, linked stack, Doubly Linked List, REACT, SQL, linear DS, maze problem, singly linked list, 교육상담, DS, 조건문, 반복문, 자료구조, Expression evaluation, OCaml, JavaScript, 함수형 언어,

Today :
Yesterday :

HappyTomatoLife