블로그 전체목록

new Date()와 getFullYear()로 현재 날짜 자동 출력하기 | 푸터 연도 자동 변경 방법

기술정보 26.08.05 조회 52

new Date()와 getFullYear()로 현재 날짜 자동 출력하기 | 푸터 연도 자동 변경 방법

홈페이지를 운영하다 보면 매년 한 번씩 수정해야 하는 부분이 있습니다.

대표적으로 푸터의 저작권 연도(Copyright), 이벤트 기간, 공지사항 날짜 등이 있습니다.

JavaScript의 new Date()와 getFullYear()를 활용하면 현재 날짜를 자동으로 불러와 별도의 수정 없이 항상 최신 날짜를 유지할 수 있습니다.

이번 글에서는 날짜 객체 생성부터 현재 연도 출력, 그리고 실무에서 자주 사용하는 활용 방법까지 알아보겠습니다.

➰➰➰

✅ new Date()란?

· 현재 시간을 가져오는 Date 객체

· 특정 날짜 생성 가능

· 다양한 날짜 정보를 제공

· 실제 출력 형식은 브라우저(Chrome, Edge, Firefox, Node.js 등)에 따라 조금씩 다르지만 현재 날짜와 시간이 표시됩니다.

1
2
3

const today = new Date();
console.log(today);
// 출력값 : Wed Aug 05 2026 14:46:00 GMT+0900 (Korean Standard Time)

✅ getFullYear()란?

· 현재 Date 객체에서 연도(YYYY)를 가져오는 메서드입니다.

1
2
3

const today = new Date();
console.log(today.getFullYear());
// 출력값 : 2026

✅ 현재 연도를 HTML에 자동 출력하기

· 날짜 정보를 출력할 영역을 작성합니다.

· 날짜 데이터를 활용하여 원하는 날짜 데이터 값을 추출합니다.

· textContent 속성을 활용하여 html로 출력합니다.

<body>
    <footer>Copyright © <span id="year"></span></footer>
</body>
 
<script>
    const thisYear = document.getElementById("year")
    const year = new Date().getFullYear();
    thisYear.textContent = year;
</script>

Colored by Color Scripter

✅ 유지보수성이 높아지는 이유

한 줄만으로 현재 연도를 자동으로 출력할 수 있어 매년 수정 작업이 필요 없습니다.

특히 여러 프로젝트를 운영하거나 동일한 푸터를 사용하는 사이트에서는 유지보수 시간을 크게 줄일 수 있습니다.

✅ 알아두면 좋은 Date 메서드

메서드	설명
getFullYear()	현재 연도
getMonth() + 1	현재 월 (1~12)
getDate()	현재 일
getDay()	요일
getHours()	시
getMinutes()	분
getSeconds()	초

✨ 자주 묻는 질문(FAQ)

✔ new Date()는 무엇인가요?

현재 날짜와 시간을 생성하는 JavaScript의 내장 객체입니다.

✔ getFullYear()는 무엇을 반환하나요?

현재 연도를 4자리 숫자(예: 2026)로 반환합니다.

✔ getMonth()에 +1을 하는 이유는?

JavaScript는 월을 0부터 시작하기 때문입니다.

예를 들어 7월은 6으로 반환되므로 1을 더해야 실제 월이 표시됩니다.

✔ 별도의 라이브러리가 필요한가요?

아닙니다. JavaScript에서 기본 제공하는 Date 객체만으로 구현할 수 있습니다.

➰➰➰

new Date()와 getFullYear()는 구현이 간단하지만, 유지보수 효율을 크게 높여주는 JavaScript 기능입니다.

이벤트 기간, 공지사항, 관리자 화면 등 날짜 정보를 다루는 다양한 영역에서도 활용할 수 있습니다.

작은 자동화 하나가 반복 작업을 줄이고 실수를 예방하는 데 큰 도움이 되는 만큼, 프로젝트를 진행할 때 미리 적용해 두는 것을 추천합니다.

블로그 전체목록

최근 포스트