[부스트코스]{2. DB 연결 웹 앱}(2. WEB UI 개발 - FE)_1. window 객체

브라우저 객체 모델(BOM)이란?

자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다.

이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.

 

브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니다.

하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 준다.

자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.

 

#Window 객체

window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다.

자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다.

window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 된다.

문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 된다.

 

#객체(object) & 프로퍼티(property) & 메소드 (method)

객체	자바스크립트에서 말하는 객체는 어떻게 보면 자바스크립트 그 자체라고 해도 무방하다. 자바스크립트 자체가 객체기반으로 돌아가는 스크립트 언어이기 때문이다. 객체의 기본개념은 데이터(주채)와 그 데이터에 관련되는 동작(절차,방법,기능)을 모두 포함하고 있는 개념이다. 한마디로 객체는 자신의 정보를 가지고 있는 독립적인 주체이다. 우리 주위에 보이는 컴퓨터,책상,의자,마우스,키보드 등이 모두 자신만의 특성을 가진 객체인 샘이다.
프로퍼티	로퍼티는 객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태이다. 이는 객체를 활용함에 있어서 매우 유용한 녀석이다. 특정객체가 가지고 있는 정보를 품고 있기에 **그 객체가 가진 정보에 직접적으로 접근할 수 있게 해주기 때문이다. 프로퍼티란 기본적으로 이름과 값을 가지고 객체의 정보를 담고 있는 녀석들이다. 이 프로퍼티의 접근 연산자는 '.' 이다. 이 연산자를 통해 프로퍼티를 추가 할수도 있고 프로퍼티에 접근 할수도 있다. 객체 생성과 프로퍼티 접근 예시
메소드	메소드는 객체가 가지고 있는 동작이다. 이 동작이란 의미에서 함수와 메소드를 구분하지 못하는 분들도 많다. 기본적으로 함수와 메소드가 서로 일련의 동작을 실행한다는 점에서 동일하기 때문이다. 하지만 메소드와 함수는 엄연하게 서로 다른 녀석이다.  *메소드 vs 함수 메소드는 위에서 설명하였듯이 객체가 가지고 있는 동작이다. 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행하여야 한다. 즉 그 동작을 수행하는 주체는 객체이며 그 동작을 수행하기 위해서는 객체에게 그 동작을 수행하라고 지시해야 한다. 함수는 그 동작을 수행하기 위해 객체에게 어떤을 동작을 수행하라고 명령하지 않아도 된다. 그이유는 함수자체가 그 동작을 정의한 함수객체이기 때문에 자기 자신을 수행하는 것이다. 함수객체라는 것에 대해서는 이후에 자세히 설명하도록 하겠다. 어찌 되었건 메소드는 객체를 움직이는 동작이며 그 동작을 수행하기 위해서 객체의 정보를 담고있는 프로퍼티를 사용할수 있다.

 

 

#window 객체의 메소드들 중 setTimeout()

문법
매개변수	func: function이 타이머가 만료된 뒤 실행된다.
	code: 선택적 구문으로 함수 대신에 문자열을 넣을 수 있는데, 이것은 타이머가 만료된 뒤 해석되고 실행된다.
	delay: [Optional] 타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간이다. 만약 이 매개변수를 생략하면, 0이 값으로 사용된다. 실제 지연시간은 더 길어질 수 있다.
	param1, ..., paramN: [Optional] 타이머가 만료되고 func에 전달되는 추가적인 매개변수들이다.
반환값	반환되는 timeoutID는 숫자이고, setTimeout()을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 이다. 이 값은 타이머를 취소시키기 위해 WindowTimers.clearTimeout()에 전달할 수도 있다.

 

window.setTimeout()
setTimeout() //window는 전역객체라서 생략 가능하다.

function run() {
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않는다.
    }, 1000); //1초의 delay 후에 실행 된다.
}

run();

setTimeout의 실행은 비동기(asynchronous)로 실행되어 동기적인 다른 실행이 끝나야 실행된다.

function run() {
    console.log("start");
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않는다.
    }, 1000);   //1초의 delay 후에 실행된다.
    console.log("end");
}

run();

setTimeout 안의 함수(콜백함수)는 run함수의 실행이 끝나고 나서, (정확히는 stack에 쌓여있는 함수의 실행이 끝나고 나서 실행됨) 실행된다.

 

 

 

 

#동기식 vs 비동기식

동기식

비동기식

요청을 보낸 후 응답(=결과)를 받아야지만 다음 동작이 이루어지는 방식이다. 어떠한 일을 처리할 동안 다른 프로그램은 정지한다. 실제 cpu가 느려지는 것은 아니지만 시스템의 전체적인 효율이 저하된다고 할 수 있다.

요청을 보낸  후 응답(=결과)와는 상관없이 다음방식이 동작하는 방식이다. 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다. 비동기식은 비동기식 처리를 요청할 때 할일 이 끝난 후 처리결과를 알려주는 콜백이라는 함수를 함께 알려준다. 비동기식 처리를 요청하였을 때 호출받은 함수는 바로 응답(=확인)을 수행한다. 이 응답은 처리 결과에 대한 응답이 아니라 요청에 대한 확인 동작일 뿐이다. 호출받은 함수는 처리가 끝나면 요청한 함수를 호출하여 처리 결과를 전달하게 된다. 이러한 함수 호출의 흐름은 사용자가 아닌 일을 마친 시스템이 호출하는 형태이기 때문에 콜백이라고 불린다. 이미 응답을 했기 때문에 처리결과를 함수 호출이라는 형태로 전달하는 것이다. 비동기 방식은 DOS같은 단일 운영체제에서는 불가능하며 windows 같은 multitask 환경에서만 가능하다. (ajax에서는 success, error, complete 을 콜백함수라고 할 수 있다.)

 

<동기식>                                       <비동기식>

 

 

 

 

 

 

 

 

#참고 자료

http://insanehong.kr/post/javascript-object/

javascript 기초 - Object 이해하기 | Insanehong's Incorrect Note

https://developer.mozilla.org/ko/docs/Web/API/WindowTimers/setTimeout

WindowTimers.setTimeout()

https://jieun0113.tistory.com/73

[용어정리] 동기방식&비동기방식 비교

 

 

 

 

 

 

 

 

#부스트코스 강의

https://www.edwith.org/boostcourse-web/lecture/16698/

[LECTURE] 1) window 객체(setTimeout) : edwith