[JavaScript] 간단한 달력 만들기 - 날짜 데이터 만들기

이번에는 자바스크립트로 날짜 데이터를 만들고 지난번에 잡아둔 HTML 구조에 넣어봅시다.

날짜는 당연히 Date객체를 활용해야겠죠?

Date객체를 하나 만들어 줍시다. 

// index.js
const now = new Date();

변수 이름은 이것저것 고민하다가.. 그냥 now로 했습니다.

역시 변수 이름 짓는 게 제일 어려운 것 같아요..

그다음은 이제 데이터로 쓸만한 요소들을 하나씩 좀 뽑아와서 다시 객체로 정리할 건데요.

오늘 날짜에 필요한 정보들을 모아둔 객체니깐, 변수 이름은 today로 지어줬습니다.

// index.js
const now = new Date();

const today = {
  year: now.getFullYear(),
  date: now.getDate(),
  month: now.toLocaleString('en-US', {month: 'short'}),
  day: now.toLocaleString('en-US', {weekday: 'short'}),
}

now를 가지고 Date객체의 메서드들을 활용해서, 지난 시간에 스케치했던 부분에서 필요한 요소들만 today객체로 만들어 둔 겁니다.

한 가지 눈여겨볼 부분은 toLocaleString 메서드에 넘겨준 파라미터 부분인데요.

MDN문서에 분명 잘 정리되어 있음에도 불구하고 의외로 많은 분들이 모르시는 알쓸신.잡기술(?)이긴 한데, 첫 번째 인자로 국가를 넣어주고, 두 번째 인자로 옵션 값을 전달해주면, 옵션 값에 맞는 문자열 값을 해당 국가에 맞게 리턴해줍니다.

 

지금 경우에는 month 프로퍼티에 영어 버전으로, month의 이름을 short 하게 리턴 받기 때문에,

1월부터 12월까지 Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec라는 문자열을 리턴 받게 됩니다.

참고로 옵션 값을 long으로 준다면, FullMonthName이 출력이 되고, numeric으로 주게 되면 1부터 12까지 값을 리턴해줍니다.

 

day 프로퍼티도 마찬가지로, weekday의 각 이름을 short 하게 리턴 받기 때문에

일요일부터 토요일까지 Sun, Mon, Tue, Wed, Thu, Fri, Sat라는 문자열을 리턴 받습니다.

만약 옵션 값을 long으로 요일도 FullName으로 전달받겠죠? 

 

참고로 첫 번째 인자를 'ko-KR'로 주면 한국어로도 받아올 수가 있는데, month의 경우에는 두 번째 인자에 어떤 값을 줘도 'n월'의 포맷으로 나오고, 요일의 경우 short일 때 월, 화, 수, 목, 금, 토, 일이고, long으로 하면, 뒤에 '요일'이 붙어서 나오게 됩니다.

 

이런 거 생각보다 잘 몰라서 굳이 이런 간단한 날짜포맷 한, 두 개 필요한데, 막 이것저것 문자열 포멧 자동으로 만들어주는 아주 편리하고 무거운 라이브러리 붙이고 막 그러시는 분들이.. 저뿐이었길 바랍니다.

 

아무튼, 이제 today 데이터를 모두 다 받았으니 지난 시간에 만들어둔 HTML구조에서 각각 데이터가 필요한 적절한 부분을 찾아 넣어주기만 하면 될 것 같습니다.

// index.js
const now = new Date();

const today = {
    year: now.getFullYear(),
    date: now.getDate(),
    month: now.toLocaleString('en-US', {month: 'short'}),
    day: now.toLocaleString('en-US', {weekday: 'short'})
}

document.getElementById('year').textContext = today.year;
document.getElementById('month').textContent = today.month;
document.getElementById('date').textContent = today.date;
document.getElementById('day').textContent = today.day;

어차피 문자열만 넣어주는거기 때문에 textContext를 사용해봤는데요. 이렇게 하나하나 잡아다 넣는 것도 좋은데, 어짜피 파라미터 이름만 달라지는 거니깐 반복문을 돌려주는 것도 나쁘지 않은 것 같습니다.

// index.js
const now = new Date();

const today = {
    year: now.getFullYear(),
    date: now.getDate(),
    month: now.toLocaleString('en-US', {month: 'short'}),
    day: now.toLocaleString('en-US', {weekday: 'short'})
}

for (let key in today) {
    document.getElementById(key).textContent = today[key];    
}

이렇게 말이죠 :)

 

자, 아무튼 이렇게 하면 HTML 파일을 실행시켰을 때 드디어 뭐가 찍혀 나오기 시작합니다.

혹시 HTML 구조가 궁금하시면 이전 포스트를 참고하시면 좋을 것 같고!

이제 마지막으로 예쁘게 꾸며주는 일만 남았습니다.

다음 포스트에서는 css 스타일링에 대해서 정리를 조금 해보도록 하겠습니다 :)