Files

Elex f867e689aa 2025-01-26T02:15:33

2025-01-26 02:15:33 +09:00

17 KiB

Raw Blame History

브라우저 내장 객체

브라우저 내장 객체는 브라우저 환경에서 기본적으로 제공되는 객체들로, 웹 애플리케이션을 작성할 때 사용됩니다. 이 객체들은 DOM(Document Object Model), BOM(Browser Object Model), 그리고 웹 API를 통해 제공됩니다.

window
- document
- navigator
- location
- history
- screen

window

window 객체는 브라우저의 전역 객체로, 브라우저 창 또는 탭 자체를 나타냅니다. 모든 브라우저 환경에서 window는 최상위 객체로 존재하며, 전역 변수와 함수는 기본적으로 window 객체의 속성으로 등록됩니다.

console.log(window); // window 객체 출력
console.log(window === this); // true (전역 컨텍스트에서는 this가 window를 참조)

브라우저 전역 객체 : 모든 브라우저에서 제공되며, DOM, BOM, 그리고 자바스크립트 핵심 기능을 포함합니다.
전역 변수와 함수 관리 : 전역으로 선언된 변수와 함수는 window 객체의 속성으로 자동 추가됩니다.
다양한 내장 메서드 및 속성 제공 : 사용자 상호작용, DOM 조작, 타이머 설정, 브라우저 제어 등을 수행할 수 있는 메서드와 속성을 제공합니다.

브라우저 정보

window.navigator : 브라우저와 사용자의 정보 제공
window.location : 현재 URL 정보와 관련된 작업을 수행
window.history : 브라우저의 방문 기록을 제어

화면 및 디바이스 정보

window.screen : 화면 해상도와 관련된 정보를 제공
window.innerWidth / window.innerHeight : 브라우저 뷰포트(viewport)의 크기를 반환
window.devicePixelRatio : 디바이스 픽셀 밀도를 나타냄
window.scrollX / window.scrollY

사용자 상호작용

window.alert() : 경고창을 표시
window.confirm() : 확인 및 취소 버튼이 있는 대화 상자를 표시
window.prompt() : 사용자로부터 입력을 받을 수 있는 대화 상자 표시

타이머 메서드

window.setTimeout() : 일정 시간이 지난 후 함수를 실행
window.setInterval() : 일정 시간 간격으로 함수를 반복 실행
window.clearTimeout()
window.clearInterval()

window.setTimeout(() => {
  console.log("3초 후 실행");
}, 3000);

const intervalId = window.setInterval(() => {
  console.log("1초마다 실행");
}, 1000);

// 5초 후 반복 종료
window.setTimeout(() => {
  window.clearInterval(intervalId);
}, 5000);

DOM 조작

window.document : 현재 HTML 문서를 나타내는 객체로 DOM 조작의 핵심

이벤트 처리

resize 이벤트 : 브라우저 창 크기 변경 시 실행
scroll 이벤트 : 사용자가 페이지를 스크롤할 때 실행
load 이벤트 : 페이지가 완전히 로드된 후 실행

window.addEventListener("resize", () => {
  console.log(`너비: ${window.innerWidth}, 높이: ${window.innerHeight}`);
});

window.addEventListener("scroll", () => {
  console.log(`스크롤 위치: ${window.scrollY}`);
});

window.addEventListener("load", () => {
  console.log("페이지가 로드되었습니다!");
});

document

document 객체는 현재 HTML 문서를 나타내는 객체로, DOM(Document Object Model)을 통해 웹 페이지의 콘텐츠를 조작하고 구조에 접근할 수 있도록 합니다. 브라우저가 HTML 코드를 파싱하여 트리 형태로 변환한 DOM의 루트 객체이며, 자바스크립트를 사용하여 페이지를 동적으로 변경할 수 있게 합니다.

HTML 요소 선택

getElementById() : id 속성을 기준으로 특정 요소를 선택
getElementsByClassName() : 클래스 이름을 기준으로 요소 집합을 선택
getElementsByTagName() : 태그 이름을 기준으로 요소 집합을 선택
querySelector() : CSS 선택자를 기반으로 첫 번째 요소를 선택
querySelectorAll() : CSS 선택자를 기반으로 모든 요소를 선택

문서 정보 확인

document.title : 문서의 제목을 반환하거나 수정
document.URL : 현재 문서의 URL을 반환
document.domain : 문서의 도메인을 반환
document.lastModified : 문서가 마지막으로 수정된 날짜와 시간

