Calculator & Recorder

미자탈출 D-Day 사이트를 만들어 보았습니다. 구글링하다가 우연히 트위터에서 미자탈출D-day 알리미를 보았는데, 트위터 봇을 활용한지는 몰라도 매일 트윗을 하더군요. 마침 팀샐러드 디데이 사이트 코드 고치는 김에 재미있을 것 같아서 만들어보기로 하였습니다.

사이트의 완성된 모습

오늘 날짜와, 2021년에 성인이 된 2002년생은 제외하고 2003년생부터 2021년생까지 성인이 되기까지 남은 일수를 표시합니다. 디데이 날짜가 100일, 200일 등 100으로 나누어떨어지거나 20일 아래로 내려가면 날짜에 ☆이 붙습니다. 아래 부분은 사이트 자바스크립트에 대한 설명이므로 스킵하셔도 무방합니다.

코드를 짜 보자

현재 연도

대한민국은 만 나이를 사용하고 있기에 태어난 연도와 현재 연도를 알고 있다면 현재 나이를 현재 연도 - 태어난 연도 + 1 로 알 수 있습니다. 우선 자바스크립트 코드의 맨 윗줄은 Date 객체를 이용해 현재 연도를 가져옵니다.

const currentYear = new Date().getFullYear();

남은 일수를 계산하는 함수

그런 다음 함수를 하나 만듭니다. 이 함수는 인자로 태어난 연도를 받고, 현재 성인이 아니라면 남은 일수를 반환합니다.

function remainDays(birthYear) {
  if (currentYear >= birthYear) {
    const toAdultYear = birthYear + 19

    const remainDays = Math.ceil((new Date(toAdultYear, 0, 1) - new Date()) / (24*60*60*1000));
    const returnStr = `${birthYear}년생은 성인까지 ${remainDays < 20 ? "☆D-" + remainDays + "☆" : remainDays % 100 == 0 ? "☆D-" + remainDays + "☆" : "D-" + remainDays}`;
    if (remainDays < 0) {
      return "이미 성인입니다";
    } else {
      return returnStr;
    }
  } else {
    return "태어나지 않았습니다";
  }
}

위에서 currentYear에 저장해 놓은 현재 연도와 인자로 받은 태어난 연도를 비교해서 태어난 연도가 더 크다면 현재 태어나지 않은 것입니다. "태어나지 않았습니다"를 출력합니다. 그런 다음 태어난 연도가 더 작다면 태어난 연도에 19를 더해서 그 연도에 태어난 사람이 몇 년에 어른이 되는지를 알아냅니다.

미성년자를 탈출하는 날은 어른이 되는 연도의 1월 1일입니다. 즉 어른이 되는 연도의 1월 1일에서 현재 시각을 뺀 다음, 뺀 결과를 밀리초에서 일로 변환합니다. 괄호를 쳐야 하는 것과 Date 객체의 1월은 0이라는 것에 주의하세요.

HTML에 출력할 문자열을 템플릿 리터럴과 삼항 연산자를 이용해서 만듭니다. 남은 일수가 100으로 나누어지거나 20보다 작으면 별을 붙여줍니다. 인자로 받은 태어난 연도를 활용하는 것도 잊지 마세요.

마지막으로 출력값을 정하는 일만 남았습니다. 만약 남은 일수가 0보다 작다면, 이미 성인이 된 것입니다. "이미 성인입니다"를 반환합니다. 0보다 작지 않으면 앞에서 미리 만들어 둔 출력할 문자열을 반환하면 함수는 끝이 납니다.

현재 날짜 출력하기

오늘이 며칠인지, 즉 기준일이 언제인지 알려 주어야 혼선을 피할 수 있습니다. 미리 만들어 둔 HTML 파일에는 div.wrap이 존재하니 querySelector로 가져올 수 있습니다.

const wrap = document.querySelector('.wrap');
const p = document.createElement('p');

const currentMonth = new Date().getMonth() + 1;
const currentDay = new Date().getDate();

p.textContent = `기준 날짜 : ${currentYear}.${currentMonth < 10 ? "0" + currentMonth : currentMonth}.${currentDay < 10 ? "0" + currentDay : currentDay}`;

p.classList = "list";
wrap.appendChild(p);

한번 더 Date 객체로 현재 달과 일을 가져온 다음 p 태그에 넣어서 출력시킵니다.

디데이 출력

가장 중요한 출력입니다. 현재 성인이 된 사람들이 태어난 연도는 제외해야 하기에 현재 연도에서 18을 뺀 연도부터 반복문을 돌립니다. 즉, 현재 19살이 된 사람들이 태어난 연도부터 시작해야 합니다. 그리고 현재 연도까지 반복합니다.

for (let i = currentYear - 18; i <= currentYear; i++) {
  const p = document.createElement('p');
  p.classList = "list";
  p.textContent = remainDays(i);
  wrap.appendChild(p);
}

반복문 안의 내용은 간단합니다. p 태그를 만들고, p 태그에 함수를 적용시켜서 출력하면 끝입니다.

소감

생각보다 간단한 프로젝트였습니다. 제가 이미 팀샐러드 디데이 사이트를 만든 경험도 있었고 해서 코드 짜는 일이 조금은 쉬워진 것 같네요.