노마드코더의 <바닐라 JS로 크롬 앱 만들기>를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다.
개념 복습용이나 면접 대비용으로 참고하면 좋을 듯 합니다!
#4.0 Input Values
이제 본격적인 Momentum 클론 시작!
로그인 Process
1. User Name 묻기
2. Value를 저장
3. 화면에 정보 표시 (일단은 console.log로)
목표: 이름을 입력 받을 input태그(type=”text”)와 button을 만들고,
click event에 대한 event listener를 만들어서 input의 입력값을 console에 출력하기
<!--index.html-->
<body>
<!--HTML에서는 `className`이 아니라 `class`로 써줘야댐-->
<div class="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.querySelector(".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");사용자가 버튼을 click 햇을 때
input에 적은 값을 (event를 listen해서) console.log하기
console.dir(loginInput)해서 보면, input에 있는 value라는 property를 끌어와야 함을 알 수 있음!
<!--index.html-->
<div>
<input
***value=""***
type="text"
placeholder="What is your name?"
/>
</div>즉, input의 value(사용자 입력값)을 저장해야됨
const loginInput = document.querySelector(".login-form input");
const loginButton = document.querySelector(".login-form button");
function onLoginBtnClick() {
console.log("Hello,", loginInput.value); }
//HTML에서 input 안에 value를 설정해줬다면 그 값이 콘솔에 출력될 것! (placeholder처럼 input창에 선입력 되어있을 것임)
//혹은 브라우저의 input 칸에 값을 입력하고 click을 누른다면(value를 생성해준다면) 그 값이 콘솔에 출력될 것!
loginButton.addEventListener("click", onLoginBtnClick);출력값:
BUT, 여기서 문제점은 value값이 비어있을 때 버튼을 클릭한다면
위와 같이 출력되는걸 방지하고 싶음
즉 사용자가 이름을 입력했을 때만 onLoginBtnClick 함수가 실행되도록 if-else문을 이용해서 코딩해보자!
#4.1 Form Submission
username을 검사할 것
: 너무 긴 user name이나, user name이라는 value가 존재하지 않으면 함수를 실행하지 않을 것임
- 길이 체크: 브라우저의 기본 기능
변수.length이용 길이 체크 & 유무 검사: if-else문을 사용해서 구현
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("Please enter your name within 15 characters.");
} else {
console.log("Hello,", username);
}
}
loginButton.addEventListener("click", onLoginBtnClick);#4.2 Events
BUT
.
.
.
HTML에서의 input 태그는 기본 내장 기능들이 매우~ 많음
So, if-else문을 쓰는 것보다 input 태그의 기능을 사용하는 것이 간결한 코드를 만들 수 있음
→ value 존재 체크: input 태그의 기본 내장 기능을 사용하기!
then, input의 유효성 검사를 하는 기능을 사용하기 위해선 input 태그가 form태그 안에 있어야함!
<!--index.html-->
<form>
<input
***value=""***
type="text"
placeholder="What is your name?"
/>
</form>
사진과 같이, 브라우저가 우리를 돕고 있음
→ 최대한 브라우저의 기능을 활용하자!
BUT, HTML에 <form>을 사용했지만, 버튼 클릭 시 폼의 기본 제출(submit) 동작이 발생하여 페이지가 새로고침됨 (즉, input에 입력한 value가 버튼을 클릭하면 사라짐 ;)
🙋♀️ Q: 왜 그런건가요? 제가 원하는 건 브라우저가 새로고침을 하지 않고 user 정보를 저장하는 건데...
💡 A: 새로고침을 하는 것이 브라우저의 default 프로그래밍이라서요! 다시 말하면, 새로고침 될 때 “form이 submit된다”고 말하는데 이는 브라우저의 기본 행동입니다. 이를 방지하기 위한 (form을 submit할 때 입력값을 저장하는) 방법이 있습니다!
So, 일단 click 여부는 후순위로 미뤄두고 form의 submit을 막아서 브라우저가 새로고침하지 않고 username이라는 value를 브라우저에 저장할 수 있도록 하자!
→ 즉, form태그의 기본 동작을 막아야함(prevent)!!
그럼 어떻게 해결해야할까?
→ 해결책을 찾기 위해 브라우저가 어떻게 불러오고 전달하는지 알아보자
loginForm.addEventListener("submit", onLoginSubmit);위 코드의 작동 방식
1. submit 이벤트를 감지하면 onLoginSubmit 함수를 호출한다
2. 이때 브라우저는 함수를 호출하면서 어떤 argument를 가지고 호출한다. 즉, onLoginSubmit이 onLoginSubmit() 처럼 비어있는 채로 호출되지 않고 ‘추가적인’ 정보를 담아서 호출한다는 것!
3. 이 추가적인 정보란? ‘발생한 일에 대해 내가 필요할 만한 정보들’을 전달해주는 것이다. 기억하자. 모든 eventListen function의 첫번째 argument는 항상 ‘지금 막 벌어진 일들에 대한 정보’**라는 걸
따라서 함수의 매개변수 부분에 어떤 string이든 정보를 읽을 수 있는 공간(= tomato)만 제공한다면 얼마든지 읽어올 수 있다
onLoginSubmit 함수를 만들고 이 함수가 어떤 하나의 argument를 받도록 하고, 어떤 정보를 전달해주는지 확인해보자
참고로 함수의 첫번째 매개변수 명은 tomato, olivia, jay 등 ⋯ 아무 단어나 입력해도 된다
콘솔창에 ‘발생한 일에 대해 내가 필요할 만한 정보들’을 전달해주고 있다
-
event.preventDefault();
: 기본적으로 제공되는 ‘브라우저의 기본 동작을 막는’ function
function onLoginSubmit(tomato) {
// 새로고침을 막는다.
tomato.preventDefault();
console.log(tomato);
}
loginForm.addEventListener('submit', onLoginSubmit);출력 값
: 방금 실행된 event에 대한 정보를 제공
→ event 발생 시간, 대상, preventDefault 여부 등등 == event object
cf) argument는 tomato 말고 event로 적는게 관행 ㅎㅎ
#4.3 Events part Two
link를 클릭 했을 때 submit을 막는 동작
#4.4 Getting Username
#4.5 Saving Username
#4.6 Loading Username
