Vanilla Javascript 프레임워크나 라이브러리가 적용되지 않은 순수한 JS를 뜻해요
후에 배우려하는 프레임워크, 라이브러리를 좀 더 깊게 이해하고 활용하기 위해 순수한 JS를 배워두기 위함입니다. 기초가 단단히 잡혀 있어야 후에 안 흔들릴거 같아서요
- Greeting.js : 사용자로부터 입력을 받은 값을 Local Storage에 저장해 사용자를 기억합니다.
- Clock.js: 현재의 시간을 페이지에 나타냅니다.
- Quotes.js ,Background.js : 명언과 배경화면을 랜덤하게 화면에 띄워줍니다.
- Todo.js : 할 일을 User한테 입력받은 후, 바로 화면에 띄워줍니다. 또한, Greeting과 같이 Local Storage에 저장해두어 User가 다시 들어왔을 때 이전의 todo list를 띄워줍니다.
- Weather.js : navigator를 이용하여 현재 좌표를 받은 후, Open Weather API를 이용하여 현재의 위치의 날씨를 화면에 띄워줍니다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "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 savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit",onLoginSubmit);
}else{
paintGreeting(savedUsername);
}
local storage에 저장된 이름이 없다면 이러한 로그인 창을 띄워주게 됩니다.
로그인 하고자 하는 사람의 이름을 입력한 후 enter 혹은 Log in 버튼을 누르게되면 local storage에 저장됩니다.
이 local storage는 로그인한 사람을 기억하여 다음에 다시 접속했을때 다시 로그인 하지 않게 해줍니다.
- Document.getElementsBy~ : 물결표 부분에 Id, ClassName, TagName, Name과 같은 형태로 HTML을 당겨올 수 있다.
- Document.querySelector() : 소괄호안에 표현방식에 따라 class, Id, Tag를 호출 할 수 있다.
querySelector("#login-form input");
해석 > querySelector("login-form라는 ID의 밑에 있는 input 태그");
위와 같은 형식은 login-form이라는 이름을 가진 ID밑의 input태그를 당겨온다.
loginForm.addEventListener("submit",onLoginSubmit);
addEventListener("액션 종류",액션했을때 실행할 함수);
위의 코드는 input 태그의 submit 액션을 기다리고 있다가 User가 submit하게 되면 'onLoginSubmit' 함수를 호출합니다. action 종류는 매우 다양해서 구글링으로 알 수 있다.
event.preventDefault();
위의 코드는 기본적으로 브라우저에서 실행하게 되는 동작들을 막습니다. 예를 들어, submit과 같은 동작시 기본적으로 현재 창을 refresh하게 되는데 preventDefault()를 사용하게 되면 이러한 행동을 막게됩니다.
loginForm.classList.add(HIDDEN_CLASSNAME);
greeting.classList.remove(HIDDEN_CLASSNAME);
위와 같은 코드는 HIDDEN_CLASSNAME을 추가,삭제합니다. 또한 toggle을 사용하면, 만약 값이 존재한다면 삭제하고, 존재하지 않는다면 추가합니다.
localStorage.setItem("키 값","저장할 값");
localStorage.getItem("키 값");
setItem으로 localStorage에 값을 '키:값' 형태로 저장하며, 이 값은 임의로 삭제하지 않는 이상 저장되어 있다. 이렇게 저장되어진 값을 getItem("키 값")으로 받아올 수도 있다.