Countdown 프로그램 만들기

moment.js를 사용해 countdown을 만들어 보자

(https://javascriptbootcamp.tech/courses/467461/lectures/8874928)

계속되는 이론공부에 지쳐가는 요즘(뭘 한게 있다고 지쳐? 이런내가 나도 어이없다) 
나는 다 계획이 있잖아? (현생충!! 정신차려!!!!!!) 
그래서 나만의 카운트 다운을 만들기로 했다.
지금은 화창한 봄날인 5월의 이지만... 
올해 크리스마스 전에는 개발자로서의 취업을 꿈꾸며
크리스마스 카운트다운 프로그램을 만들어 보기로....
모..커플 이런거 아니라.. 내 목표는 크리스마스 전 개발자 취업이닷!!(나름관대함)

moment.js

• 날짜를 기입하기에 편한 javascript library임
• 간단하게 link를 통해서 javascript link를 가져올수 있음
• 바디 클로징 태그 위에 이렇게 아래와 같이 적용하면 손쉽게 이용 가능함

    <script src="https://unpkg.com/moment" type="text/javascript"></script>
      <script>
  		</script>

먼저! moment 의 기능에 대해 알아보자면..
아래와 같이 출력하면 요런 현재 시간 날짜 년도가 출력됨

moment(); 

Moment {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: Locale, _d: Fri May 08 2020 17:29:58 GMT+0900 (대한민국 표준시), …}

Countdown 에 사용된 기능

1 .isBefore(now, 'days')

moment('2010-10-20').isBefore('2010-12-31', 'year'); // false
moment('2010-10-20').isBefore('2011-01-01', 'year'); // true

• isBefore 은 moment(a날).isBefore(b날,'년도/날짜/시간기준') 로 봤을때
  a날이 b날보다 전이니? 전이면 true 아니면 false를 출력해줘 라는뜻.
  고로, 크리스 마스로 본다면

  var now = moment();
  var  christmas = moment("12 25", "MM DD"); //크리스 마스 날짜 셋팅 해주고
  if(christmas.isBefore(now,'days')) {
    christmas = christmas.add(1, 'year'); //크리스마스보다 후의 날짜면 1년을 더해주렴..이라는 뜻 , 그럼 add는? 아래 설명 감 
  }

2 .add()

moment([2010, 1, 28]);                 // February 28
moment([2010, 1, 28]).add(1, 'month'); // March 28

• moment(a날)에 .add(얼마를,어디에) 더해줘 라는 뜻 고로

  if(christmas.isBefore(now,'days')) {
    christmas = christmas.add(1, 'year');
    //크리스마스보다 후의 날짜면 1년을 더해주렴..이라는 뜻
  }

3 .diff()

var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b, 'days') // 1
// b의 날짜와 a 의 날짜의 '날짜별 차이를 알려줘 니깐..나는 오늘로부터 크리스마스가 얼마나 남은지 말해줘 이니 
var christmas = moment("12 25", "MM DD");
  var diff = christmas.diff(now, 'days');//이렇게 표시하면 되시겠다!!! 

최종결과물 : https://github.com/junghyunhao/countdown