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

안녕하세요, Jerry의 공부방의 Jerry입니다.

3편을 쓰기에 앞서 1편과 2편의 링크를 먼저 걸고 시작하겠습니다.

1편 : 조용한 알람(display alarm) 웹 앱 만들기 - 1(https://bejerry.tistory.com/15)

2편 : 조용한 알람(display alarm) 웹 앱 만들기 - 2(https://bejerry.tistory.com/16)

 

자, 정리를 간략히 하고 3편 이어 나가겠습니다 :)

1편에선 시간을 구하는 것까지 했습니다. 그리고 2편에선 우리가 멈춘 시간에게 생기를 불어넣어 시계가 움직이게 했죠! 정말 간단한 거지만 결과물을 보면 괜스레 기분 좋습니다 XD

 

그렇다면, 이번 시간엔 <input> 태그에 시간을 입력해서 현재시간과 세팅 시간(input에 사용자가 입력한 시간)이 같으면 console에 띄워보는 것까지 해보겠습니다.

 

getAlarm( )

// 설정한 시간을 가져오고 현재 시간과 비교하여 알람 기능을 할 함수
function getAlarm(){
  const setValue = setTime.value; // input에 입력된 값을 변수에 담아줍니다.
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  if( /* ? */ ){
  	console.log('hi, jerry');
  }
}

getAlarm( )이라는 함수를 만들었습니다. getAlarm( ) 함수에서 setValue라는 변수에 <input> 태그에 설정된 값을 선언 및 초기화합니다. 그리고 Date객체를 가져와 시간과 분을 각각 hours, minutes 변수에 선언 및 초기화합니다.

 

*hours 변수명과 minutes 변수명을 getTime에서 사용하지 않았는가?

블록 스코프(블록의 범위)가 다르기 때문에 괜찮습니다만 개인적인 생각으로는 대형 프로젝트에서 변수명을 중복으로 쓰지 않는 게 좋을 듯싶습니다. 어디까지나 개인적인 생각입니다 :)

 

다시 본론으로 돌아와 if( ) 문을 설명드리겠습니다.

설명에 앞서 일부러 if( ) 조건절에 들어갈 부분을 물음표(?)로 해뒀는데요. 그 이유는 잠시나마라도 한 번 생각해보시라는 의미에서 비워뒀습니다.

 

넣기 전에 확인해야 할 것이 있기 때문이기도 한데요. setValue 변수에 담은 setTime.value(사용자가 입력한 설정시간)가 어떤 모양으로, 어떤 생김새로 변수에 담겼는지 확인해야 합니다. setValue 변수에 값이 담기자마자 console.log(setValue)로 확인하는 버릇이 좋은 것 같습니다.

 

확인해보셨나요?

저는 확인 전에 예상하기를 두 자리로 안 나올 것 같았습니다. 예를 들어 오전 9시 9분이라고 입력하면 9:9의 모습을 예상했는데 보기 좋게 틀렸습니다. 두 자릿수로 0이 채워져 있더라고요, 09시 09분. 오후도 24시간 표기법으로 표기됩니다. 오후 3시 40분이라면, 15:40으로요.

 

우린 이미 백틱( ` )을 사용해서 저 모습으로 만들어뒀죠? 백틱( ` ) 안에 값은 string TYPE입니다. 그럼 setValue는 어떤 TYPE으로 반환될까요?

 

TYPE이 궁금할 땐 typeof( ) 메서드를 사용하시면 됩니다. 한 번 확인해볼까요? 밑에 소스를 복사하시되, 3항 연산자의 꺾새가 < 로 잘 들어갔는지 [& l t]로 들어갔는지 확인하고 실행해주세요.

 

typeof( )

  console.log(typeof(setValue), setValue); // string, 13:59

 

init( ) 함수에 getAlarm을 1초마다 한 번씩 부르는 코드를 작성했기 때문에 1초마다 console에 log가 찍힐 거예요. 아래 캡쳐를 보세요. console.log로 찍힌 것을 확인해보면 앞에 string, 뒤에 설정한 시간이 나오죠?

 

 

setValue도 string이고, 백틱( ` )도 string인걸 숙지하고 있으면 if문의 조건절에 알맞게 들어가는 걸 알 수 있습니다.

 

TYPE을 왜 확인했는가 하면 === (equal)이 3개면 TYPE까지 비교를 하지요? 5와 '5'는 TYPE이 다르기 때문에 5 === '5'는 false입니다. 근데 이것들이 변수에 담겨있고 그냥 5라고만 생각하고 소스를 짠다면? if( ) 문에 안 들어가고 계속 겉도는 걸 겪을 때가 있습니다.

 

그래서 미리 TYPE을 확인해서 추후 불상사가 없도록 미리 확인하는 것입니다.

그럼 if( ) 문의 조건절도 마저 채우고 제대로 된 소스를 확인해보죠.

 

 

JS-3

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

// input태그를 담을 전역변수 추가
const setTime = alarmContainer.querySelector('input');

// 설정한 시간을 가져오고 현재 시간과 비교하여 알람 기능을 할 함수
function getAlarm(){
  const setValue = setTime.value; //input에 입력된 값을 변수에 담아줍니다.
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const current = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`;
  
  if(current === setValue){
  	console.log(current, setValue); // 13:30, 13:30
  }
}

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();
  setInterval(getTime, 1000);
  setInterval(getAlarm, 1000);
}

init();

 

현재 시간과 설정 시간이 같을 때만 console.log( )가 나오는 걸 확인하였습니다.

 

뭔가 만들어지는 느낌이 드네요 :) 시간이 같으면 우린 화면을 깜빡이기로 했어요.

다음 시간에는빨간 바탕색이 깜빡이는 CSS를 작성하고 브라우저에 적용해보는 시간을 갖도록 하겠습니다.

 

JS에서 설명드리려고 하니 어디부터 어디까지를 설명드려야 할 지 몰라 제 기준으로 알면 좋겠다하는 부분(메서드 등)을 설명하고 있습니다. 그러다보니 정작 웹 앱 만드는 소스 설명과 안내에는 진전이 없는 것 같습니다.

 

하지만 소스에 대한 설명(리뷰)도 없고 '이렇게 적으면 이렇게 나온다.'하고 소스를 복붙하라는 식의 포스팅을 하고 싶진 않습니다.

다음 4편부터는 진도가 나가는 느낌이 드실거에요. 시간을 넣었더니 화면이 바뀌니까요. 결과물에 변화가 있죠!

 

다음 편을 기대해주세요 :)