콘텐츠 조작

innerHTML : 요소의 HTML 콘텐츠를 가져오거나 설정
textContent : 요소의 텍스트 콘텐츠를 가져오거나 설정
createElement() : 새로운 HTML 요소를 생성
appendChild() : 부모 요소에 자식 요소를 추가
removeChild() : 특정 자식 요소를 제거

const div = document.querySelector("#container");
div.innerHTML = "<p>새로운 콘텐츠</p>";

const heading = document.querySelector("h1");
console.log(heading.textContent); // 텍스트 출력
heading.textContent = "새로운 텍스트"; // 텍스트 변경

const list = document.querySelector("ul");
const newItem = document.createElement("li");
newItem.textContent = "새 항목";
list.appendChild(newItem);
const firstItem = list.firstElementChild;
list.removeChild(firstItem);

문서 구조 탐색

document.body : 문서의 <body> 요소를 반환
document.head : 문서의 <head> 요소를 반환
parentNode: 부모 노드
childNodes: 자식 노드 리스트
firstChild, lastChild: 첫 번째/마지막 자식 노드
previousSibling, nextSibling: 이전/다음 형제 노드

const container = document.getElementById("container");
console.log(container.parentNode); // 부모 노드
console.log(container.childNodes); // 자식 노드 리스트

const firstItem = document.querySelector("li");
console.log(firstItem.nextSibling); // 다음 형제 노드
console.log(firstItem.previousSibling); // 이전 형제 노드

클래스 조작

classList : 요소의 클래스를 추가, 제거, 토글, 확인

const element = document.querySelector("div");
element.classList.add("highlight"); // 클래스 추가
element.classList.remove("highlight"); // 클래스 제거
element.classList.toggle("hidden"); // 클래스 토글
console.log(element.classList.contains("hidden")); // 클래스 포함 여부

이벤트 처리

addEventListener() : 요소에 이벤트 리스너를 추가
removeEventListener() : 요소에서 이벤트 리스너를 제거

const button = document.querySelector("button");
button.addEventListener("click", () => {
  alert("버튼 클릭!");
});

폼 및 입력 요소

forms : 문서의 모든 <form> 요소를 반환
elements : 특정 폼의 모든 입력 요소를 반환

const form = document.forms[0];
console.log(form.elements["username"].value); // 이름이 "username"인 입력값

이벤트

DOMContentLoaded : 문서의 HTML이 모두 로드된 후 실행
readystatechange : 문서의 준비 상태가 변경될 때 실행

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM이 완전히 로드되었습니다!");
});

navigator

navigator 객체는 브라우저 및 사용자 디바이스에 대한 정보를 제공하는 브라우저 내장 객체입니다.

브라우저 및 사용자 정보

navigator.userAgent : 브라우저 및 운영 체제에 대한 정보를 포함한 문자열
navigator.platform : 사용자의 운영 체제를 나타냄

네트워크 상태 및 연결

navigator.onLine : 디바이스의 온라인 상태를 나타냄. (인터넷 연결이 되어 있으면 true, 그렇지 않으면 false)
navigator.connection : 네트워크 연결 속성(타입, 대역폭 등)을 제공. 일부 브라우저에서만 지원됨.

사용자 설정

navigator.language : 사용자가 설정한 기본 언어를 반환
navigator.languages : 브라우저에서 지원하는 언어 배열

디바이스 및 하드웨어 정보

navigator.geolocation : 사용자의 위치 정보를 제공. GPS와 같은 기술을 활용
navigator.hardwareConcurrency : 사용자의 CPU 논리 프로세서 코어 수를 반환
navigator.deviceMemory : 디바이스의 RAM 용량(GB 단위, 일부 브라우저만 지원)
navigator.maxTouchPoints : 디바이스에서 지원하는 최대 터치 포인트 개수를 반환

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(`위도: ${position.coords.latitude}, 경도: ${position.coords.longitude}`);
  },
  (error) => {
    console.error("위치 정보를 가져오지 못했습니다.", error);
  }
);

보안 관련 정보

navigator.cookieEnabled : 브라우저에서 쿠키가 활성화되어 있는지 확인
navigator.credentials : 사용자 인증 정보를 관리하는 API. 패스워드 관리자나 인증 토큰 관련 작업에 사용
navigator.permissions : 브라우저 권한 상태를 확인

navigator.credentials.get({
  password: true,
  federated: { providers: ["https://accounts.google.com"] },
});

