Development/Javascript

모던 자바스크립트 입문 - Chapter 13: 웹브라우저의 객체 💻

madebydev 2025. 6. 28. 12:22

웹 개발에서 자바스크립트의 진정한 힘은 브라우저 환경에서 발휘됩니다.

브라우저는 다양한 내장 객체들을 제공하여 웹페이지와 상호작용하고, 사용자 환경을 제어할 수 있게 해줍니다.

이번 포스트에서는 웹브라우저가 제공하는 핵심 객체들을 쉽게 이해해보겠습니다.

 

📌 목차

  • 클라이언트 측 자바스크립트의 이해
  • Location 객체 - URL 정보와 페이지 이동
  • History 객체 - 브라우저 히스토리 제어
  • Navigator 객체 - 브라우저 정보 확인
  • Screen 객체 - 화면 정보 접근
  • Document 객체 - DOM 조작의 시작점
  • 창 제어하기 - Window 객체 활용

📝 클라이언트 측 자바스크립트의 이해

클라이언트 측 자바스크립트는 사용자의 웹브라우저에서 실행되는 자바스크립트를 의미합니다.

서버에서 실행되는 것과는 달리, 브라우저에서는 웹페이지를 직접 조작할 수 있는 특별한 객체들이 제공됩니다.

브라우저 환경에서 사용할 수 있는 주요 객체들:

  • Window: 브라우저 창 전체를 나타내는 최상위 객체
  • Document: 현재 열린 웹페이지(HTML 문서)를 나타내는 객체
  • Location: 현재 페이지의 주소(URL) 정보를 담고 있는 객체
  • History: 브라우저에서 방문했던 페이지들의 기록을 관리하는 객체
  • Navigator: 사용자가 사용하는 브라우저의 정보를 제공하는 객체
  • Screen: 사용자의 화면(모니터) 정보를 제공하는 객체

이 객체들은 모두 전역 객체로, 어디서든 바로 사용할 수 있습니다.

📝 Location 객체 - URL 정보와 페이지 이동

Location 객체는 현재 페이지의 주소 정보를 알려주고, 다른 페이지로 이동할 수 있게 해주는 객체입니다.

현재 페이지 정보 확인하기

만약 현재 페이지 주소가 http://www.example.com:80/test/index.html?q=value#amchor라면:

location.href // 전체 주소: "http://www.example.com:80/test/index.html?q=value#amchor"
location.hash // 앵커 부분: "#anchor"
location.host // 호스트 이름(포트번호) : "www.example.com:80"
location.hostname // 호스트 이름 : "www.example.com"
location.pathname // 웹 사이트의 루트를 기준으로 한 상대 경로 : "/test"
location.port // 포트 번호 : "80"
location.protocol // 프로토콜 : "http:"
location.search // 질의 문자열 : "?q=value"

 

페이지 이동하기

// 다른 페이지로 이동 (뒤로가기 버튼으로 돌아올 수 있음)
location.href = "https://google.com";

// 페이지 교체 (뒤로가기 버튼으로 돌아올 수 없음)
location.replace("https://google.com");

// 현재 페이지 새로고침
location.reload();

 

실생활 예시: 로그인 성공 후 메인 페이지로 자동 이동하거나, 잘못된 접근 시 에러 페이지로 리다이렉트할 때 사용합니다.

📝 History 객체 - 브라우저 히스토리 제어

History 객체는 브라우저의 뒤로가기/앞으로가기 기능을 프로그램으로 제어할 수 있게 해주는 객체입니다.

기본 네비게이션

history.back();     // 뒤로가기 버튼을 누른 것과 같음
history.forward();  // 앞으로가기 버튼을 누른 것과 같음
history.go(-2);     // 2페이지 뒤로 이동
history.go(1);      // 1페이지 앞으로 이동

 

실생활 예시: 갤러리 앱에서 "이전 사진", "다음 사진" 버튼을 만들거나, 멀티 스텝 폼에서 "이전 단계" 버튼을 구현할 때 사용합니다.

히스토리 길이 확인

history.length  // 현재 세션에서 방문한 페이지 수

 

실생활 예시: 사용자가 처음 방문한 페이지인지 확인해서 "홈으로" 버튼을 보여줄지 "뒤로가기" 버튼을 보여줄지 결정할 때 사용합니다.

📝 Navigator 객체 - 브라우저 정보 확인

Navigator 객체는 사용자가 사용하는 브라우저와 운영체제에 대한 정보를 알려주는 객체입니다.

브라우저 정보 확인

navigator.userAgent   // 브라우저 정보 문자열
navigator.language    // 브라우저 언어 (예: "ko-KR", "en-US")
navigator.platform    // 운영체제 (예: "Win32", "MacIntel")
navigator.onLine      // 인터넷 연결 상태 (true/false)

 

