clear_uncertainty

자바스크립트 입문 [Javascript] - 자바스크립트로 로그인 기능을 구현하기 - (1) 본문

언어/자바스크립트(Javascript)

자바스크립트 입문 [Javascript] - 자바스크립트로 로그인 기능을 구현하기 - (1)

SOidentitiy 2021. 7. 25. 19:21
728x90

2021-07-25

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

[Login ] 

 

이제, 실제로 어플리케이션을 만들며 자바스크립트를 배워봅시다.

먼저, 자바스크립트로 로그인 기능을 구현해봅시다.

 

Input Values

 

자바스크립트가 작업을 하기 전에, 시작은 HTML이여야 합니다. HTML을 작성한 이유 HTML의 element를 JS로 끌고오는 것입니다.

먼저 HTML을 작성해봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="login-form">
		<input type="text" placeholder="What is name?"/>
	<button>Login</button>
		</div>
	<script src="javascript.js"></script>
</body>
</html>

그리고 앞에서 배웠던 내용으로 Input과 Button을 JS에 가져와줍시다.

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

 

우리가 원하는 것은 사용자가 input 창에 입력한 이름을 버튼을 눌렀을때 감지하고 저장하는 것입니다.

버튼을 누르는 행위는 click event입니다.

또한, 사용자가 input에 내용한 이름은 value라는 property입니다.

(어떤 property인지 잘 모를때는 console.dir(loginInput)을 통해 알 수 있습니다.)

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

function onLoginBtnclick() {
	console.log (loginInput.value);
}

loginButton.addEventListener ("click", onLoginBtnclick);

 

따라서 우리는 위와 같은 코드를 작성해 유저가 이름을 이용하면 그 이름을 콘솔에 나타낼 수 있습니다.

 

유효성 검사

 

여기서 문제가 있습니다. 만약 사용자가 입력을 안해도 우리는 그 값이 입력을 안했는지 알 수 없습니다.

또한 제한 길이가 있는 경우, 우리는 그 값을 넘겼을 때 제어를 할 수 없습니다.

이를 위해 조건문을 통해 해결해봅시다.

 

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

function onLoginBtnclick() {
	const username = loginInput.value;
	if(username === "") {
		alert("Please input your name!");
	} else if (username.length < 8) {
		alert("Your name is too short");
	} else {
		console.log(username);
	}  
}

loginButton.addEventListener ("click", onLoginBtnclick);

 

하지만 우리는 HTML을 통해 이를 제어할 수도 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<form id="login-form">
		<input type="text" required maxlength="15" placeholder="What is name?"/>
	<button>Login</button>
	</form>
	<script src="javascript.js"></script>
</body>
</html>

 

input의 유효성검사를 위해선 form 안에 input이 있어야합니다.

HTML의 required와 maxlength를 통해 위의 기능을 그대로 재현할 수 있습니다.

 

 

preventDefault

여기서 문제는, HTML의 button은 type="submit"을 기본값으로 가지는데 , 웹브라우저는 submit 될 때마다 새로고침 됩니다.

따라서 이제 우리는 click event가 아니라, submit event를 감지해야합니다.

 

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


function onLoginSubmit() {
	const username = loginInput.value;
	console.log(username);
}

loginForm.addEventListener ("submit",onLoginSubmit);

위와 같은 코드는 console에 username이 나오자마자 새로고침됩니다.

 

새로고침은 submit의 기본 동작입니다. 이러한 기본동작을 막기위해선 preventDefault를 이용해야합니다.

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


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

loginForm.addEventListener ("submit",onLoginSubmit);

 

function onLoginSubmit()에 event를 넣으면 우리가 JS에 공간을 넣어줌으로써,  event는 함수 onLoginSubmit의 첫번째 행위가 됩니다. 

event.preventDefault(); 는 event의 기본행위 즉, 새로고침을 제어합니다.

따라서 위의 코드를 통해 우리는 username을 submit 해도, 새로고침을 하지않고 console에 저장할 수 있습니다.

 

출처

 

 

노마드 코더 Nomad Coders

코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!

nomadcoders.co

 

728x90
저작자표시

'언어 > 자바스크립트(Javascript)' 카테고리의 다른 글

자바스크립트 입문[Javascript] - 자바스크립트로 로그인 기능을 구현하기 (Local Storage) - (3)  (0) 2021.07.26
자바스크립트 입문[Javascript] - 자바스크립트로 로그인 기능을 구현하기 - (2)  (0) 2021.07.25
자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 3 )  (0) 2021.07.25
자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 2 )  (0) 2021.07.24
자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 1 )  (0) 2021.07.24
'언어/자바스크립트(Javascript)' Related Articles more