차근차근 따라하기 시작해보기
로그인 부터 만들어 보자!!!
나의 공부와 복습을 위해서 정리했기 때문에 의식의 흐름과 매우 장황하고 긴 글이 될 것임...
🪄 Login
1. Input values
- HTML에 input과 button을 만들었음.
<body>
<div id="login-form">
<input type="text" placeholder="What is your name?" />
<button>Log In</button>
</div>
<script src="app.js"></script>
</body>- JS에서는 HTML의 input과 button을 가져오고 싶음
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
// querySelector 로 id태그를 쓸때는 #를 써야한다 하지만
// getElementById 로 id태그를 쓸땐 #를 안써도된다
function onLoginBtnClick() {
console.log(loginInput.value);
}
loginButton.addEventListener("click", onLoginBtnClick);- 필요한 element를 가져오고 사용자가 입력한 값을 콘솔창에 표시하고 싶었음
⇒ console.log(loginInput.value);
2. Form Submission
- 사용자가 이름을 입력하지 않거나 너무 길지 않게 하기
function onLoginBtnClick() {
const username = loginInput.value;
if (username === "") {
alert("Please write your name");
} else if (username.length > 15) {
alert("Your name too long!");
}
}- 그러나 HTML의 기본 속성을 이용할 수 있다면 JavaScript에서 구현하는 대신 HTML을 최대한 활용하기!!
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<button>Log In</button>
<!-- button태그는 form태그에 감써져야 submit기능이 됨..ㅜ_ㅜ -->
</form>- div를 form으로 고치지 않아서 button이 submit되지 않았었음.. 미친 ㅠ_ㅠ 개빡쳤는데
왜냐면 유효성알람이 계속 안떴기 때문에 ... 코드는 잘못 된게 없어보였고... - 물론 계속 새로고침되니까 submit되는 것을 막아야함..
- 그러나 난 왕초보라 하나하나 차례로 똑같이 따라하지 못하면 이해가 안돼고 넘나 서터레스 받는 것... ㅠ-ㅠ
3. Event
function onLoginSubmit(event) {
event.preventDefault();
// preventDefault는 브라우저가 기본 동작을 실행하지 못하게 막음
console.log(loginInput.value);
}
loginForm.addEventListener("submit", onLoginSubmit);
// submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미
// JS는 onLoginSubmit함수 호출시 인자를 담아서 호출함.
// 해당 인자는 event object를 담은 정보들- form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다.
이것은 우리가 원하는 것이 아님! - preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!
- 이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다. 첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
- JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다. ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음
- addEventListener 안에 있는 함수는 직접 실행하지 않는다
- 브라우저가 실행시켜주고
- 브라우저에서 해당 이벤트에 대한 정보 즉, object를 가지게 된다.
- addEventListener의 함수에서 object에 대한 자리만 할당해주면
- 해당 이벤트가 발생시킨 정보들에 대한 object들을 볼 수 있다!
- 이때 해당 이벤트가 가진 기본 Default값을 발생시키지 않기 하게 위해선 preventDefault를 이용하여 막을 수 있다!
4. Getting Username
- form에 사용자가 이름을 입력하면 form은 사라지고 h1에 사용자가 입력한 입력 값을 넣어서 짜잔~ 하고 나타나게 하고 싶다.
const HIDDEN_CLASSNAME = "hidden";
//일반적으로 string만 포함된 변수는 대문자로 표시하고 string을 저장하고 싶을 때 사용함.
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
greeting.innerText = `Hello ${username}`;
//greeting.innerText = "Hello " + username;
//위의 두개는 string과 변수를 합치는 코드 둘 다 같은 의미이지만
//위의 코드가 더 새로운 방식
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);- string과 변수를 합칠 때 규칙
: 변수는 ${변수명}으로 쓸 것 이부분만 변수 값으로 바뀐다
시작과 끝은 `(백틱)으로 감쌀 것!!
댓글 중 공부가 되었던 댓글을 가져왔다
💡 visibility:hidden이랑 display:none의 차이점
visibility:hidden은 공간은 그대로 두고 보이지만 않는건데
display:none은 잡아둔 공간도 사라진다!!
5. Saving Username
- localStorage는 브라우저에 뭔가를 저장할 수 있게 해주고 나중에 가져다 쓸 수 있게 해준다.
- 마치 아주 작은 DB 같은 것 Key-value를 쌍으로 준비해 주면 된다!!!
- setItem, removeIten으로 저장, 삭제 가능
- localStorage.setItem("username", username);를 함수 안에 넣어주면 사용자의 이름을 저장할 수 있고 새로고침을 해도 저장되어 있다.
- 그러나 여전히 새로고침을 하면 다시 form이 다시 나타난다.
6. Loading Username
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreeting(username);
}
function paintGreeting(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savesUsername = localStorage.getItem(USERNAME_KEY);
if (savesUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
paintGreeting(savesUsername);
}- 내가 헷갈릴까봐 복습 영상 보면서 차례로 정리해봄...
- JS는 제일먼저 localStorage를 확인함.
localStorage에 저장된 것이 없으면 savesUsername는 null이고 if문이 true니까
loginForm.classList.remove(HIDDEN_CLASSNAME);
⇒ form의 hidden 삭제, form 나타남
loginForm.addEventListener("submit", onLoginSubmit);
⇒ loginForm에 addEventListener더하고 submit기다림.
⇒ submit이 발생하면 onLoginSubmit함수가 실행됨. - function(함수) onLoginSubmit는...
event.preventDefault();
⇒ 원래 event가 하던 행동을 멈춤(여기서는 submit의 페이지 새로고침)
loginForm.classList.add(HIDDEN_CLASSNAME);
⇒ loginForm에 hidden클래스를 추가함 (form 사라짐)
const username = loginInput.value;
⇒ logininput.value(사용자가 input에 입력한 값)를 username이란 변수로 저장하고
localStorage.setItem(USERNAME_KEY, username);
⇒ username값(input값을 변수로 저장한 것, 키-밸류에서 vlaue)을 username이라는 key(USERNAME_KEY)와 함께 localstorage에 저장한다.
⇒ (참고) localstorage에 저장할 때 key-value로 저장!!
paintGreeting(username);
⇒ 사용자가 입력한 값인 username을 인자로 받는 함수 paintGreeting(username) 호출 - function paintGreeting(username)은
⇒ username이라는 인자를 하나 받고 있고
greeting.innerText =Hello ${username};
=> greeting(h1을 받는 변수)에 Hello ${username}라는 텍스트 추가
greeting.classList.remove(HIDDEN_CLASSNAME);
=> greeting에 hidden클래스 제거(greeting 나타남)
- “Hello 사용자이름”을 브라우저에서 보고 새로고침을 하면?
- 가장먼저 form과 h1 모두 클래스에 hidden이 있는 상태로 시작 (둘다 안보이는 상태)
- 앱이 실행되면 localStorage에서 savesUsername을 얻으려고 할 거임
그런데 localStorage에 저장된 username이 있으니까
savesUsername === null이 False가 되고
바로 paintGreeting(savesUsername) 호출함 - paintGreeting(savesUsername)함수는 sting을 인자로 받을 거임
위에서 savesUsername는 localStorage에 저장된 username이므로 이것을 string으로 받음
따라서 새로고침 전의 paintGreeting(username)와 같은 상황이 됨
🚨 코드에서 paintGreeting함수의 인자가 위에서는 username이고
아래쪽에서는 savesUsername 이라서 헷갈리기 쉬움 틀리지 않도록 조심하자!!!
7. 코드 손보기
- 좀 더 고쳐보기
- paintGreeting 함수는 굳이 인자를 받을 필요가 없다. 왜냐면 localStorage에 유저정보가 있다는 것을 이미 알고 있기 때문에...
- paintGreeting 함수의 인자를 삭제하고, paintGreeting 함수 안에
const username = localStorage.getItem(USERNAME_KEY);
를 추가해서 localStorage 안에서 username을 찾을 수 있도록 한다. - 왜냐면 paintGreeting 함수를 호출한다는 것 자체가 이미 사용자 정보가 저장 되었다는 의미 이므로 함수 안에서 사용자 정보를 찾고 출력하면 됨
- 그러면 onLoginSubmit함수 에서도 사용자 정보를 따로 변수로 정할 거 없이 바로 저장하면됨
const username = loginInput.value;를 삭제하고
localStorage.setItem(USERNAME_KEY, username);에서
username ⇒ loginInput.value로 바꾸면 됨 - 이렇게 고치면 localStorage를 두번 열어 보게 된다. 어떤 방법으로 할 지는 선택!!
- 강의에서는 첫 번째 코드로 진행될 것 같기에 나도 첫번째 방법으로 할 듯
제가 공부하고 공유하고 싶은 글을 올리고 있습니다.