📍 localStorage를 이용한 UserName 정보 저장
입력창 작성 시 유저 이름이 나오도록 작업해 준다.
💻 HTML
<!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"> <title>Momentum APP</title> </head> <body> <form id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?"> <button>Log In</button> </form> <h1 id="greenting" class="hidden"></h1> </body> </html>✔️ 유효성 검사를 하기 위해
form안에input이 포함되어 있어야한다.
💻 Javascript
querySelector()를 사용할 떄는 대상이id,class,TagName인지 명확히 작성해 줘야한다.//파일 먼 찾아주기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greenting = document.querySelector("#greenting");
✔️String과 변수 같이 작성하기
greenting.innerText = "Hello " + username; //첫번째 방법 greenting.innerText = `Hello ${username}`; //두번째 방법첫번째 방법 -
"String" + 변수명
띄어쓰기를 String 내부에 같이 포함시켜야 하는 불편함이 있다.두번째 방법 -
String ${변수명}
첫번째 방법보다 효율적으로 사용 할 수 있다.
몇가지 규칙을 가지고 있다.(``) 벡티기호로 감싸기,${변수명}으로 작성하기** 맥북의 경우 단축키
opt + ~해주면 된다.
(VS code에서는 자동으로 작성 되는거 같다.)💻 작성 코드
//파일 먼 찾아주기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greenting = document.querySelector("#greenting"); const HIDDEN_CLASSNAME = "hidden"; const link = document.querySelector("a"); function onLoginSubmit(event){ event.preventDefault(); loginForm.classList.add(HIDDEN_CLASSNAME); // console.log(loginInput.value); const username = loginInput.value; greenting.innerText = `Hello ${username}`; greenting.classList.remove(HIDDEN_CLASSNAME); } loginForm.addEventListener("submit",onLoginSubmit);✔️ event.preventDefault();
해당 함수를 추가해 브라우저의 기본 동작을 막을 수 있다. (event의 기본 행동 발생하지 않도록 막아 준다.)
form이submit할 경우 새로고침 되는 부분을 해결 할 수 있다.✔️ 반복되는 String
반복되는 String을 사용할 경우 상수를 이용해 대문자로 작성해 준다. (오타로 인한 오류를 방지하기 위해)
const HIDDEN_CLASSNAME = "hidden";
📍localStorage
우리가 브라우저에 무언가를 저장할 수 있게 해주며 나중에 가저다 사용할 수 있다.
setItem,removeItem,getItem3가지 속성으로 추가, 삭제, 불러올 수 있다.localStorage.setItem('myCat', 'tom'); //추가 (localStorage 이름, 추가되는 정보) localStorage.removeItem('myCat'); //삭제 localStorage.getItem('myCat') //불러오기
💻 HTML
<!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"> <title>Momentum APP</title> </head> <body> <form class="hidden" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?"> <button>Log In</button> </form> <h1 id="greenting" class="hidden"></h1> </body> </html>
💻 Javascript
//파일 먼저 찾아주기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greenting = document.querySelector("#greenting"); //반복되는 string을 사용할 때는 대문자로 이용해 준다. const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit(event){ //기본 속성 사용 못하도록 event.preventDefault(); //hidden class를 loginForm에 추가해 안 보이게 처리 loginForm.classList.add(HIDDEN_CLASSNAME); //loginInput의 value값을 username에 할당 const username = loginInput.value; //localStorage에 username저장 localStorage.setItem(USERNAME_KEY, username); //paintGreeting function으로 연결 paintGreeting(username); } function paintGreeting(username){ // 순서가 중요하다. //input 값을 입력할 경우 글자 작성 됨 //hidden class로 숨겨져 있던 greenting을 보이게 표시 greenting.innerText = `Hello ${username}`; greenting.classList.remove(HIDDEN_CLASSNAME); } const saveUsername = localStorage.getItem(USERNAME_KEY); if(saveUsername === null){ // saveUsername값이 null인 경우 show the form loginForm.classList.remove(HIDDEN_CLASSNAME); loginForm.addEventListener("submit",onLoginSubmit); }else { // saveUsername값이 있을 경우 show the greenting paintGreeting(saveUsername); }
✔️ form을 띄워 이름을 작성할 경우 localStorage에 저장된다.
✔️ 이럴 경우 화면에 "Hello 작성 이름" 으로 표시 된다.
✔️ 만약 유저 이름을 작성하지 않을 경우 form화면이 보여진다.
✏️ 마치며
javascript를 공부하면 할 수록 여러 단어를 배우게 된다.
localStorage 로 정보를 저장하고 내볼 낼 수 있었고
preventDefault() 통해 form에서 submit할 때 새로고침 되는 브라우저의 기본 동작을 막을 수 있는 점도 배웠다.
노마드 코더로 틈틈이 공부 중이다. 내가 알지 못한 유용한 정보도 많았다.
한 번만 보고 끝나는게 아니라 지속적으로 강의를 보며 이해하고 다른 사람에게 설명할 수 있는 실력이 되도록 노력해야겠다.
공부 출처 : 노마드 코더 바닐라 JS
