자바스크립트 Date 객체 활용

Date 객체는 날짜와 시간을 관리하는 내장 객체로, 현재 시스템 시간을 가져오거나 특정 시점을 설정할 때 사용합니다.

객체 생성 및 인스턴스화

Date 객체는 new 키워드를 사용하여 인스턴스를 생성해야 합니다.

// 현재 시간 정보 생성
const today = new Date();

// 특정 날짜 지정 생성
const targetDay = new Date('2025-05-01 12:00:00');
console.log(typeof today); // "object"

주요 메서드 정리

Date 객체에서 제공하는 메서드를 통해 연, 월, 일 등 세부 정보를 추출할 수 있습니다.

메서드	기능 설명	비고
getFullYear()	4자리 연도 반환
getMonth()	월 반환 (0~11)	결과값에 +1 필요
getDate()	일 반환 (1~31)
getDay()	요일 반환 (0~6)	0: 일요일, 6: 토요일
getHours() / getMinutes()	시 / 분 반환
toLocaleString()	현지 형식의 전체 날짜/시간	포맷팅된 문자열

타임스탬프(Timestamp) 활용

타임스탬프는 1970년 1월 1일 00:00:00 UTC부터 경과된 시간을 밀리초(ms) 단위로 나타낸 것입니다. 디데이 계산이나 성능 측정 시 유용합니다.

// 방법 1: getTime() 메서드
const ms1 = new Date().getTime();

// 방법 2: 단항 연산자 + 활용 (가장 권장되는 방식)
const ms2 = +new Date();

// 방법 3: Date.now() (정적 메서드)
const ms3 = Date.now();

DOM 노드 탐색 및 조작

DOM 트리 내의 모든 요소는 노드(Node)로 관리됩니다. 노드 간의 관계를 이용하여 요소를 선택하거나 새로운 요소를 추가할 수 있습니다.

노드 탐색

특정 요소를 기준으로 부모, 자식, 형제 노드에 접근할 수 있습니다.

• parentNode: 직계 부모 노드를 반환합니다.
• children: 자식 노드 중 요소 노드(HTML 태그)만 반환합니다.
• nextElementSibling / previousElementSibling: 인접한 형제 요소 노드를 반환합니다.

const content = document.querySelector('.inner-content');
const wrapper = content.parentNode; // 부모 접근
const subElements = wrapper.children; // 모든 자식 태그들
const nextItem = content.nextElementSibling; // 다음 형제 요소

노드 생성 및 추가

새로운 HTML 요소를 동적으로 생성하여 화면에 렌더링할 수 있습니다.

// 1. 요소 생성
const newDiv = document.createElement('div');
newDiv.textContent = '새로운 내용입니다.';
newDiv.className = 'info-box';

// 2. 부모 요소에 추가
const container = document.querySelector('.container');
container.appendChild(newDiv); // 마지막 자식으로 추가

// 3. 특정 위치에 삽입
const reference = document.querySelector('.target');
container.insertBefore(newDiv, reference); // reference 요소 앞에 삽입

노드 복제 및 삭제

기존 노드를 복사하거나 삭제할 때 사용합니다.

// 노드 복제: true는 하위 자식까지 모두 복제(깊은 복사)
const cloneNode = original.cloneNode(true);
cloneNode.id = 'new-id'; // ID 중복 방지를 위해 수정 권장

// 노드 삭제: 부모 요소에서 특정 자식을 제거
parent.removeChild(childNode);

브라우저 렌더링 과정과 성능 최적화

브라우저가 HTML을 화면에 그리는 과정을 이해하면 성능 최적화에 도움이 됩니다.

렌더링 파이프라인

1. HTML 파싱을 통한 DOM 트리 생성
2. CSS 파싱을 통한 CSSOM 생성
3. DOM과 CSSOM을 결합한 Render Tree 구축
4. Layout(Reflow): 요소의 위치와 크기 계산
5. Painting: 실제 픽셀을 화면에 그림

리플로우(Reflow)와 리페인트(Repaint)

• Reflow: 레이아웃에 영향을 주는 속성(너비, 높이, 위치, 폰트 크기 등)이 변할 때 발생합니다. 비용이 매우 큽니다.
• Repaint: 레이아웃은 변하지 않고 가시적인 속성(색상, 배경색, 투명도 등)만 변할 때 발생합니다.

BOM (Browser Object Model) 핵심 객체

BOM은 브라우저 창과 상호작용하기 위한 객체 모델입니다.

window 객체

모든 전역 변수와 함수를 포함하는 최상위 객체입니다. alert(), setTimeout() 등이 이 객체의 메서드입니다.

location 객체

현재 페이지의 URL 정보를 담고 있으며, 페이지 이동을 제어합니다.

• location.href: 전체 URL 주소 (값 할당 시 페이지 이동)
• location.search: 쿼리 스트링 (? 이후 부분)
• location.hash: 해시값 (# 이후 부분)
• location.reload(): 새로고침

navigator 및 history

• navigator: 브라우저 정보 및 장치 정보를 포함합니다. (userAgent를 통한 디바이스 판별 등)
• history: 사용자의 방문 기록을 관리하며 뒤로 가기(back()), 앞으로 가기(forward()) 기능을 제공합니다.

자바스크립트 실행 매커니즘 (Event Loop)

자바스크립트는 싱글 스레드 언어입니다. 비동기 작업을 처리하기 위해 실행 스택과 태스크 큐를 활용합니다.

실행 순서

1. 동기 태스크: 즉시 실행 스택(Execution Stack)에서 순차적으로 처리됩니다.
2. 비동기 태스크: 타이머나 이벤트 발생 시 태스크 큐(Task Queue)로 전달됩니다.
3. 이벤트 루프: 실행 스택이 비어 있을 때, 태스크 큐에 대기 중인 작업을 스택으로 가져와 실행합니다.