📝 오늘 한 것

1. getElementsByTagName()

2. 달력 구현 중

📚 배운 것

달력

---

📌 요구 사항

1. 오늘의 현재 요일 표기

2. 오늘의 현재 일 표기

3. 오늘의 현재 월 표기

4. 오늘의 현재 연도 표기

5. 일,월,화,수,목,금,토 요일 라벨링 표기

6. 현재 월의 1일이 무슨 요일인지 판별하고, 해당 요일 라벨링에 1일 표기하기

7. 현재 월의 마지막 날짜까지 달력에 표기하기

8. 우측 화살표를 클릭 했을때, 다음 달의 요일 및 날짜 표기

9. 좌측 화살표를 클릭 했을때, 이전 달의 요일 및 날짜 표기

10. 특정 날짜를 클릭 했을때, 상단의 요일 및 날짜 반영하기

단, 특이 케이스에 대한 대응은 하지 않아도 괜찮습니다. 예) 윤년, 기원전 등
달력은 현재 날짜를 기준으로 첫 페이지가 나타나야 합니다.

📌 javascript 작성

들어가기 전에 어제 작성했던 HTML에서 요일과 날짜를 가리키는 class를 수정해줬다
( day-of-the-week를 day로 / day를 date로 )

---

1. 첫 번째 요구 사항

오늘의 현재 요일 / 일 / 월 / 연도 표기

💡 date().toString.split(' ', 4) 이용

// 오늘의 현재 [요일, 일, 월, 연도] 표시
var YMDD = new Date().toString();
var YMDDarray = YMDD.split(' ', 4);

console.log(YMDDarray); // (배열 요소 순서) 요일, 월, 일, 연도

// 요일
var day = document.querySelector('.day');
day.innerHTML = YMDDarray[0];

// 일
var date = document.querySelector('.date');
date.innerHTML = YMDDarray[2];

// 월
var month = document.querySelector('.month');
month.innerHTML = YMDDarray[1];

// 연도
var year = document.querySelector('.year');
year.innerHTML = YMDDarray[3];

💡 좀 더 간결하게

const YMDD = new Date();
const YMDDarray = YMDD.toString().split(' ', 4);

function showYMDD (selector, index) {
  document.querySelector(selector).innerHTML = YMDDarray[index];
}

showYMDD('.day', 0);
showYMDD('.date', 2);
showYMDD('.month', 1);
showYMDD('.year', 3);

2. 두 번째 요구 사항

현재 월의 1일이 무슨 요일인지 판별하고, 해당 요일 라벨링에 1일 표기하기

const currYear = YMDD.getFullYear();
const currMonth = YMDD.getMonth();

const currMonthFirst = new Date(currYear, currMonth, 1); // 현재 월의 1일
const currMonthFirstDay = currMonthFirst.getDay(); // 〃 의 요일

// ❕ 아래에서 세 번째 요구 사항처럼 코드를 구현하니까 이 부분이 필요가 없어졌다. 분명 이것도 요구 사항 중 하나인데 뒤에서 막힐지도 모르겠...
if (currMonthFirstDay === 3) {
  document.querySelector('#day3').innerHTML = '1'; // 여기서 1은 string이다
}

3. 세 번째 요구 사항

현재 월의 마지막 날짜까지 달력에 표기하기

💡 구현한 코드

• 모든 <td>에 접근하기 위해 getElementsByTagName() 이용

• 숫자를 1 ~ 31, 1 ~ 30, 1 ~ 28 까지 적은 파일 3개를 만든 후 fetch API를 이용해서 데이터를 가져와 for 반복문과 innerHTML을 이용해 < td >에 하나씩 집어넣음

• 현재 월이 시작하는 요일(즉, < td >)부터 1을 집어넣기 위해 i에 currMonthFirstDay를 더해줌

// 현재 월의 마지막 날짜 구하기 (30인지 31인지 28인지)
const currMonthLast = new Date (currYear, currMonth+1, 0);
const currMonthLastDate = currMonthLast.getDate();

// 마지막 날짜까지 달력에 표시
// 즉, 어떻게 <td> 에만 1 ~ 31(30)(28)까지 넣을 수 있을까?

const td = document.getElementsByTagName('td');

fetch('calendarDate30').then(function(response){
  response.text().then(function(text){
    const textArray = text.split(',');
    for (let i = 0; i < textArray.length; i++) {
      td[i+currMonthFirstDay].innerHTML = textArray[i];
    }
  })
});

💡 문제 발생

• 위처럼 하니까 두 번째 요구 사항에 따라 이미 구현해놨던 아래 코드가 (다른 월을 구현하기 위해서도 필요한 코드 같은데) 쓰이질 않고 있었다

// 현재 월의 마지막 날짜 구하기 (30인지 31인지 28인지)
const currMonthLast = new Date (currYear, currMonth+1, 0);
const currMonthLastDate = currMonthLast.getDate();

💡 해결 방법

• 현재 월의 마지막 날짜가 30인지 31인지 28인지에 따라 달력에 날짜가 다르게 나타날 수 있도록 if 구문을 추가했다

• 처음에 if 조건문 안에 fetch API를 일일이 담아서 3개의 구문을 만들었다가 fetch API를 따로 빼내서 insert라는 함수 안에 담아주었다

💡 수정한 코드

// 3. 현재 월의 마지막 날짜까지 달력에 표기하기

// 현재 월의 마지막 날짜 구하기 (31인지 30인지 28인지)
const currMonthLast = new Date(currYear, currMonth+1, 0);
const currMonthLastDate = currMonthLast.getDate();

// 마지막 날짜까지 달력에 표시
// 즉, 어떻게 <td> 에만 1 ~ 31(30)(28)까지 넣을 수 있을까?

// 현재 월의 마지막 날짜가 31인 경우
// 현재 월의 마지막 날짜가 30인 경우
// 현재 월의 마지막 날짜가 28인 경우

function insert (lastDayFile) {
  const td = document.getElementsByTagName('td');
  fetch(lastDayFile).then(function(response){
    response.text().then(function(text){
      const textArray = text.split(',');
      for (let i = 0; i < textArray.length; i++) {
        td[i+currMonthFirstDay].innerHTML = textArray[i];
      }
    })
  });
}

if (currMonthLastDate === 30) {
  insert('calendarDate30');
}

if (currMonthLastDate === 31) {
  insert('calendarDate31');
}

if (currMonthLastDate === 28) {
  insert('calendarDate28');
}

💡 좀 더 간결하게

• 위에서 따로 만들었던 calendarDate30과 28 파일을 삭제하고, 31 파일에서 split의 2번째 매개변수를 이용해 배열로 요소를 잘라서 가져오는 걸로 바꿈

• if 조건문 정리

const currMonthLast = new Date (currYear, currMonth+1, 0);
const currMonthLastDate = currMonthLast.getDate();

function insert (limit) {
  const td = document.getElementsByTagName('td');
  fetch('calendarDate31').then(function(response){
    response.text().then(function(text){
      const textArray = text.split(',', limit);
      for (let i = 0; i < textArray.length; i++) {
        td[i+currMonthFirstDay].innerHTML = textArray[i];
      }
    })
  });
}

if (currMonthLastDate === 31) {
  insert(31);
} else if (currMonthLastDate === 30) {
  insert(30);
} else {
  insert(28);
}

✨ 내일 할 것

1. 달력 구현 이어서
   제대로 잘하고 있는 걸까 애당초 잘못 든 길만 아니기를