JavaScript/Behind the Scenes (5) 썸네일형 리스트형 HTML에 자바스크립트 파일 로드하기 -웹 브라우저는 HTML를 파싱하는 과정에서 요소를 만나면 HTML 해석을 잠시 멈추고 스크립트 파일을 불러오고 실행시킨다. - 태그는 와 요소에 추가할 수 있는데, 일반적으로 바로 위에 작성한다. -에 삽입하면 화면이 멈추는 현상이 발생함 -스크립트 요소의 속성 1. async: 비동기적으로 스크립트를 내려 받는다. 위 그림처럼 스크립트를 불러오는 중에 html 파싱은 중단되지 않는다. 외부 스크립트 파일을 불러올 때만 유효하다. 2. defer: 스크립트 태그의 위치에 상관없이 html을 완전히 파싱하고 표시할 때까지 스크립트 실행을 지연한다. 3. src: 외부 파일의 위치를 지정한다. 4. type: 스크립트 언어의 컨텐츠 타입을 지정한다. 기본값은 text/javascript이다. Hoisting 호이스팅(hoisting)이란? -선언되기 이전에 참조 혹은 호출을 먼저 실행 할 수 있다. 즉, 변수(또는 함수, 클래스 등)가 scope의 최상단으로 끌어올려지는 것처럼 보이는 현상을 말한다. -parsing 단계에서 자바스크립트 엔진은 코드를 읽으면서 모든 선언문에 대해 메모리 공간을 미리 할당하고 초기값을 저장한다. -코드가 실행되는 과정을 조금 더 자세히 살펴보면, 모든 Execution Context의 creation phase에서 변수는 Variable Environment 객체의 new properties로 생성된다. 동시에 VE 객체에 scope 프로퍼티 또한 생성되고 이 scope 내(혹은 하위 스콥)에서 변수에 대한 접근이 허용된다. -주의할 점은 호이스팅은 선언과 할당을 분리하여 생.. Event Loop -브라우저에서 자바스크립트 런타임은 크게 JavaScript Engine, WEB APIs, Callback Queue, Event Loop로 구성된다. *JavaScript Runtime : 자바스크립트 코드가 구동되는 모든 환경을 말함 -콜백 큐는 콜백된 함수가 콜백 순서에 따라 위치하는 공간이다. 쉽게 말해 콜백 대기열이다. -이벤트 루프는 콜백 큐의 콜백 함수를 Call stack으로 전달한다. 즉, 이벤트 루프가 콜백함수의 실행을 결정한다. -이벤트 루프는 비동기적 작업을 가능하게 해주는 핵심적인 기능이다. -Asynchronous tasks는 브라우저 background(web API environment)에서 작동한다. -예를 들어, 콜스택에서 이미지 로드 작업이 실행되었다고 가정해보자. -.. Execution Context & Scoping 1. EC(Execution Context) -코드 독해와 디버깅의 이해에 매우 중요한 자바스크립트 엔진의 동작 원리이다. -Javascript code의 실행 환경에 관한 모든 정보를 저장한다. -모든 실행(함수 등)은 항상 EC를 통해 작동하며 실행 1단위 당 고유의 EC를 갖는다. -EC내에 포함되는 기본 정보: 1.) Variable Environment -variable & function declaration -parameter & arguments object 2) Scope chain 3) 'this' keyword -EC는 execution phase 직전인 creation phase에서 발생한다. -소스코드의 컴파일이 끝나면 top-level code들에 대해서 global EC가 생성.. -JavaScript- 자바스크립트는 1. High-level 2. Garbage-collected 3. Interprted or just-in-time compiled 4. Multi-paradigm 5. Object-orient (prototype-based) 6. First-class fuctions 7. Dynamic 8. Single-threaded 9. Non-blocking IO by Event loop language 이다. *Compilation vs Interpretation * 짧게 보는 자바스크립트의 역사 -자바스크립트는 웹 페이지와 상호작용하도록 디자인된 스크립트 언어이다. 처음 자바스크립트 언어를 설계할 당시에는 비동기 작업을 비롯한 프로그래밍 언어와 관련한 많은 내용은 당연히 포함되지 않았다. 초창기.. 이전 1 다음