navigator.permissions.query({ name: "geolocation" }).then((result) => {
  console.log(result.state); // "granted", "denied", "prompt"
});

미디어 및 브라우저 기능

navigator.mediaDevices : 디바이스의 카메라, 마이크, 스피커 등 미디어 장치에 접근
navigator.clipboard : 클립보드에 텍스트를 복사하거나 읽기

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then((stream) => {
    console.log("미디어 스트림:", stream);
  })
  .catch((error) => {
    console.error("미디어 장치 접근 실패:", error);
  });

navigator.clipboard.writeText("클립보드에 복사할 내용").then(() => {
  console.log("클립보드에 복사 완료!");
});

navigator.clipboard.readText().then((text) => {
  console.log("클립보드에서 읽은 내용:", text);
});

설치 및 실행 환경 정보

navigator.serviceWorker : 서비스 워커를 등록하거나 관리
navigator.standalone : 웹 앱이 독립 실행형 모드로 실행 중인지 여부를 나타냄. (iOS에서만 사용 가능)

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js").then((registration) => {
    console.log("서비스 워커 등록 완료:", registration);
  });
}

이벤트

online / offline : 인터넷 연결 상태가 변경될 때 발생

window.addEventListener("online", () => {
  console.log("온라인 상태입니다.");
});

window.addEventListener("offline", () => {
  console.log("오프라인 상태입니다.");
});

screen

screen 객체는 **사용자의 화면(디스플레이)**에 대한 정보를 제공하는 브라우저 내장 객체입니다. 이 객체를 통해 사용자의 디바이스 화면 크기, 가로·세로 해상도, 색상 깊이 등과 같은 정보를 얻을 수 있습니다.

screen.width / screen.height : 사용자의 화면(디스플레이)의 전체 너비 / 높이(픽셀 단위)
screen.availWidth / screen.availHeight : 사용 가능한 화면 너비/ 높이(픽셀 단위). 브라우저 인터페이스(UI) 요소(예: 작업 표시줄)가 차지하는 영역을 제외한 크기입니다.
screen.devicePixelRatio : 물리적 픽셀과 CSS 픽셀의 비율. 고해상도 디스플레이에서는 이 값이 1보다 큽니다.
screen.colorDepth : 디스플레이의 색상 깊이(컬러 비트 수). 일반적으로 24(16,777,216 색상) 또는 32비트입니다.
screen.pixelDepth : 픽셀 깊이를 반환. colorDepth와 동일한 값을 반환합니다.
screen.orientation : 화면의 현재 방향(가로 또는 세로)에 대한 정보를 제공. type 속성을 사용하여 방향 정보를 확인할 수 있습니다.
screen.orientation.lock() / screen.orientation.unlock() : 화면 방향을 특정 방향으로 고정/해제. 브라우저가 이를 지원하는 경우 사용 가능합니다.

if (screen.width < 768) {
  console.log("모바일 화면 레이아웃 적용");
} else {
  console.log("데스크톱 화면 레이아웃 적용");
}

screen.orientation.addEventListener("change", () => {
  console.log("현재 화면 방향:", screen.orientation.type);
});

if (window.devicePixelRatio > 1) {
  console.log("고해상도 디스플레이입니다.");
} else {
  console.log("표준 해상도 디스플레이입니다.");
}

location

location 객체는 브라우저의 현재 URL 정보를 읽거나 수정할 수 있는 객체입니다. 주로 웹 페이지의 URL을 확인, 변경하거나 리다이렉트(페이지 이동)를 수행하는 데 사용됩니다.