실생활 예시:

  • 모바일 브라우저 사용자에게는 앱 다운로드 배너를 보여주고, 데스크톱 사용자에게는 다른 콘텐츠를 보여줄 때
  • 인터넷 연결이 끊어졌을 때 "오프라인 상태입니다" 메시지를 표시할 때
  • 한국어 브라우저 사용자에게는 한국어 콘텐츠를, 영어 브라우저 사용자에게는 영어 콘텐츠를 보여줄 때

특별한 기능 지원 여부 확인

// 위치 정보 서비스 지원 여부
if (navigator.geolocation) {
    console.log("위치 정보를 사용할 수 있습니다.");
} else {
    console.log("위치 정보를 사용할 수 없습니다.");
}

 

실생활 예시: 배달 앱에서 현재 위치 기반 서비스를 제공하기 전에 브라우저가 위치 정보를 지원하는지 확인할 때 사용합니다.

📝 Screen 객체 - 화면 정보 접근

Screen 객체는 사용자의 화면(모니터) 크기와 색상 정보를 알려주는 객체입니다.

화면 크기 정보

screen.width        // 화면 너비 (픽셀)
screen.height       // 화면 높이 (픽셀)
screen.availWidth   // 실제 사용 가능한 너비 (작업표시줄 제외)
screen.availHeight  // 실제 사용 가능한 높이 (작업표시줄 제외)

 

실생활 예시:

  • 작은 화면에서는 간단한 레이아웃을, 큰 화면에서는 복잡한 레이아웃을 보여줄 때
  • 팝업 창을 화면 중앙에 정확히 위치시킬 때
  • 모바일 기기인지 데스크톱인지 판단할 때

색상 정보

screen.colorDepth   // 화면이 표현할 수 있는 색상 수
screen.pixelDepth   // 픽셀당 비트 수

 

실생활 예시: 고화질 이미지나 동영상을 제공할지 결정할 때, 사용자 화면의 색상 표현 능력을 고려하여 최적화된 콘텐츠를 제공할 때 사용합니다.

📝 Document 객체 - DOM 조작의 시작점

Document 객체는 현재 열린 웹페이지(HTML 문서) 자체를 나타내는 객체입니다.

웹페이지의 내용을 읽고, 수정하고, 새로운 요소를 추가하는 모든 작업의 시작점입니다.

웹페이지 요소 찾기

// ID로 요소 찾기
document.getElementById('header')

// 클래스명으로 요소 찾기
document.getElementsByClassName('menu-item')

// 태그명으로 요소 찾기
document.getElementsByTagName('p')

// CSS 선택자로 요소 찾기
document.querySelector('.button')       // 첫 번째 요소만
document.querySelectorAll('.button')    // 모든 요소

 

실생활 예시:

  • 메뉴 버튼을 클릭했을 때 네비게이션 메뉴를 보여주거나 숨기기
  • 폼 입력 필드의 값을 확인하여 유효성 검사
  • 쇼핑몰에서 상품을 장바구니에 추가할 때 장바구니 개수 업데이트

새로운 요소 만들기

// 새 요소 생성
const newParagraph = document.createElement('p');
newParagraph.textContent = '새로운 문단입니다.';

// 페이지에 추가
document.body.appendChild(newParagraph);

 

실생활 예시:

  • 댓글 작성 시 새로운 댓글을 페이지에 즉시 추가
  • 무한 스크롤에서 새로운 게시물을 페이지 하단에 추가
  • 알림 메시지를 동적으로 생성하여 화면에 표시

문서 정보 확인

document.title          // 페이지 제목
document.URL           // 페이지 주소
document.lastModified  // 마지막 수정 시간
document.readyState    // 페이지 로딩 상태

 

실생활 예시: 페이지 제목을 동적으로 변경하여 사용자에게 현재 상태를 알려주거나, 페이지가 완전히 로드된 후에 특정 작업을 실행할 때 사용합니다.

📝 창 제어하기 - Window 객체 활용

Window 객체는 브라우저 창 전체를 나타내는 최상위 객체입니다. 새 창을 열고, 대화상자를 표시하고, 시간을 다루는 등 브라우저 창과 관련된 모든 기능을 제어할 수 있습니다.

새 창 열기

// 새 창 열기
const newWindow = window.open('https://google.com', '새창', 'width=500,height=400');

// 새 창 닫기
newWindow.close();

 

실생활 예시:

  • 상품 상세 정보를 팝업 창으로 보여주기
  • 소셜 로그인 창 열기
  • 도움말이나 약관을 별도 창으로 표시하기

사용자와 대화하기

// 알림 메시지
alert('저장되었습니다!');

// 확인/취소 선택
const result = confirm('정말로 삭제하시겠습니까?');
if (result) {
    console.log('사용자가 확인을 선택했습니다.');
}

// 사용자 입력 받기
const name = prompt('이름을 입력하세요:');
console.log('입력된 이름:', name);

 

