[JS] 바닐라 JS - event, localstorage, api, clock

const loginForm = document.getElementById("login-form");
//auerySelector는 className tagname 모두 가능
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
const inputName = document.querySelector(".inputed-name");

const HIDDEN_CLASSNAME = "hidden"; //자주 사용하는 classname은 대문자로 저장
const USERNAME_KEY = "username";

function onLoginSubmit(e) {
  e.preventDefault(); //submit시 기본동작되는 새로고침 막기
  const username = loginInput.value;

  loginForm.classList.add(HIDDEN_CLASSNAME); //class 추가

  localStorage.setItem(USERNAME_KEY, username);

  inputName.innerText = `Hello, ${username}`;
  inputName.classList.remove(HIDDEN_CLASSNAME); //class 제거
}

const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === "") {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
  //   inputName.classList.add(HIDDEN_CLASSNAME);
} else {
  loginForm.classList.add(HIDDEN_CLASSNAME);
  inputName.innerText = `Hello, ${savedUsername}`;
  inputName.classList.remove(HIDDEN_CLASSNAME);
}

e.preventDefault()

1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)

addEventListener

addEventListener 안에 있는 함수는 직접 실행하지 않는다
브라우저가 실행시켜주고
브라우저에서 해당 이벤트에 대한 정보 즉, object를 가지게 된다.
addEventListener의 함수에서 object에 대한 자리만 할당해주면
해당 이벤트가 발생시킨 정보들에 대한 object들을 볼 수 있다!
이때 해당 이벤트가 가진 기본 Default값을 발생시키지 않기 하게 위해선 preventDefault를 이용하여 막을 수 있다!

visibility:hidden은 공간은 그대로 두고 보이지만 않음
display:none은 잡아둔 공간도 사라짐

로컬스토리지

개발자도구>application>local storages

lcoalStorage 브라우저에 무언가를 저장한 후 나중에 가져 올 수 있음.
lcoalStorage.setItem("username", "nico");
lcoalStorage.getItem("username")
lcoalStorage.removeItem("username")

API(Application Program Interface)

: 사용 규칙을 제공하는 것, 백엔드의 주소와 사용 규칙을 이용해 데이터 요청
severless : openAPI를 이용해 프론트엔드만으로 웹 구성
ex 카카오 책 검색 api, 지도 api

1. 요청과 응답
   get 방식 : 주소창에 모든 정보를 담아 정보 전달
   post : 주소창이 아닌 내부적으로 정보를 담아 보냄

2. Access-Control-Allow-Origin 오류
   보안이 강한 api들은 Access-Control-Allow-Origin 오류 발생
   api 키 공개되는 드으이 보안적 위험 요소가 있어 api 서버자체에서 원천적으로 차단
   =>자체적으로 frontend 서버를 만들어서 요청하면 올바른 요청 가능

조코딩: api의 개념과 활용

clock

const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();
setInterval(getClock, 1000);//1000ms 후 실행됨

두자리수 만들기

"1".padStart(2, "0"); //2자리수가 아니라면 앞에 0을 추가