location.href : 현재 페이지의 전체 URL을 문자열로 반환하거나 변경합니다.
location.protocol : URL의 프로토콜 부분(http: 또는 https:).
location.host : 도메인 이름과 포트 번호를 포함한 URL의 호스트 부분.
location.hostname : 도메인 이름만 반환. 포트 번호는 제외됩니다.
location.port : URL의 포트 번호를 반환. 포트가 명시되지 않으면 빈 문자열("")을 반환.
location.pathname : URL의 경로 부분을 반환.
location.search : URL의 쿼리 문자열(물음표 ? 이후 부분)을 반환.
location.hash : URL의 해시 값(샤프 기호 # 이후 부분)을 반환
location.origin : URL의 원본(origin)을 반환. (프로토콜 + 호스트 + 포트 번호로 구성)
location.assign() : 지정된 URL로 이동.
location.replace() : 지정된 URL로 이동하되, 히스토리에 기록되지 않음(뒤로 가기 불가).
location.reload() : 현재 페이지를 다시 로드.
- 기본 동작은 캐시된 데이터를 사용하여 리로드.
- true를 전달하면 서버에서 최신 데이터를 다시 로드.

console.log("전체 URL:", location.href);
console.log("프로토콜:", location.protocol);
console.log("호스트:", location.host);
console.log("경로:", location.pathname);
console.log("쿼리 문자열:", location.search);
console.log("해시:", location.hash);

// 새로운 페이지로 이동
location.href = "https://example.com/new-page";

// 히스토리를 남기지 않고 이동
location.replace("https://example.com/replace-page");

// 3초 후 다른 페이지로 이동
setTimeout(() => {
  location.assign("https://example.com/delayed-page");
}, 3000);

const queryString = location.search; // 예: "?query=123&name=John"
const params = new URLSearchParams(queryString);

// 쿼리 매개변수 읽기
console.log(params.get("query")); // "123"
console.log(params.get("name")); // "John"

// 모든 매개변수 출력
for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`);
}

history

history 객체는 브라우저의 세션 히스토리를 관리하는 객체입니다. 사용자가 브라우저의 뒤로 가기, 앞으로 가기, 새로운 페이지 추가 같은 탐색 기록과 관련된 동작을 프로그래밍적으로 제어할 수 있습니다.

history.length : 현재 세션 히스토리의 길이(기록된 페이지 수)를 반환합니다.
history.back() : 사용자의 브라우저에서 "뒤로 가기" 동작을 실행합니다.
history.forward() : 사용자의 브라우저에서 "앞으로 가기" 동작을 실행합니다.
history.go() : 히스토리에서 특정 위치로 이동합니다.
- history.go(-1)은 뒤로 가기와 동일.
- history.go(1)은 앞으로 가기와 동일.
- history.go(0)은 현재 페이지를 다시 로드합니다.
history.pushState() : 세션 히스토리에 새 기록을 추가합니다. 페이지를 이동하지 않고도 브라우저의 URL을 변경할 수 있습니다.
- state (object): 상태 데이터(저장할 객체).
- title (string): 페이지의 제목(현재 대부분 무시됨).
- url (string): URL(상대 경로나 절대 경로).
history.replaceState() : 세션 히스토리의 현재 기록을 변경합니다.

console

console 객체는 자바스크립트에서 디버깅과 로깅을 위한 강력한 도구입니다. 주로 브라우저의 개발자 도구(Developer Tools)에 접근해 로그를 출력하거나, 디버깅 정보를 확인하는 데 사용됩니다.

console.log() : 일반적인 메시지 또는 데이터를 출력. 가장 기본적인 출력 메서드입니다.
console.info()
console.warn()
console.error()
console.table() : 객체나 배열 데이터를 표 형태로 출력. 데이터의 구조를 한눈에 파악할 수 있어 유용합니다.
console.dir() : 객체의 속성과 프로퍼티를 트리 형태로 출력. DOM 요소나 복잡한 객체의 구조를 확인할 때 유용합니다.
console.assert() : 특정 조건이 거짓일 경우에만 메시지를 출력. 테스트용으로 많이 사용.
console.trace() : 현재 코드의 호출 스택(Call Stack)을 출력. 코드 실행 경로를 추적하는 데 유용.
console.time() / console.timeEnd() : 코드 실행 시간을 측정. 성능 테스트에 유용합니다.
console.group() / console.groupEnd() : 로그 메시지를 그룹화하여 출력. 중첩된 그룹도 생성 가능.
console.groupCollapsed() : console.group()와 동일하지만, 그룹이 축소된 상태로 시작.
console.clear() : 콘솔 내용을 모두 지웁니다.
console.count() : 특정 메시지가 호출된 횟수를 카운트.
console.countReset() : console.count()의 카운터를 초기화.

17 KiB Raw Blame History

브라우저 내장 객체

window

브라우저 정보

화면 및 디바이스 정보

사용자 상호작용

타이머 메서드

DOM 조작

이벤트 처리

document

HTML 요소 선택

문서 정보 확인

콘텐츠 조작

문서 구조 탐색

클래스 조작

이벤트 처리

폼 및 입력 요소

이벤트

navigator

브라우저 및 사용자 정보

네트워크 상태 및 연결

사용자 설정

디바이스 및 하드웨어 정보

보안 관련 정보

미디어 및 브라우저 기능

설치 및 실행 환경 정보

이벤트

screen

location

history

console

17 KiB

Raw Blame History