Wanna be Brilliant Full-Stack Developer

2/15 바닐라 JS 크롬앱 만들기 Getting & Saving Username 본문

Front-End

2/15 바닐라 JS 크롬앱 만들기 Getting & Saving Username

Flashpacker 2022. 2. 15. 13:18

목표

이제 우리가 하고싶은건, 유저가 이름을 제출하면 이 form 자체를 없애고싶다. 

CSS를 통해 숨길수도있다는데 한번 살펴보자!

 

.hidden {
  display: none;
}

CSS에 이렇게 작성하면 classname이 하는 일은 display: none 이라는것이다. 

어떤 요소에게든 이 classname을 주면 그 요소를 숨기게 될것이다!

 

우리가 이름을 제출했을때는 기본동작은 막아주고 form 은 사라지게 만들기위해 

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const loginButton = document.querySelector("#login-form button");

const link = document.querySelector("a");

function onLoginSubmit(event) {
    event.preventDefault();
  console.log(loginInput.value);
}

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  loginForm.classList.add("hidden");
  console.log(username);

}


loginForm.addEventListener("submit" , onLoginSubmit)

이렇게 하면 input에 내용을 입력하는 순간 정보는 들어오고 form 태그는 사라질것이다! 

 

이제 할일은 form은 숨기고 h1은 표시되도록 할것이다. 

<body>
    <form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
  </body>

하지만 h1에 표시할 텍스트가 있을때만 표시하도록 할것이다! 

 

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const greeting = document.querySelector("#greeting")

const link = document.querySelector("a");

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  greeting.innerText ="Hello " + username;
  greeting.classList.remove(HIDDEN_CLASSNAME)

}


loginForm.addEventListener("submit" , onLoginSubmit)

일반적으로 String 만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을떄 사용한다 

이건 loginForm이나 loginInput 처럼 중요한 정보를 담은게 아니라서 대문자로 작성해도 된다. 

여기서 greeting.innerText 에 "Hello " + uername으로 두가지의것을 합치는 하나의 방법이고

이 방법은 별로 좋아하지않느데 간격도 기억해야하고 +도 보기 안좋다. 

greeting.innerText ="Hello " + username;
  greeting.innerText =`Hello ${username}`;

이 두개는 같은 동작을 수행할것인데? 이둘은 똑같다. 둘 다 string이랑 변수를 하나로 합쳐주고 있는데

후자의 방법은 두가지의 규칙을 가지고 있는데 

규칙 하나는 네가 만약 변수와 string을 결합하고 싶다면 또는 변수를 string안에 집어넣고 싶다면 

${변수명} 이렇게 표현하면 끝! $ { } 이부분만 JS가 변수값을 바꿔줄것이다 

가장 중요한 규칙은 ` ` 백틱기호를 사용해야한다 ' ' 기호가 아니다! 

 

결론 :  String이랑 변수를 합치는 방법, 변수를 string안에 포함시키는 방법을 배웠는데

` Hello $ { 변수명 } `; 이다.

다음은 우리가 새로고침 할 떄도 form 볼 필요 없이 이름이 저장 되어 있으면 좋겠다

 

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const greeting = document.querySelector("#greeting")

const link = document.querySelector("a");

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  greeting.innerText ="Hello " + username;
  greeting.innerText =`Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME)

}


loginForm.addEventListener("submit" , onLoginSubmit)

지금 h1은 존재하지만 CSS 를 통해 숨겨지고 있다. form은 submit을 기다리고있다.

submit을 하게되면 많은 일들이 일어날것이다! 

첫번쨰 브라우저의 기본동작을 막게 될것이다.

브라우저가 submit 할떄 원래 하는 동작을 멈추게 되고 우리가 원하는대로 할수 있게 되는것이다.

그다음으로 하게 되는 일은 form에 hidden이라는 class를 추가하는것이다. 

이떄 form 과 h1 모두 hidden이라는 같은 class를 지니게 된다.

 

const username = loginInput.vlaue 부분에서는 loginInput의 값을 변수에 저장하고, 

그런 다음에 기본적으로 비어있는 h1인 greeting을 가져다가  거기에 "hello username"이라는 텍스트를 넣어준다 

그리고 h1에서 hidden이라는 class를 삭제해준다! 

그러면 이제 hidden class 명을 갖고 있는건 form뿐이다.

 

이제 할건 value를 저장하는 방법을 배울것이다

user에게 매번 질문 하기에는 번거러우니까  뭔가를 저장하는건 아주 자주 사용되는 기능이다. 예를 들어 유튜브에서 우리가 볼륨을 조절하고 새로고침하면 유튜브가 그 볼륨값을 기억할것이다. 이게 우리가 말하는 '기억하기' 라는 것이다. 

 

우리의 경우에는 user의 이름을 기억하고 싶다. user가 누구인지 기억하고싶다. 이작업 역시 흔히 하는 작업이다.  classname을 추가하거나 삭제하는것처럼 우리가 브라우저에 공짜로 뭔가를 기억할 수 있게 해주는 기능이 존재하는데 그 API이름은 localStorage이다. local stoarage는 우리가 브라우저에 뭔가를 저장할 수 있게 해주고 그래서 나중에 가져다 쓸 수 있다. 

local stoarge에 뭐가 들어있는지 보고 싶다면 개발자 도구를 이용해야한다! 

여기 있는 것들 모두 다양한 방법으로 유저 정보를 저장할 수 있지만 그 중 local storage가 가장 다루기 쉽다. 

Local storage API를 살펴보면 다양하고 멋진 method들이 많다.

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

 

Window.localStorage - Web API | MDN

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.

developer.mozilla.org

 

하나는 바로 setItem이다. 

setItem을 활용하면 localStorage에 정보를 저장할수 있다. 

다양한 기능으로 삽입하고, 찾고, 삭제할 수있다!

작은 미니 DB같은데 우리는 KEY와 Value만 준비하면 된다! 

이제 우리가 할일은 유저가 이름을 제출할떄 그걸 저장해주면 된다! 

 

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const greeting = document.querySelector("#greeting")

const link = document.querySelector("a");

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  localStorage.setItem("username" ,username);
  greeting.innerText ="Hello " + username;
  greeting.innerText =`Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME)

}


loginForm.addEventListener("submit" , onLoginSubmit)

다음에는 우리는 우선 localStorage에 username이 존재하는지 확인하고 우리는 form을 표시하지 않을것이다

우리는 바로 h1요소가 바로 표시되도록할것이다

만약에 localstorage에 유저 정보가 없다면 form이 먼저 표시되도록 할것이다.

'Front-End' 카테고리의 다른 글

2/16 JAVASCRIPT CLOCK #Intervals #timeout #padStart  (0) 2022.02.16
2/15 바닐라 JS 크롬앱 만들기 Loading Username  (0) 2022.02.15
2/15 바닐라JS 크롬앱 만들기 Events #1 & #2  (0) 2022.02.15
2/15 바닐라 JS 크롬앱 만들기! input values, From Submission  (0) 2022.02.15
바닐라 JS 크롬앱만들기 CSS in Javascript #3  (0) 2022.02.11
'Front-End' Related Articles more