Eunseo Choi

# Window 인터넷 브라우저를 보면 주소창, 탭, 툴바 등과 같은 기능들이 구성되어 있다. 이후 화면에 비추는 것이 웹 사이트로 여기서 브라우저 전체를 담당하는 것이 Window 객체이고, 웹 사이트만 담당하는 것이 Document 객체라고 이해하면 쉽다. window 아래에는 다양한 객체들이 있는데 대표적으로 screen, location, history, document 등이 있고 메서드에는 parseInt, isNaN 등이 있다. 실제 parseInt 메서드를 쓸 때 window.parseInt()라고 대부분 사용하지 않고 parseInt()로만 사용해도 실행이 된다. 그 이유는 사실 window 객체는 모든 객체의 조상으로 전역객체이며, 모든 객체를 다 포함하고 있기 때문에 window는 생략..

# 함수의 메소드 arguments 함수의 메소드 중 대표적으로 call, apply, bind이 중요하다. ## call & apply 원래 함수는 선언한 후 호출해야 실행된다. 함수를 호출하는 방법은 함수명 뒤에 ()를 붙이는 것과, call 그리고 apply 메소드를 사용하는 방법이 있다. var example = function (a, b, c) { return a + b + c; }; example(1, 2, 3); example.call(null, 1, 2, 3); example.apply(null, [1, 2, 3]); call 과 apply 메소드가 공통적으로 가진 null 인자의 역할은 바로 this를 대체하는 것이다. 실행 컨텍스트에서 this는 기본적으로 window를 가리킨다고 했었..

# 브라우저의 동작 원리 대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만, 웹 어플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 보다 효율적인 자바스크립트 프로그래밍이 가능하다는 뜻이다. 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, JS, 이미지 파일 등을 응답받으며, HTML, CSS 파일은 각각 렌더링 엔진의 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를..

# JavaScript란 자바스크립트는 싱글 스레드 언어로 단일 호출 스택이 있다. 즉 한 번에 하나의 일만 처리한다는 뜻이다. 만약 브라우저에서 무거운 처리를 진행하려고 하면 단일 스레드로 인해 작업 블로킹이 발생할 수 있다. (Maximum call stack size exceeded.) 이러한 단점을 극복하기 위한 해결 방안이 바로 비동기 콜백이다. 싱글 스레드 언어임에도 불구하고 웹 사이트에서 여러 작업을 동시에 할 수 있는 것은 브라우저가 Web APIs 같은 것들을 제공하여 비동기 작업을 가능하게 해주기 때문이다. 함수 실행 시 호출 스택에 차곡차곡 쌓여 순차적으로 실행되어 혼선을 줄일 수 있다. 이때 AJAX나 setTimeout 혹은 DOM event 함수를 실행하면, 자바스크립트 엔진은 ..

DOM (Document Object Model) 문서 객체 모델 HTML의 각각 요소들을 트리 형태로 표현했을 때, 하나의 박스가 '노드'라고 칭한다. Hello World This is for DOM Click document를 사용하여 객체에 접근하기 selector method id document.getElementById() class document.getElemenstByClassName() tag document.getElementsByTagName() css 선택자 document.querySelector() css 선택자 (다중 요소 접슨) document.querySelectorAll() querySelectorAll과 getElementsByTagName 같을까? 결과값은 다르다...