JS로 Momentum Clone하기! - 1

배준현·2021년 8월 31일

JavaScript 기초

JS로 Momentum Clone

목록 보기

1/3

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

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

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

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

🙄 Vanilla Javascript란?

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

🙄 왜 배우나요?

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

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

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를 이용하여 현재의 위치의 날씨를 화면에 띄워줍니다.

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 당겨오기

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태그를 당겨온다.

✨ 배운점 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("키 값")으로 받아올 수도 있다.

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

배준현

취업어케하죠

다음 포스트

JS로 Momentum Clone하기! - 1