2021. 11. 08. (월) TIL - 바닐라 JS로 크롬 앱 만들기 - Clock & Quotes

# 학습 전 나의 상태

월요일.. 시작부터 바쁜 하루다.

오늘부터 노마드코더에서 html&css 챌린지를 시작했다. 그리고 다음주부터 바닐라JS 챌린지가 시작된다.

또 월, 목, 토 개발크럽 모임이 있다. (오늘은.. 애기보다가 깜빡했다..ㅜㅜ)

게다가 코드스테이츠 하면서 같이 페어했던 동기분이 취업했다고 하셔서 축하드리고 진심 기분이 좋았다.

나도 언능 취업하고 싶다 ^^ 그러기 위해서는 기본기를 잘 다지고 준비도 잘 해야겠지??

긍정적으로 생각하면서 내가 가야할 길을 가야겠다.!! 

오늘도 어김없이 늦은 시간 공부를 시작하지만 화이팅이다!!!!!

 

 

# 오늘의 학습 내용

interval = 매번 일어나는 일

setInterval(호출할 func, 반복할 시간(ms))

function sayHello() {
  console.log('hello');
}

setInterval(sayHello, 5000)

 

 

timeout = 기다렸다가 실행

setTimeout(호출할 func, 기다릴 시간(ms))

function sayHello() {
  console.log('hello');
}

setTimeout(sayHello, 5000)

 

 

padStart(자릿수, "넣은 숫자, 글자")

function getClock() {
  const date = new Date()
  const hours = String(date.getHours()).padStart(2, "0")
  const minutes = String(date.getMinutes()).padStart(2, "0")
  const seconds = String(date.getSeconds()).padStart(2, "0")
  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

// 로드 되자마자 getClock 호출
// 이유는 그렇게 하지 않으면 1초 뒤에 시간이 나타나기 때문
getClock();
setInterval(getClock, 1000);

 

Math 모듈

Math.round - 반올림

Math.ceil - 올림

Math.floor - 내림

Math.random - 랜덤으로  0-1 사이 숫자를 보여줌

 

 

 

# 학습을 마치며

오늘은 setInterval과 setTimeout, padStart, Math모듈 에 대해 공부했다.

interval과 timeout의 차이는 정해진 시간으로 반복되는 것과 정한 시간 이후에 나타나는 것임을 알 수 있었다.

또 padStart로 시간, 분, 초 등이 한 자리 숫자로 표시될 때 앞에 0을 붙여 두 자리로 보이도록 만들어 준다.

오늘은 시계를 만들어 주는 부분을 만들었는데 재미있었다~

그리고 명언과 배경을 랜덤으로 적용하기 위해 Math모듈을 사용했는데 Math 모듈을 활용해서 이렇게 할 수 있다는 것이 참 신기했다.

코딩을 잘 하지 않지만 요즘 재미있다 ~