[VanillaJS] 로그인창 구현하기

JavaScript/VanillaJS 2022. 10. 14. 17:27

728x90

tip. element 가져오기

- document가 아닌 다른 element 내에서도 가져올 수 있다.

아래 코드 참고하기

index.html

<body>
	<div id="login-form">
    	<input type="text" placeholder="What is your name?" />
        <button>Log In</button>
    </div>
    <script src="app.js"></script>
</body>

app.js

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

1. Login Form 유효성 검사

1. JavaScript로 유효성 검사하기 (권장하지 않음)

(1) 빈칸 검사

function onLoginBtnClick() {
	const value = loginInput.value;
    if (value === "") {
    	alert("Please write your name");
    }
}

loginButton.addEventListener("click", onLoginBtnClick)'

유저 네임을 입력받는 폼의 input 칸이 비어있는 채로 submit 될 경우 alert 실행

(2) 길이 검사

else if (username.length > 15) {
	alert("Your name is too long.");
}

2. HTML에서 유효성 검사하기 (권장)

더 간편하게 유효성 검사하기 -> input의 자체기능 이용하기 (JS 사용 필요 x)

* 전제: input 태그를 반드시 form 태그 내부에 두기.

(1) 필수항목 지정 -> required

(2) 최대길이 지정 -> maxlength="길이"

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

2. 새로고침 문제 해결하기 + 유저한테 인사하기

여기서 문제는 Log In 버튼을 누를 때마다 페이지가 새로고침되는 것이다.

새로고침 되는 이유는 Log In 버튼을 누를 때마다 submit되기 때문이다.

이를 해결하기 위해서는 JS의 기본기능(JS의 배려)을 이용할 수 있다.

JS의 배려 -> 함수의 첫번째 인자로 object를 주는데 거기에 이 함수의 event에 대한 정보가 담겨있다.

(뭐가 클릭되었고 어디가 클릭되었는지 등의 정보를 알고 싶을 때 유용)

이 이벤트에서 event.preventDefault() 를 사용하면 기본 동작을 막을 수 있다.

function handleLinkClick(event) {
    event.preventDefault(); // 기본 동작 막기
    console.dir(event);
}

이제 콘솔창에서 커서의 x, y좌표, 클릭된 element의 path 등의 유용한 정보를 볼 수 있다.

submit 할 때마다 새로고침되는 현상 막기 + 유저한테 인사하기

style.css

.hidden {
    display: none;
}

로그인 한 후에 loginForm을 없애주기 위한 hidden 클래스

index.html

    <form id="login-form">
        <input 
            required
            maxlength="15"
            type="text"
            placeholder="What is your name?"
        />
        <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1> // 유저한테 인사하기 위한 h1 태그
    <script src="app.js"></script>

유저에게 인사하기 위한 h1 태그는 디폴트가 hidden 상태이다.

-> 로그인 후에는 hidden 클래스를 없애주어야 함.

app.js

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

HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
    event.preventDefault(); // 페이지 새로고침 막기
    loginForm.classList.add(HIDDEN_CLASSNAME); // 로그인 폼 사라지게 하기
    const username = username.value; // 입력받은 유저 이름 저장
    greeting.innerText = `Hello ${username}`; // 유저에게 인사
    greeting.classList.remove(HIDDEN_CLASSNAME); // 유저에게 인사하는 h1 태그 노출
}

loginForm.addEventListener("submit", onLoginSubmit);

* 문자열을 저장하는 변수는 보통 대문자로 설정한다.

ex) HIDDEN_CLASSNAME = "hidden";

3. username 저장하기

부제: 새로고침 해도 유저 기억하기

사용할 API: local storage -> 정보를 브라우저에 저장할 수 있게 해준다. 나중에 갖다쓸 수 있음.

브라우저의 미니 DB라고 생각하면 된다.

Local Storage보는 방법

개발자 도구 -> Application -> Storage -> Local Storage

Local Storage 외에도 Sesstion Storage, IndexedDB, Web SQL, Cookies 등 다양하게 있지만 그 중에서 Local Storage 가 가장 다루기 쉽다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Window.localStorage - Web APIs | MDN

