자바스크립트로 만나이를 구해보자 (전편)

이게 왜 전후편이 나뉘었냐면 변수때문에 시간을 너무 잡아먹었고 나는 출근을 해야 하는 몸입니다... 그래서 자잘한 것들... 뭐 CSS 마진 패딩 이딴거라던가 날짜에 시작점 끝점 정하는 뭐 그런거 있죠? 그런게 아직 안됐음... 그래서 깃헙에 올린 버전은 '일단 계산만 해 주는' 버전입니다. 아무튼 그럼.

---

사실 기본적인 로직은 파이썬하고 다를 게 없다. 그리고 자바스크립트에서도 날짜를 다룰 수 있지.

 

const birthday = document.querySelector('input[type="date"]');
const calButton = document.querySelector('button');
const yourAge = document.createElement('p');
const yourAge_div = document.querySelector('.yourage');

위에서부터 순서대로 입력창(날짜), 버튼, 만나이를 표시하기 위한 p태그와 갖다붙일 div이다. 여기까지는 순조로울 거 없죠? 죄다 const로 가져와서 재선언 재할당 안된다. ...근데 어떻게 내용물은 바꾸는겨?

 

// 현재 날짜
const today = new Date;
let todayYear = today.getFullYear();
let todayMonth = today.getMonth() + 1;
let todayDate = today.getDate();

이것도 어려울 거 없다. 만나이를 현재 나이 기준으로 계산할거니까 당연히 오늘 날짜를 가져와야 하는 게 맞다. 그래서 연월일 가져왔다. 시요? 에이 그런건 필요엄서. 뭐 내가 오후 8시 50분에 태어났다고 생일날 20시 50분 될때까지 만나이 안오르는거 아니다. 만나이는 0시 되면 칼같이 오른다.

 

calButton.addEventListener('click',function(event){
    if (todayMonth > new Date(birthday.value).getMonth() + 1) { //현재 날짜의 월이 생일보다 크다면
        //만나이 겟또 
        yourAge.innerText = `만 ${todayYear - new Date(birthday.value).getFullYear()}세입니다. `;
        yourAge_div.appendChild(yourAge);
    }
    else if (todayMonth == new Date(birthday.value).getMonth() + 1 && todayDate >= new Date(birthday.value).getDate()) { //현재 날짜의 월이 생일과 같'고' 현재 날짜의 일이 생일보다 같거나 크다면
        //만나이 겟또
        yourAge.innerText = `만 ${todayYear - new Date(birthday.value).getFullYear()}세입니다. `;
        yourAge_div.appendChild(yourAge);
    }
    else { //아녀?
        //응 멀었어
        yourAge.innerText = `만 ${todayYear - new Date(birthday.value).getFullYear() - 1}세입니다. `;
        yourAge_div.appendChild(yourAge);
    }
})

긍꼐 문제가 어디다? 저기다.

 

일차적인 문제로, 저 인풋.value로 값을 가져오면 잘 되는데 인풋.value를 변수에 할당하면 object가 되고 Invalid Date가 뜨고 아주 난리 부르스를 추는데 해결방법이 없어 죄다 IE에서 에러터졌을 때 얘긴데 얘는 또 console.log로 확인해보면 yyyy-mm-dd로 월 일 다 두자리다. 근데 위에도 썼지만 내일 출근해야돼서 오래 잡지를 못하는거라. new Date(인풋.value)는 되니까 그냥 저기다 때려박았기 때문에 파이썬과 달리 전체 코드에서 생년월일 관련 변수만 없다.

 

그리고 거기서 오는 2차적인 문제가 바로 한눈에 알아보기 개같이 어려운 IF문이다. 파이썬이었으면 가로 스크롤따원 필요없었는데 쟤는 변수에 생년월일 갖고 온 게 할당이 안 돼서 IF문 조건이 저 꼬라지가 된 것. 저것때문에 로직짜면서 계산 이상하게 됐는데 당최 뭐가 뭔지 찾기가 힘들어서 골머리 앓았는데 알고보니 월 계산할 때 +1 안 붙여서 저렇게 된거였음... 여러분은 조심하십셔.

 

생일이 지난 경우(인데 1월이면 뭐...)

 

월은 같은데 아직 생일이 안 지난 경우

 

그냥 안 지났다.

 

후편에서 할 것은 크게

1. 현재 날짜 표시(현재 날짜는 0000년 00월 00일입니다!). 이거에 따라 출력하는 텍스트 역시 바뀔 예정.

2. 날짜 입력 제한 걸기(1900-1-1~2900-12-31)

3. 생년이 현재 날짜보다 뒤일때에 대한 처리. 아직 태어나지 않은 사람은 만 나이를 계산할 수 없기 떄문에 여기에 대한 처리도 해야 한다. 즉, 저 꼬라지 난 IF문에 일단 else if 하나가 더 추가될 예정. 아마 지금은 계산하면 음수가 나올 것이다.

4. CSS 조정(모양 잡기)

이정도... 내일도 밤샐듯.