JavaScript | pre course 19-날짜☀️와 시간⏰

🙋목표: 자바스크립트 기초를 공부하고 부족한 부분을 채우자.

1. 날짜와 시간


프론트엔드 개발을 하다보면 날짜와 시간을 다루는 경우가 많다고 한다.

  • 회원가입을 한 날짜와 시간
  • 글을 작성한 시간
  • 휴대폰의 현재 시간 등등...

날짜와 시간을 저장하고 보여줄 때는 날짜 객체를 사용한다.

무슨 말인지 바로 인지가 안되니 코드를 통해 다시 공부해 보자.

const time = new Date();
console.log(time);//Sun Mar 21 2021 20:40:42 GMT+0900 (대한민국 표준시)

여기서, GMT란 것은 Greenwich Mean Time의 줄임말이며 컴퓨터 언어에서는 GMT기준으로 시간을 알려준다고 한다.

결국 GMT+0900 이라는 말은 GMT기준으로 9시간 빠르다는 의미이다.

하지만 우리는 시간을 가져오는 게 다가 아니다. 디자이너가 요구하는대로 웹사이트를 보여줘야하기 때문에 더 깊이감 있게 공부할 필요가 있다.

Date 객체로 현재 시간을 가져온 후, Date 객체가 갖고 있는 함수로 각 날짜, 시간의 값을 가져올 수 있다.

let time = new Date();
let year = time.getFullYear();
let month = time.getMonth()+1;
let date = rightNow.getDate();
let day = time.getDay();
let currentHour = time.getHours();
let currentMin = time.getMinutes();

🚨여기서 getMonth 함수는 현재 달보다 1 작은 값을 반환한다. 한 번 보자.

console.log(time.getMonth()); //2

분명 Date 객체로 가져온 현재시각은 3월이었는데 getMonth 는 2로 출력된다. 이는 아무래도 프로그래밍에서 index는 0부터 시작해서 일 것이다.

우리가 만든 웹사이트를 사용자에게 원활하게 보여주기 위해서 +1 을 해 주자.🚀

2. Assignment


나이를 구하는 함수인 getWesternAge 함수를 구현해 봅시다.

  • 이 함수는 birthday 라는 인자를 받습니다.

  • 이 birthday 는 Date 객체 입니다. birthday 라는 인자를 넣었을 때, 현재를 기준으로 만으로 계산한 나이를 리턴 해주세요.

  • birthday 는 string이 아닌 Date 객체라는 걸 명심하세요 :)

  • 예를 들어, 오늘이 2020년 7월 21일이고, birthday 값이 다음과 같다면:

    1990-03-21T00:45:06.562Z
    

    리턴 값은 30 이 되어야 합니다.

function getWesternAge(birthday) {
    // 1. 현재날짜
    const date = new Date()
    const getDateYear = date.getFullYear();
    const getDateMonth =  date.getMonth() +1;
    const getDateDay = date.getDate();
    // 2. 생일날짜
    const myBirthday = new Date(birthday);
    const getMyBirdayYear = myBirthday.getFullYear();
    const getMyBirthMonth = myBirthday.getMonth() +1;
    const getMyBirthDate = myBirthday.getDate();
    // 3. 나이계산(현재-생일)
    const americanAge = getDateYear - getMyBirdayYear;
    // 4. 조건문 발동
    if((getMyBirthMonth < getDateMonth) && (getMyBirthDate < getDateDay)) {
        return americanAge;
    }
    else if((getMyBirthMonth >= getDateMonth ) && (getMyBirthDate > getDateDay)) {
        return americanAge -1;
    }
    else {
        return americanAge;
    }
}

🚨공부를 좀 더 해서 set을 이용하면서 인자를 전달하는 방향으로 만들어보자. 그렇다면 코드의 양을 줄일 수 있을 것이다.

좋은 웹페이지 즐겨찾기