[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 번외편(feat. ES6)

안녕하세요, Jerry입니다!

 

조용한 알람(silence alarm) 웹 앱 만들기가 끝났습니다. 그런데 왜 웹 앱 만들기라는 제목으로 번외를 적냐? 5편 포스팅을 발행한 후 소스를 천천히 보니 마음에 들지 않는 부분이 있어서 코드를 수정을 했고, 수정한 부분을 공유하고 싶어 이렇게 번외 편으로 포스팅을 작성했습니다.

 

어느 부분인지 코드를 먼저 보고 코드 블록 이후에 설명을 적겠습니다.

 

alarm.js

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

// 추가한 코드
function currentDate(){
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  
  /* 객체를 리턴 */
  return {hours, minutes, seconds};
}

function getAlarm(){
  const setValue = setTime.value;
  
  /* ES6 디스트럭처링(destructuring, 구조 분해 할당) */
  const {hours, minutes, seconds} = currentDate();
  
  const current = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`;
	
  if(current === setValue){
	window.open('popup.html');
	clearInterval(alarm);	
  }
}

function getTime(){
  /* ES6 디스트럭처링(destructuring, 구조 분해 할당) */
  const {hours, minutes, seconds} = currentDate();

  currentTime.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init(){
  getTime();
  setInterval(getTime, 1000);
  alarm = setInterval(getAlarm, 1000);
}

init();

 

우리의 머릿속에 있는 기존 소스와 비교해야 합니다. (응?)

각 함수마다 Date 객체를 인스턴스 하여 date.getHours, date.getMinutes 등 시, 분, 초를 불러왔었죠. 중요한 건 각 함수마다 똑같은 코드가 있었다는 겁니다. 개발자는 중복을 최소화하는 게 의무이며, 미덕이라고 배웠습니다.

 

어떻게 중복을 없앴냐?

function에서 return 할 때 객체를 리턴하는 겁니다. 사실 ES6의 기능을 사용하고자 한다면 class로 만들 수 있습니다. 하지만 setInterval( )로 매 초마다 class를 호출하여 인스턴스화 한다는 게 꺼림칙했기에 function에서 객체를 return 하였습니다.

 

이 return 된 객체를 사용할 때 ES6 기능의 핵심인 디스트럭처링(!), 바로 구조 분해 할당을 사용합니다. 단, 오해의 소지가 있기에 조금 더 정리하겠습니다. 저 형태만 구조 분해 할당은 아닙니다. 구조 분해 할당에는 다양한 형태가 있습니다.

 

spread 연산자, rest 연산자도 사용하고, 객체, 배열 등 다양한 형태로 사용되기 때문에 관련 서적이나 자료가 있다면 꼼꼼히 읽어보셔야 하고, 블로그를 아신다면 자주 들어가 학습 및 숙지를 하셔야 하고, 배울 매개체가 없다면 MDN(구조 분해 할당 - MDN)을 추천드립니다. (저는 MDN 예찬론자이며, vanilla 신봉자입니다 :D)

 

 

위에 소스를 일부 발췌하여 간략히 설명드리겠습니다. 아래 소스를 잠시 보실까요?

function currentDate(){
  ...(생략)
  return {hours, minutes, seconds};
}

// 각 함수 안에 선언 및 초기화된 Local Variable입니다.(함수 scope임을 안내드립니다.)
// 편의상 함수들을 적지 않았습니다.
const {hours, minutes, seconds} = currentDate();

 

currentDate()는 {hours, minutes, seconds}를 return 하고 있기에 아래 소스과 같다고 생각하시면 되고,

const {hours, minutes, seconds} = {hours, minutes, seconds};

 

return 된 객체는 본인 자리에 일치한 키에 대입됩니다. 예를 들면 아래 소스와 같다고 생각하시면 될 것 같습니다.

const hours = hours, minutes = minutes, seconds = seconds;

 

혹시나 제가 설명한 것에 잘못된 부분이 있다면 댓글로 가차없이 지적해주세요.

틀린 부분은 빠르게 학습하고 글 수정하여 잘못된 정보를 전달하는 일이 없도록 주의하겠습니다.

 

이렇게 ES6를 또 간단하게 맛을 보았습니다 :)

앞으로의 계획을 조금 적어두고 싶어서 몇 자 적습니다.

 

Vanilla JS로 간단한 웹 앱을 하나 더 만들 계획이 있긴 하나, 그 전에 ES6 학습을 우선으로 하여, 추후 간단한 웹 앱을 만들 때 학습한 ES6를 꽤 적용하여 저의 포스팅을 봐주시는 분들에게 재밌고 알찬 내용을 드리고 싶습니다.

 

그럼 당분간은 vanilla js 카테고리가 아닌 ES6 카테고리에서 뵙겠습니다.

감사합니다! XD