window 객체

실무 중, 서비스에서 사용하는 모달을 통합하여 어떤 페이지에서나 특정 모달을 커스텀해서 불러오는 기능을 발견하였다.

구현 방법을 들여다보면 window에 전역객체를 선언하여 어떤 페이지에서나 호출하고 callback을 이용하여 이후 동작이나 데이터 관리등을 하고 있었다.

이에 window 객체에 대해 정리해보려 한다.

window 객체

---

Window 객체 특징

• 전역 객체: window 객체는 브라우저 환경에서 전역 객체로 취급된다. 따라서 브라우저 환경에서 실행되는 JavaScript 코드는 window 객체의 멤버나 속성에 액세스할 수 있다.
• 글로벌 스코프: window 객체 내에서 선언된 변수나 함수는 전역 스코프에 속한다. 즉, 다른 스크립트 파일에서 선언한 전역 변수나 함수도 window 객체의 멤버로 취급된다.
• 화면 크기 및 위치 정보: window.innerWidth와 window.innerHeight를 사용하여 브라우저 창의 내부 너비와 높이를 가져올 수 있다. window.screenX와 window.screenY를 사용하여 브라우저 창의 화면 위치를 가져올 수 있다.
• 브라우저 이벤트 처리: window 객체는 다양한 브라우저 이벤트를 처리할 수 있는 메서드를 제공한다. 예를 들어, window.addEventListener를 사용하여 이벤트를 수신할 수 있다.
• 문서 객체 모델(DOM) 관리: window.document를 통해 현재 웹 페이지의 DOM에 액세스할 수 있다. 이를 사용하여 HTML 요소를 조작하고, 이벤트를 등록하고, 스타일을 변경할 수 있다.
• 탐색 및 URL 관리: window.location을 사용하여 현재 페이지의 URL을 읽고 변경할 수 있다. 또한 window.history를 사용하여 브라우저의 탐색 히스토리를 관리할 수 있다.
• 타이머 함수: window.setTimeout, window.setInterval 등의 함수를 사용하여 일정 시간이 지난 후에 코드를 실행하거나 주기적으로 실행할 수 있다.
• 알림과 대화상자: window.alert, window.confirm, window.prompt 등의 함수를 사용하여 사용자에게 메시지를 표시하거나 정보를 요청할 수 있다.
• 워커 스레드 및 프레임 관리: window.Worker를 사용하여 웹 워커를 생성하고, window.frames를 사용하여 프레임을 관리할 수 있다.
• 브라우저 저장소: window.localStorage와 window.sessionStorage를 사용하여 클라이언트 측에서 데이터를 저장하고 유지할 수 있다.

내가 발견한 모달 관련 로직은 전역 객체와 글로벌 스코프, 탐색 및 URL 관리 의 특징으로 구현한 것이었다.

 

추가로 window.d.ts 파일의 기능에 대해 알아보려한다.

window.d.ts 파일의 기능

window.d.ts 파일은 TypeScript 프로젝트에서 전역 window 객체의 타입 정의를 포함하는 파일이다. 이 파일은 주로 브라우저 환경에서 TypeScript를 사용할 때 사용된다.

기본적으로 TypeScript는 브라우저 환경에서 window 객체를 이해하지 못한다. 따라서 window 객체에 대한 타입 정보를 제공하기 위해 window.d.ts 파일이 사용된다.

보통 window.d.ts 파일은 DefinitelyTyped 프로젝트에서 관리되는 @types 패키지 내에 포함되어 있다. 이 파일을 프로젝트에 포함시키면 TypeScript는 window 객체에 대한 정확한 타입 정보를 알고 있게 된다.

예를 들어, window.d.ts 파일을 사용하여 window 객체의 프로퍼티나 메서드를 사용할 때 TypeScript는 해당 멤버의 타입을 추론할 수 있다. 이것은 코드의 가독성과 안정성을 높여준다.

통합 모달 기능처럼 window 객체를 전역으로 사용할 때, Typescript 환경이라면 window.d.ts 파일을 프로젝트에 추가해줌으로써 코드 가독성과 안정성이 높아지게 된다는 것을 알았다.