Let's go, Javascript!!

안녕하세요 코린이 'ssamwonn' 입니다 😇

오늘은 공부를 많이 못했네요😆,

아침부터 친구의 입원 때문에 보호자로 시간을 많이 할애했답니다..

저녁 7시부터 집으로 돌아와 코딩을 하기 시작했는데요

오늘 배운 내용에 대해서 정릴를 해보겠습니다.

기존에 하던일이 블로그도 해야했기에 글을 쓰는 부분은 어렵지 않은데

개발자가아닌 '예비개발자' 에서 작성할려고하니 조금은 딱딱해지는듯 해서

당분간은 제 스타일대로 적어볼까 해요

그래서 뭘 배웠는데?

`` 백틱에 대해서 알아봅시다

Template literals

`${hours < 10 ? `0${hours}` : hours}: ${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;

템플릿 리터럴이라고도 하며 이런식의 삼항 연산자도 적용 할 수 있다.

공식문서 MDN Template literals 를 보면

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

이런 표현식의 방법을 템플릿 리터럴 스타일로 바꾸면

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

이렇게 바뀐다 노마더 클론 코딩을 따라하면서 코드를 써내려가봤더니

const clockContainer = document.querySelector(".js-clock"),
   clockTitle = clockContainer.querySelector("h1");



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

}

function init() {
   getTime();
   setInterval(getTime, 1000);
}

init();  

이렇게 시간이 표현되는 걸 볼 수 있었다.

와우.. 내가 시간을 만들다니!!! 😂

뭔가 하나하나 만들어져가는걸 보면 감격스럽다..저렇게 작은부분임에도 불구하고,

문법에 익숙해질려고 따라치는정도이지만 평소에는 보지도,신경쓸필요도 없던

사소한 것들이 알고보면 이렇게나 긴 코드 였다는것에 계속 놀란다.

공부한 내용들이 많았는데, 느끼는대로 하니까 감성팔이 블로그가 되는듯 하다,

내일부터의 포스팅은 배운내용들을 최대한 잘 정리정돈 해봐야겠다.