JS로 Momentum Clone하기! - 1

배준현·2021년 8월 31일
0

JS로 Momentum Clone

목록 보기
1/3
post-thumbnail

💥 Javascript를 이용하여 웹 페이지 구현해보자

Nomad Coder님의 'Vanilla JS로 크롬 앱 만들기'를 따라가며 제가 배운 것들을 정리하는 포스트입니다

'바닐라 JS -> 관련 프레임워크 -> 백엔드' 로 빠르게 웹 개발과정을 돌아보는 과정의 시작입니다.

글 솜씨가 아주 부족합니다..

🙄 Vanilla Javascript란?

Vanilla Javascript 프레임워크나 라이브러리가 적용되지 않은 순수한 JS를 뜻해요

🙄 왜 배우나요?

후에 배우려하는 프레임워크, 라이브러리를 좀 더 깊게 이해하고 활용하기 위해 순수한 JS를 배워두기 위함입니다. 기초가 단단히 잡혀 있어야 후에 안 흔들릴거 같아서요

각 기능별로 여러개의 javascript 파일로 나누어 구현합니다.

  1. Greeting.js : 사용자로부터 입력을 받은 값을 Local Storage에 저장해 사용자를 기억합니다.
  2. Clock.js: 현재의 시간을 페이지에 나타냅니다.
  3. Quotes.js ,Background.js : 명언과 배경화면을 랜덤하게 화면에 띄워줍니다.
  4. Todo.js : 할 일을 User한테 입력받은 후, 바로 화면에 띄워줍니다. 또한, Greeting과 같이 Local Storage에 저장해두어 User가 다시 들어왔을 때 이전의 todo list를 띄워줍니다.
  5. Weather.js : navigator를 이용하여 현재 좌표를 받은 후, Open Weather API를 이용하여 현재의 위치의 날씨를 화면에 띄워줍니다.

1. Greeting.js

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는 로그인한 사람을 기억하여 다음에 다시 접속했을때 다시 로그인 하지 않게 해줍니다.

✨ 배운점 1 : Javascript 파일에서 HTML id 당겨오기

  1. Document.getElementsBy~ : 물결표 부분에 Id, ClassName, TagName, Name과 같은 형태로 HTML을 당겨올 수 있다.
  2. Document.querySelector() : 소괄호안에 표현방식에 따라 class, Id, Tag를 호출 할 수 있다.
querySelector("#login-form input");
해석 > querySelector("login-form라는 ID의 밑에 있는 input 태그");

위와 같은 형식은 login-form이라는 이름을 가진 ID밑의 input태그를 당겨온다.

✨ 배운점 2 : addEventListener()로 유저의 행동을 듣습니다.

loginForm.addEventListener("submit",onLoginSubmit);
addEventListener("액션 종류",액션했을때 실행할 함수);

위의 코드는 input 태그의 submit 액션을 기다리고 있다가 User가 submit하게 되면 'onLoginSubmit' 함수를 호출합니다. action 종류는 매우 다양해서 구글링으로 알 수 있다.

✨ 배운점 3 : preventDefault()로 브라우저의 기본 행동을 막습니다.

event.preventDefault(); 

위의 코드는 기본적으로 브라우저에서 실행하게 되는 동작들을 막습니다. 예를 들어, submit과 같은 동작시 기본적으로 현재 창을 refresh하게 되는데 preventDefault()를 사용하게 되면 이러한 행동을 막게됩니다.

✨ 배운점 4 : classList.add, classList.remove 사용한 태그 class 삽입,삭제

loginForm.classList.add(HIDDEN_CLASSNAME); 
greeting.classList.remove(HIDDEN_CLASSNAME);

위와 같은 코드는 HIDDEN_CLASSNAME을 추가,삭제합니다. 또한 toggle을 사용하면, 만약 값이 존재한다면 삭제하고, 존재하지 않는다면 추가합니다.

✨ 배운점 5 : localStorage의 setItem, getItem 이용한 접근

localStorage.setItem("키 값","저장할 값");  
localStorage.getItem("키 값");

setItem으로 localStorage에 값을 '키:값' 형태로 저장하며, 이 값은 임의로 삭제하지 않는 이상 저장되어 있다. 이렇게 저장되어진 값을 getItem("키 값")으로 받아올 수도 있다.

이전에 짤막하게 배웠음에도 처음 배우는 느낌이었다. 나머지 코드들도 정리해서 올려야지.

profile
취업어케하죠

0개의 댓글