바닐라js로 크롬 앱 만들기(노마드 코더)-1
모멘텀 앱을 클론 코딩
https://happy-inside.tistory.com/71
이름 기억, 시계 구현, 이미지 변경, 날씨, 위치 정보.(gelocation),명언들,to-do리스트 구현하기(사용자 입력 저장, 여러 to do리스트 구현.)
시작
세가지 파일 생성, app.js,style.css,ined.html
const는 불변하는 값, 값을 바꾸고 싶을 떄는 let을 사용.
절대 var는 쓰지 마라-- 너무 낡음.
기본적으로 const를 쓰고 업데이트가 필요한 것들에게 let을 사용.
다른 방식으로 구현됐지만 비슷한 결과를 가지는 함수들
1.
function Hello(name, age)
{
console.log("안녕! 내이름은" + name + "그리고 내 나이는" +age);
}
Hello("민기",21);
Hello("이린",423);
- const Player = {
name:"민기",
sayHello: function(name)
{
console.log("안녕!"+name+"반가워!");
},
};
Player.sayHello("아린");
console.olg처럼 계산할줄아는 함수만들기.
const calculator ={
add: function(a,b){
console.log(a+b);
},
};
calculator.add(5,1);이렇게.
parseint -- 숫자로 타입을 변환
isNan() --이자가 숫자인지를 참 거짓으로 알려줌.
document를 웹에 입력하면 정보를 알수 있다.
document.title ="hi"
;라고 하면 웹을 통해 코드를 바꿀 수도 있다
이벤트를 리슨하기
title.addEventListner("click")
타이틀을 클릭하는 것을 리슨한다.
그러나 이것만으로는 이베트가 발생하지 않으므로 함수를 정의
function TC(){
console.log("눌림");
}
그리고 이를 이벤트의 두번째 인자로 받는다.
title.addEventListner("click",TC)
<div id="login-form">
<input type="text" placeholder="이름이 뭐예요?"/>
<button>로그인</button>
</div>버튼들 생성, js파일에서
const loginForm = document.getElementById("login-form");
으로 선택. 그리고 이제 문서를 통해 찾는게 아니라 loginform을 통해 바로 찾아가기.
const loginInput= loginForm.querySelector("input");
const loginButton= loginForm.querySelector("button");
으로 버튼과 인풋을 바로 가져감.
function onLoginBtnClick(){
console.log(loginInput.value);
}
으로 로그인 확인, 다만 이떄의 문제는 아무것도 입력안해도 로그인이 시도되는 것, 입력을 해야만 로그인이 되게 해야 한다.
사용자명의 유효성 확인
이름 없으면 로그인 x
이걸 조건문을 써서 텍스트값이 없을때, 글자 수가 15이하일떄 이렇게 제한하여 구현할 수도 있지만 form의 기능을 활용할 수도 있다.
required로 이름을 입력하게 만듦, maxlength로다가 최대 길이 정함.
그럼 이렇게 
창이 나온다.
이제 문제는 버튼의 클릭여부가 아닌 form의 서브밋 여부가 된다.
preventdefault는 브라우저의 행동을 막는다.
이제 링크에 대해 링크로 넘어가는 동작을 막아보자.
링크 작성 -- 유튜브로
링크 가져오기. -- const link = document.querySelector("a");
링크 클릭 이벤트 -- link.addEventListener("click", LinkClick);
이벤트 함수 --function LinkClick(){ alert("와우!");}
이벤트를 통해 링크로 넘어가는 걸 막기 ---function LinkClick(event){
event.preventDefault();
이름 작성 후에 폼을 없애기.
1.html자체를 없애기 2.css를 통해 숨기기. 2번으로 css를 활용하자.클래스 작성 --.hidden{ display: none;} --이걸 부여해주면 어떤 요소든지 간에 숨길 수 있다.
이벤트를 통해 form에다가 hidden을 추가해주기 --
const username = loginInput.value;
loginForm.classList.add("hidden");
이러면 이름 입력시에 form이 사라지게 됨.
이제 form이 사라지게 되면 그 자리에 유저 이름이 크게 나타나도록 해야함.
html에 이름을 강조 표시해줄걸 숨겨둠.--
js에서 id=greeting을 선택--- const greeting = document.querySelector("#greeting");
선택한 것의 내부 텍스트를 지정해줌. ---
greeting.innerText = "안녕 " + username;
지금 hidden이란 클래스를 여러번 쓰고 있으니까 이걸 변수화 해줘서 간략하게 하기.--
const HIDDEN = "hidden";
이름을 숨기고 있는 히든 클래스를 없애주기 -- greeting.classList.remove(HIDDEN);
)추가로 알아두기.
greeting.innerText = "안녕 " + username;
greeting.innerText = 안녕 ${username};
둘은 동일한 역할을 함. 2번은 백틱() 기호를 사용한다.
이름을 저장하기.
api,localstorage활용로컬 스토리지에 유저 이름 저장. --- localStorage.setItem("username", username);
이렇게 값이 저장되는 걸 볼 수 있다.
이름 유무에 따라 폼 사용.
이름이 저장 되어 있으면(로그인 되었으면) 폼을 보여주지 않기.저장소의 이름 가져오기 -- const savedname = localStorage.getItem("username")
유저 이름이 반복되고 있으므로 변수화 --const USERNAME ="username"
이것과 const username = loginInput.value; 이거간의 차이점은 전자는 저장소의 이름을 뜻하고 후자는 입력받은 값을 뜻한다.
조건문으로 폼 표시 --if(savedname === null){ //폼을 표시. }else{}
문제는 지금 상태에서 폼이 이미 표시중이란 것, 그러니까 폼도 시작시에 숨겨야 함.
폼 숨기기 --
if(savedname === null){
loginForm.classList.remove(HIDDEN);
loginForm.addEventListener("submit", onLoginSubmit);
}else{}
이름이 입력되면 화면에 이름이 나오도록하자, --
else{ greeting.innerText = 안녕 ${savedname};
greeting.classList.remove(HIDDEN);}
이제 이름이 기억되어서 리로드를 해도 
이렇게 화면이 나오는 걸 볼 수 있다.
greeting.innerText와 greeting.classList가 반복되고 있으므로 함수로 만들어 중복을 없애 주자.
함수 생성 --
function paintGreetings(username){
greeting.innerText = 안녕 ${username};
greeting.classList.remove(HIDDEN);
}
함수 써서 else 부분을 간략화 -- else{ paintGreetings(savedname);}
여기까지 코드의 흐름
- 저장소에 유저명이 없으면 폼의 submit을 기다리고 form에서 submit되면 input을 통해 유저정보를 받고
- 그 정보를 인자로 받은 함수 paintgreeting을 호출(안녕 텍스트 출력, 감춰둔 텍스트 보이게 함.)
- 세부적 흐름 function onLoginSubmit(event){ event.preventDefault(); loginForm.classList.add(HIDDEN); const username = loginInput.value; localStorage.setItem(USERNAME_KEY, username); paintGreetings(username); }
- onLoginSubmit함수의 역할, 이벤트의 기본 행동(새로 고침)을 멈추고 로그인 폼을 숨김, 입력된 이름을 전달하고, 저장소에 전달받은 이름을 저장. 그리고 함수 실행.
Author And Source
이 문제에 관하여(바닐라js로 크롬 앱 만들기(노마드 코더)-1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mingi001/바닐라js로-크롬-앱-만들기노마드-코더-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
