안녕하세요. 제가 블로그 포스팅을 하는 것 중에 프론트앤드 개발자 면접질문 모음이라는 포스팅이 언제나 가장 많은 조회수를 차지하고 있더라고요. 🤔그런데 그 포스팅이 진짜 면접 때 빠르게 훑어보고 외우기 위해 정리한 것이다 보니 막상 이 포스팅을 보고 면접 전에 빡세게 준비하려는 분들께는 큰 도움이 되지 않을지도 모르겠다는 불안감이 문득 들어 개인적인 회고 겸 해당 포스트에서 작성한 대답들을 최대한 자세히! 공부하는 심정으로! 정리해 보려고 합니다. 만약 다른 질문들을 구글에서 본다면 그 질문에 대해 추가할 예정입니다.
먼제 가장 먼저 window 객체가 무엇일까요?에 대해 알아보도록 하겠습니다.
window 객체를 한 마디로 표현하면, 브라우저 객체 모델(BOM)의 핵심이자 브라우저의 인스턴스입니다. 앗, 그런데 브라우저 객체 모델(BOM)은 또 뭘까요?
브라우저 객체 모델(BOM)이란, 브라우저 창에서 접근하고 조작할 수 있게하는 인터페이스를 말합니다.
브라우저 창을 새로 띄우거나, 창을 닫거나, 창 크기를 조절하거나, 상세 정보(프로퍼티)를 반환하는(navigation, location, screen) 등을 가능하게 합니다. 그리고 이 브라우저 객체 모델(BOM)은 브라우저 창과 보이는 영역인 window를 기반으로 만들어집니다. 왜 window 객체를 기반으로 만들어질까요?
window 객체 모든 객체의 최상위에 존재하기 때문입니다. (이미지 참조) 브라우저의 모든 요소들과 자바스크립트 엔진, 변수들은 모두 window 객체에 담겨 있는 것입니다.
window 객체는 전역 스코프다.
window 객체는 EMCAScript의 전역 객체 역할을 합니다. 앞서 말했듯, 전역에서 선언한 모든 변수와 함수는 window 객체 안에 담깁니다. 아래 이미지와 같이 콘솔 창에서 어떤 변수 또는 함수를 정의하면 window.변수 또는 window.함수로 불러올 수 있습니다. (단! ES6에서 도입된 let과 const는 블록 단위 스코프를 가져 전역 스코프에서 선언 시 var과 달리 window나 global에 등록되지 않습니다!!)
Window 프로퍼티로 정보를 가져와보자
window의 프로퍼티는 그 window의 정보를 나타냅니다. 대략적으로 다음과 같은 프로퍼티들이 존재합니다.
-
closed: 창이 종료되었는지 여부를 나타내는 부울(boolean) 값을 반환한다. -
defaultStatus: 창의 상태표시줄의 텍스트를 반환하거나 설정한다. -
document: 창의document객체를 반환한다. -
localStorage: 데이터를 저장하는데 사용되는 로컬 스토리지 객체에 대한 참조를 반환한다. 저장된 데이터는 유효기간이 없다. -
sessionStorage: 데이터를 저장하는데 사용되는 세션 스토리지 객체에 대한 참조를 반환한다. (창 끄면 삭제) -
location: 창의location객체를 반환한다. -
name: 창의 이름을 반환하거나 설정한다. -
navigator: 창의navigator객체를 반환한다. -
outerHeight: 툴바 및 스크롤바를 포함하는 창의 외부 높이를 반환한다. -
outerWidth: 툴바 및 스크롤바를 포함하는 창의 외부 너비를 반환한다. -
pageXOffset: 창의 상부 좌측 구석으로부터 현재의 문서가 스크롤(수평) 된 픽셀를 반환한다. -
pageYOffset: 창의 상부 좌측 구석으로부터 현재의 문서가 스크롤(수직) 된 픽셀 반환한다. -
screen: 창의 screen 객체를 반환한다.
Window 객체와 함께 창을 제어해보자
아까 말씀드렸던 대로, 브라우저 창 제어는 window 객체를 기반으로 이루어집니다. 콘솔창에서 window. 까지만 쳐도 이렇게 긴 스크롤이 나오는데 이것들을 사용해서 창을 열거나 닫는 등의 조작이 가능해집니다. 정말 많은 기능들이 있지만 여기서는 대표적인 몇가지 예시만 사용해 보도록 하겠습니다.
window.open()
콘솔창에서 window.open(https://naver.com)을%EC%9D%84) 쳐보세요. 그러면 브라우저가 네이버 화면으로 이동할 것입니다. 여기서 보여주는 사실은 window 객체가 어떤 페이지 내의 내용만을 조작하는 것이 아니라 브라우저 창 자체를 조작할 수 있다는 점 입니다.
window.open("https://naver.com") // 새 창에서 해당 주소의 브라우저 창을 연다!
window.open("https://naver.com", "_self") // 현재 창에서 해당 주소의 브라우저 창을 연다!
window.close() // 지금 위치한 브라우저 창을 끈다!
시간지연함수
시간지연함수는 이름 그대로 일정한 시간 후에 동작하도록 만들어진 함수입니다. 가장 자주 사용되는게 setTimeout()과 setInterval()입니다.
setTimeout(function() {
alert('일정 시간뒤!');
}, 5000); // 5초 뒤!
setInterval(function() {
console.log('일정 시간마다!');
}, 1000); // 1초마다!각 프로퍼티와 객체에 대한 예시는 이 링크를 통해 확인해보자!
댓글