[자바스크립트(JavaScript)] 크롬 앱 만들기(Vanilla JS)

[자바스크립트(JavaScript)] 크롬 앱 만들기(Vanilla JS)

2024. 2. 23. 00:39ㆍ클라이언트/JavaScript

노마드 코더의 바닐라 JS 강의를 보며 바닐라 자바스크립트로 크롬 앱을 만들어 보았다.

로그인 기능 만들기

<body>
  <form id = "login-form">  <!--user가 입력하는 값의 유효성을 확인하려면 form으로 감싸야한다. 
  확인하는건 중요한 습관이고 좋은 연습이다.-->
	<input
	  required  <!--필수입력하게 하는것-->
	  maxlength="15" <!--최대입력 갯수 -->
	  type="text"
	  placeholder = "What is your name?"/>
<button>Log In</button>

추가로 input type이 text가 아닌 submit이면 버튼을 누르거나 엔터를 누르면 유저가 작성한 form이 submit된다. 하지만 submit이 되면 될때마다 페이지가 새로고침이 된다. 이러한 문제를 해결하려면.

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

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

function onLink(event) {
  event.preventDefault();
}

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

loginForm.addEventListener('submit', onLoginSubmit);
link.addEventListener('link', onLink);

위의 코드에서 “submit” 이나 “link”가 실행되면 함수를 실행시키는데 시키는 동시에 그 함수에 첫번째 인자로 event가 담긴object를 넣어준다. submit 이나 link 를 클릭 하거나 하게 되면 브라우저에서 기본적으로 새로고침을 하고 링크로 이동을 하게 되는 기본 옵션이 있는데 이것을 때로 막아야 한다. 그때 필요한 명령이 event.preventDefault( ); 이다.

+ 백틱 ``

백틱을 사용하면 문자열에 이어서 변수를 쓸 수 있다. 아주 유용하니 꼭 알아 두어야 한다.

1. "Hello " + username ; //username은 변수라고 했을때 이런 방법이 있다.
2. `Hello ${username}` ; // 1번과 2번 모두 똑같은 기능이다. 변수 이름앞에 $를 붙여준다.

+로컬스토리지(localStorage)

자신의 브라우저에 개발자 탭에 application이 있는데 그 안에 localstorage가 있다. 이 안에 db처럼 브라우저가 가지고 있어야 할 정보들을 보관 할 수 있다. 보관 뿐 아니라 삭제, 수정, 추가까지 가능하다.

localStorage.setItem("username", "nico" );
// 이렇게 하면 localStorage에 key값 username  value는 nico 라고 저장되게된다.
localStorage.getItem("username");
//localStorage에서 username의 값 가져오기.
localStorage.removeItem("username");
//username 정보 삭제하기.

로그인 폼 최종 코드

시계 기능 만들기

setInterval(sayHello, 5000);
//setInterval은 두개의 인자를 받는다. 
//첫번째는 실행하고자 하는 function,
//두번째는 호출되는 function을 몇ms간격으로 호출할지. 5000 = 5초

setTimeout(sayHello, 5000); // 5초동안 기다렸다 function이 한번 실행된다.

interval을 사용한 시계

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

function getClock() {
  const date = new Date(); // js에서 날짜 정보를 가져오는 코드
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
  //clock id에 text로넣으면 시계끝
}
getClock(); //page가 load되자마자 실행
setInterval(getClock, 1000); // getClock을 1초마다 실행

하지만 위 코드에선 seconds부분이 1 , 2 , 3 , 4 ,이렇게 표시되기 때문에 01 , 02 , 03 으로 바꿔보자.

"1".padStart(2,"0") 
// "1"이라는 string 앞쪽의 길이를 늘려서 길이가 2가되고 2가 되지않는다면 그자리에 0을 넣어달라.
// 그 외로 .padEnd()가 있다. 뒤쪽에 문자를 추가하는것.

완성 된 시계 로직

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

function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, '0'); 
  //String으로 감싸줘서 num을 string으로 바꿔서 return함.
  const minute = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  clock.innerText = `${hours}:${minute}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);

'클라이언트 > JavaScript' 카테고리의 다른 글

[자바스크립트(JavaScript)] 배열 메소드 (array method) (0)	2024.02.23
[자바스크립트(JavaScript)] to-do list 만들기 (0)	2024.02.23
[자바스크립트(JavaScript)] 랜덤명언, 랜덤 배경 만들기 (0)	2024.02.23
[자바스크립트(JavaScript)] 데이터 타입 (Data Type) (0)	2024.02.22
[자바스크립트(JavaScript)] 변수(variable)와 불리언(Boolean) (0)	2024.02.22

Developer Han