TypeScript의 window 객체
이 글에서는 타입스크립트의 window 객체에 대해 설명합니다.
코드를 통해 window 객체의 속성과 메서드에 대해 배울 수 있습니다.
YouTube Video
TypeScript의 window 객체
window는 TypeScript 및 JavaScript에서 브라우저 전체 창을 나타내는 전역 객체입니다. 여러 속성과 메서드를 포함하여 브라우저 API에 접근하거나 DOM(Document Object Model)을 조작하고, 타이머, 저장소 및 기타 기능을 사용할 수 있습니다.
tsconfig.json과 window 객체
TypeScript에서는 window 객체에 접근할 때 브라우저 관련 전역 기능에 타입 정의가 있어 에디터 자동완성과 타입 검사가 가능합니다. TypeScript의 표준 타입 정의 파일(lib.dom.d.ts) 덕분에 window 객체의 다양한 속성과 메서드를 인식할 수 있습니다.
타입스크립트를 사용할 때는 프로젝트의 루트에 tsconfig.json 파일을 두는 것이 일반적입니다. 이 파일은 컴파일러 옵션과 타입 정의 파일의 범위를 지정하는 데 사용됩니다.
window를 사용할 때는 특히 **브라우저 타입 정의(DOM 타입 정의)**를 활성화하는 것이 중요합니다. 이것이 없으면 window 및 document에서 타입 오류가 발생합니다.
1{
2 "compilerOptions": {
3 "target": "es6",
4 "module": "esnext",
5 "strict": true,
6 "lib": ["es6", "dom"], // Enable DOM type definitions
7 "outDir": "./dist"
8 },
9 "include": ["src"]
10}"lib": ["es6", "dom"]를 지정하면window와document의 타입이 올바르게 인식되고 자동 완성됩니다.
주요 window 속성과 메서드
window.documentwindow.document는 페이지의 DOM에 접근하는 데 사용되는 속성입니다. 요소를 가져오고 DOM을 변경할 수 있습니다.
1console.log(window.document.title); // Display the title of the current document
- 이 예시에서는 현재 문서의 제목이 표시됩니다.
window.localStorage/window.sessionStoragewindow.localStorage와window.sessionStorage는 브라우저에 사용자 데이터를 저장할 수 있는 저장소 기능에 접근하는 데 사용되는 속성입니다.
1window.localStorage.setItem('key', 'value'); // Save data
2const value = window.localStorage.getItem('key'); // Retrieve data
3console.log(value); // 'value'
- 이 예시에서는 데이터를
localStorage에 저장했다가 다시 불러와 표시합니다.
window.locationwindow.location은 현재 URL에 대한 정보를 가져오거나 조작하는 데 사용되는 객체입니다. 리다이렉션을 수행하거나 URL을 변경할 수 있습니다.
1console.log(window.location.href); // Display the current URL
2window.location.href = 'https://example.com'; // Redirect to another page
- 이 예시에서는 URL이 표시되고 사용자가 다른 페이지로 이동됩니다.
window.setTimeout/window.setIntervalwindow.setTimeout과window.setInterval은 지연 후 또는 일정 간격마다 함수를 실행하는 데 사용하는 메서드입니다.
1window.setTimeout(() => {
2 console.log('This will be executed after 2 seconds');
3}, 2000);- 이 코드는 2초 후 콘솔에 메시지를 출력하는 처리를 실행합니다.
window.alert/window.confirm/window.promptalert,confirm,prompt는 경고를 표시하거나 사용자 입력을 요청하는 대화 상자를 표시합니다.
1window.alert('Alert message');- 이 코드는 메시지를 알리기 위해 알림 대화상자를 표시합니다.
window 객체의 이벤트
window는 DOM의 일부이므로 직접 이벤트를 감지할 수도 있습니다. 타입스크립트에서는 타입이 자동 완성되므로 잘못된 이벤트 이름이나 속성을 사용하면 오류가 발생합니다.
윈도우 리사이즈(크기 변경) 이벤트
1window.addEventListener("resize", (event) => {
2 console.log("Window resized:", window.innerWidth, window.innerHeight);
3});- 이 코드는 창 크기가 변경될 때 새로운 너비와 높이를 콘솔에 출력합니다.
키보드 이벤트
1window.addEventListener("keydown", (event: KeyboardEvent) => {
2 console.log(`Key pressed: ${event.key}`);
3});- 이 코드는 사용자가 키를 누를 때 누른 키를 콘솔에 출력합니다.
페이지 로드 이벤트
1window.addEventListener("load", () => {
2 console.log("Page fully loaded");
3});- 이 코드는 페이지 로딩이 완료되면 콘솔에 메시지를 출력합니다.
노트
-
타입스크립트에서는 이벤트 객체의 타입이 추론되므로
KeyboardEvent나MouseEvent와 같이 타입에 유의하면 코드가 더 안전해집니다. -
더 이상 필요하지 않은 경우 이벤트 리스너를 제거하는 것이 좋습니다.
window.removeEventListener메서드를 사용하여 리스너를 제거할 수 있습니다.
1function handleClick() {
2 console.log("Clicked!");
3}
4
5// Add event listener
6window.addEventListener("click", handleClick);
7
8// Remove event listener
9window.removeEventListener("click", handleClick);- 이 코드는 클릭 이벤트에 대한 리스너를 추가한 후 제거하는 예시를 보여줍니다.
커스텀 속성을 추가할 때
window 객체에 커스텀 속성을 추가할 때, TypeScript에서는 타입 에러를 방지하기 위해 타입 확장이 필요합니다.
1// Add a custom property to the window
2interface Window {
3 myCustomProperty: string;
4}
5
6window.myCustomProperty = "Hello, World!";
7console.log(window.myCustomProperty); // "Hello, World!"
- 이 코드는 TypeScript에서
window객체에 커스텀 속성을 추가하고 값을 설정한 후 표시하는 예시입니다.
전역 window 객체를 사용할 때 주의사항
TypeScript의 엄격한 타입 검사로 인해 존재하지 않는 속성이나 메서드를 사용하려고 하면 에러가 발생합니다. 예를 들어, 존재하지 않는 window 객체의 속성에 접근하려고 하면 에러가 발생하므로, 타입을 적절히 확장해야 합니다.
이처럼 window 객체는 브라우저 애플리케이션의 다양한 기능에 접근하는 데 중요한 역할을 하며, TypeScript에서는 타입 검사를 활용하여 안전하게 사용할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.