[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기

[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 1

javascript 2019. 4. 23. 14:04

안녕하세요, Jerry입니다.

포스팅에 앞서 조용한 상황을 가정하고 시작해보려고 합니다.

회사나 조용한 곳에서 데스크탑 혹은 노트북으로 일을 보고 있습니다. 알람을 맞춰야 하는데 소리모드로 하자니 주위가 조용합니다. 진동모드로 하자니 제가 진동을 체크 못 할것 같습니다. 그렇다면 시간을 어떻게 맞춰야 할까요?

그래서 생각한 정말 정말 매우 매우 간단한 웹 앱을 하나 만들어보려고 합니다.

이름을 굳이 지어야 한다면, Silence Alarm으로 지어놓고 시작하겠습니다.

(혹시 괜찮은 이름 있으면 댓글 남겨주세요 XD)

간단한 웹 앱에 무엇이 필요한지 체크해보겠습니다.

1. 현재 시간

2. (알람이 울릴)설정 시간

3. 새 창

4. 화면 눈에 띄게 깜빡거리기

이 정도면 될 것 같습니다.

설정한 시간이 현재 시간과 같아질 때 창이 하나 뜨면서 눈에 띄는 색으로 화면을 깜빡거리는 겁니다.

왜 새 창을?

저는 데스크탑으로 노래를 들어야 한다면 크롬 브라우저에서 탭을 하나 열고 유튜브(yotube)로 갑니다.

노래전용 탭인거죠. 그리고는 다른 탭을 열어 볼 일을 봅니다.

마찬가지라고 생각합니다. 사용자의 경우 알람 화면을 계속 켜둘 수 없기 때문에 알람 화면을 켜둔 채로 새로운 탭을 열어 다른 업무를 보러 갑니다. 그러면 기존의 알람 웹 앱 화면이 깜빡인다고 해도 사용자가 알아차릴 수 없기 때문에 새 창을 열어줍니다.

코드를 작성하고 코드 아래에 글을 작성하겠습니다 :)

~~(코드블럭 정말 안예쁘다...)~~

CSS

body {
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: table;
}

.nav {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.js-alarm{
  width: 100%;
  height: 100%;
  text-align: center;
}

예쁘게 꾸며진 css가 아닙니다. 그냥 가운데에 시계 들어가고, input태그 들어간게 끝입니다. input태그를 가운데로 위치시킬 때 이 방법말고 혹시 아시는 분 계시면 댓글로 알려주세요!

HTML

<html>
<head>
  <meta charset='utf-8'>
  <title>ALARM</title>
  <link rel='stylesheet' href='alarm.css'>
</head>
<body>
  <div class='container'>
    <div class='js-alarm nav'>
      <h1>00:00:00</h1>
      <input type='time' min='00:00' max='23:59'/>
    </div>
  </div>
  <script src='alarm.js'></script><!-- alarm.js를 만들어야 한다. -->
</body>
</html>

이렇게 간단하게 틀만 잡아놓고 시작하겠습니다. ~~(아마 꾸미는거 없이 이대로 끝이지 않나 싶은 예감..)~~

<head></head>태그 안에 <link>태그가 보이시나요? rel속성은 링크된 자원이 참조되어 있는 문서에 있는 관계를 정의하는 역할을 합니다.

자, 이게 무슨 소리인가?

현재 HTML파일에 alarm.css는 stylesheet로 참조된 문서, 즉 이 자원은 스타일시트다. 란 의미입니다. rel이 아마도 관계를 뜻하는 relationsheep의 약어이지 않을까 싶네요.

@since 2019-04-24

네, 포스팅 이후 찾아보니 relationsheep의 약어가 맞는거 같습니다.

그럼 이제, 이 CSS를 alarm.css, HTML을 alarm.html이라고 저장하고 브라우저로 열어보겠습니다.

브라우저로 html파일을 여는 방법은 여러가지가 있습니다.

1. 크롬의 경우 단축키가 있는데 [CTRL + O]를 누르게 되면 파일을 여는 창이 나타납니다. 거기서 열고자 하는 파일을 선택하여 열면 됩니다.

2. 조금 더 간단할수도 있고 귀찮을 때도 있는 방법은 파일을 직접 브라우저에 드래그하는 것입니다. 아래의 사진을 참고하세요.

그렇다면, 위에 우리가 작성한 HTML파일과 CSS파일이 어떻게 브라우저에 나타나는지 아래의 캡쳐를 한 번 볼까요?

저는 약간 이상하죠? 우리는 분명 위에 작성한 HTML 코드에 <h1>00:00:00</h1>라고 작성했는데 시간이 나오네요.

네; 저는 alarm.js가 만들어져 있었기 때문이에요. 우리도 시간이 나오도록 이제 javascript를 작성해보려고 합니다. 이제부턴 엄청 재미있을겁니다! 네, 전 재밌었어요 :)

기대를 품고 앞으로 나아가보죠! 일단 단계적으로 설명을 드려야되기 때문에 코드를 끊어서 올리고 포스팅 마지막에 전체 코드 올릴게요.

JS-1

const alarmContainer = document.querySelector('.js-alarm');
const currentTime = alarmContainer.querySelector('h1');

function getTime(){
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  currentTime.innerText = 
  `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init(){
  getTime();
}

init();

여기서 JS는 한 번 끊고 설명드릴게요. (설명을 글로만 하려고 하니 저도 답답하고 글 보시는 분들도 뭔가 답답해 하실거 같은 느낌이 듭니다. 영상도 찍어야겠다는 생각이 드네요.)
일단 HTML에서 class명을 js-alarm이라고 명시한 div를 변수에 담고, div의 자식인 h1도 변수로 담습니다.

1. const : ES6에서 도입된 상수 TYPE입니다. 기존엔 var 뿐이었죠, const와 let이 추가되어서 var는 거의 안쓰는 추세입니다. var 와 let의 차이점이 궁금하다? https://bejerry.tistory.com/7 잠시 가서 보고 오셔도 됩니다. 간략하게 설명해뒀습니다. 링크로 올린 포스팅은 추후 컨텐츠 보완할 계획이구요.

2. querySelector : Document.querySelector()로 사용합니다. Document는 선택자 혹은 선택자 뭉치로 보면 됩니다.

document.querySelector('.js-alarm')은 document에서 class명이 js-alarm인 Element 중에 첫 번째인 것을 가져옵니다.

3. getTime(): 시간을 세팅해주는 함수를 만들었습니다. 시간에 관련된 메서드들은 https://bejerry.tistory.com/11 에서 자세한 설명을 보실 수 있습니다. 이 포스팅이 점점 루즈해지는 것을 감안하여 자세한 설명을 여기서 하진 않겠습니다. (사실 영상으로 또 올릴 생각입니다!) 소스에 백틱( ` )도 볼 수 있죠?

JS-1-1


currentTime.innerText = `${hours}:${minutes}:${seconds}`;

위에 JS-1 소스는 3항연산자로 구성되어 있었고, 이건 간단하게 Date객체에서 얻어온 현재 시간과 분, 초 입니다. 근데 어째서 3항연산자로 복잡해보이게 소스를 짰냐? JS-1-1처럼 코드를 적으면 09:10:08로 나오는게 아니라 참으로 슬프게도 9:10:8로 브라우저에 출력됩니다. 0이 없어도 되는 분들은 3항연산자를 사용하지 않고 JS-1-1 소스처럼 하셔도 돼요! 저는 0이 있는게 이쁩니다. 그래서 3항연산자로 10이라는 숫자보다 아래면 앞에 0을 붙이고 아니면 그냥 본래 시간으로 나오라는 의미로 코드를 작성했습니다.

저는 이제 저게 멈춰있는 시간이 아니라 실시간으로 시계처럼 초가 바뀌고, 분이 바뀌는걸 보고 싶습니다! 꼬옥 이럴 때 나오는게 있죠? 다음 이 시간.. 웁웁(!)

'javascript' 카테고리의 다른 글

[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 3 (0)	2019.04.24
[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 2 (2)	2019.04.24
[JavaScript/VanillaJS] 날짜 계산/날짜 포맷팅(setDate/format/...) (2)	2019.04.17
[JavaScript/VanillaJS] 마우스 오버 및 휠 이벤트 (onmouseover, onmousewheel) (0)	2019.04.10
[JavaScript/VanillaJS] 마우스 휠 이벤트 (a.k.a window.onmousewheel) (0)	2019.04.09

ABOUT ME

JERRY의 공부방🔥 JERRY의 공부방🔥

'javascript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'javascript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바