The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

developer.mozilla.org

콘솔창에 아래를 입력해보자.

1. 정보 저장하기 localStorage.setItem()

//setItem("key", "value")

localStorage.setItem('username', 'wonju')

이제 Local Storage를 보면 "username"이라는 Key에 "wonju" 라는 value가 저장되어 있는 것을 볼 수 있다.

2. 정보 가져오기 localStorage.getItem()

// getItem("key")

localStorage.getItem("username")
//-> wonju

3. 정보 삭제하기 localStorage.removeItem()

// removeItem("key")

localStorage.removeItem("username")

4. 유저정보가 있으면 새로고침 작동하지 않도록 하기

//실수를 줄이기 위한 문자열 변수화
USERNAME_KEY = "username";

string은 JS에서 오타 검사를 해주지 않기 때문에 자주 사용하는 string이 있다면 변수로 만들어서 사용하는 것이 좋다.

로직

const savedUsername = localStorage.getItem(USERNAME_KEY);

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

getItem으로 유저 네임을 받아온 변수가 null 일 경우 loginForm을 보이게 하고

이미 로그인 한 유저가 있을 경우 h1태그(id: greetings)를 보이게 하기

5. 완성본

index.html

<body>
    <form class="hidden" id="login-form">
        <input 
            required
            maxlength="15"
            type="text"
            placeholder="What is your name?"
        />
        <button>Log In</button>
    </form>
    <h1 class="hidden" id="greeting" ></h1>
    <script src="app.js"></script>
</body>

style.css

.hidden {
    display: none;
}

app.js

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

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

function onLoginSubmit(event) {
    event.preventDefault(); // 페이지 새로고침 막기
    const username = username.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username);
}

function paintGreetings(username) {
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    paintGreetings(savedUsername);
}

LIST

저작자표시

'JavaScript > VanillaJS' 카테고리의 다른 글

[VanillaJS] 투두리스트 구현하기(下) (0)	2022.10.30
[VanillaJS] 투두리스트 구현하기(上) (0)	2022.10.23
[VanillaJS] 랜덤 모듈로 명언, 배경화면 구현하기 (0)	2022.10.22
[VanillaJS] 시계 구현하기 (0)	2022.10.18

ABOUT ME

생각하다 생각하다

tip. element 가져오기

1. Login Form 유효성 검사

1. JavaScript로 유효성 검사하기 (권장하지 않음)

(1) 빈칸 검사

(2) 길이 검사

2. HTML에서 유효성 검사하기 (권장)

더 간편하게 유효성 검사하기 -> input의 자체기능 이용하기 (JS 사용 필요 x)

2. 새로고침 문제 해결하기 + 유저한테 인사하기

submit 할 때마다 새로고침되는 현상 막기 + 유저한테 인사하기

3. username 저장하기

부제: 새로고침 해도 유저 기억하기

1. 정보 저장하기 localStorage.setItem()

2. 정보 가져오기 localStorage.getItem()

3. 정보 삭제하기 localStorage.removeItem()

4. 유저정보가 있으면 새로고침 작동하지 않도록 하기

5. 완성본

'JavaScript > VanillaJS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

tip. element 가져오기

1. Login Form 유효성 검사

1. JavaScript로 유효성 검사하기 (권장하지 않음)

(1) 빈칸 검사

(2) 길이 검사

2. HTML에서 유효성 검사하기 (권장)

더 간편하게 유효성 검사하기 -> input의 자체기능 이용하기 (JS 사용 필요 x)

2. 새로고침 문제 해결하기 + 유저한테 인사하기

submit 할 때마다 새로고침되는 현상 막기 + 유저한테 인사하기

3. username 저장하기

부제: 새로고침 해도 유저 기억하기

1. 정보 저장하기 localStorage.setItem()

2. 정보 가져오기 localStorage.getItem()

3. 정보 삭제하기 localStorage.removeItem()

4. 유저정보가 있으면 새로고침 작동하지 않도록 하기

5. 완성본

'JavaScript > VanillaJS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바