실생활 예시:

  • 중요한 작업 전에 사용자에게 확인 받기
  • 간단한 정보 입력 받기
  • 성공/실패 메시지 표시하기

시간 다루기

// 3초 후에 한 번 실행
setTimeout(function() {
    console.log('3초가 지났습니다.');
}, 3000);

// 1초마다 반복 실행
setInterval(function() {
    console.log('1초마다 실행됩니다.');
}, 1000);

 

실생활 예시:

  • 자동 슬라이드쇼 만들기
  • 실시간 시계 표시하기
  • 일정 시간 후 자동으로 페이지 새로고침
  • 광고 배너 자동 전환

창 크기와 스크롤

// 창 크기 정보
window.innerWidth   // 창의 너비
window.innerHeight  // 창의 높이

// 스크롤 위치
window.scrollX      // 가로 스크롤 위치
window.scrollY      // 세로 스크롤 위치

// 스크롤 이동
window.scrollTo(0, 0);      // 페이지 맨 위로
window.scrollTo(0, 500);    // 500픽셀 위치로

 

실생활 예시:

  • "맨 위로" 버튼 구현하기
  • 스크롤 진행률 표시하기
  • 반응형 디자인에서 화면 크기에 따른 레이아웃 변경
  • 특정 위치로 부드럽게 스크롤 이동

📚 마무리 정리

오늘 학습한 웹브라우저 객체들을 정리하면:

  • Location 객체는 현재 페이지의 주소 정보를 알려주고 다른 페이지로 이동할 수 있게 해줍니다.
    쇼핑몰에서 상품 정보를 URL에서 추출하거나, 로그인 후 자동으로 메인 페이지로 이동시킬 때 사용합니다.
  • History 객체는 브라우저의 뒤로가기/앞으로가기 기능을 프로그램으로 제어할 수 있게 해줍니다.
    갤러리 앱의 이전/다음 버튼이나 멀티 스텝 폼의 단계 이동에 활용됩니다.
  • Navigator 객체는 사용자의 브라우저와 운영체제 정보를 제공합니다.
    모바일 사용자와 데스크톱 사용자에게 각각 다른 콘텐츠를 보여주거나, 브라우저별 최적화를 할 때 필요합니다.
  • Screen 객체는 사용자 화면의 크기와 색상 정보를 알려줍니다.
    화면 크기에 따라 다른 레이아웃을 제공하거나, 팝업 창을 화면 중앙에 정확히 위치시킬 때 사용합니다.
  • Document 객체는 웹페이지 자체를 나타내며, 페이지의 내용을 읽고 수정하는 모든 작업의 시작점입니다.
    댓글 추가, 알림 메시지 표시, 동적 콘텐츠 생성 등에 핵심적으로 사용됩니다.
  • Window 객체는 브라우저 창 전체를 제어하며, 새 창 열기, 사용자와의 대화, 시간 관련 작업, 스크롤 제어 등 다양한 브라우저 기능을 담당합니다.

💡 오늘 새롭게 알게 된 것

  • 브라우저 객체들의 역할 분담:
    각 객체가 담당하는 영역이 명확히 구분되어 있다는 점었습니다.
    Location은 주소, History는 기록, Navigator는 브라우저 정보, Screen은 화면 정보, Document는 문서 내용, Window는 창 제어로 각각의 책임이 분명하네요.
  • 실생활 활용도의 높음:
    이론적인 내용이 아니라 실제 웹사이트에서 매일 경험하는 기능들이 이 객체들로 구현된다는 것을 더 자세히 알게 되었습니다.
  • 전역 객체의 편리함:
    이 객체들이 모두 전역 객체라서 어디서든 바로 사용할 수 있다는 점이 자바스크립트의 브라우저 환경에서의 장점인 것 같습니다.

🤔 어려웠던 점

  • 객체 간 관계 파악:
    처음에는 이 객체들이 서로 어떻게 연결되어 있는지, 언제 어떤 객체를 사용해야 하는지 구분하기 어려웠습니다.
    특히 Window 객체가 최상위 객체이면서도 다른 객체들과 어떤 관계인지 이해하는데 시간이 걸렸네요.
  • 브라우저별 차이점:
    Navigator 객체로 브라우저 정보를 확인할 때, 각 브라우저마다 제공하는 정보가 조금씩 다르다는 점이 복잡했습니다.
    크로스 브라우저 호환성을 고려해야 한다는 부담감도 있었고요.
  • 실무 적용 시점 판단:
    이론적으로는 이해했지만, 실제 프로젝트에서 언제 이 객체들을 사용해야 하는지, 어떤 상황에서 어떤 객체가 가장 적합한지 판단하는 것이 아직 어렵게 느껴집니다.

🎯 다음 학습 계획

다음 포스팅에서는 문서제어에 대해 알아보겠습니다.