Web
-
[JavaScript] 실행 컨텍스트와 스코프 체인Web/JavaScript 2021. 5. 13. 21:33
실행 컨텍스트(Execution Context)란? context는 한국어로 문맥 이라는 뜻을 가진다. 문맥의 정확한 정의는 그럼 무엇일까? 문맥 어떤 주어진 언어표현이 나타나는 부분과 연관이 되는 언어적인 맥락 또는 환경. (네이버 사전) 즉 실행 컨텍스트는 자바스크립트 코드가 실행되기 위해서 필요한 맥락과 환경을 context라고 한다. 컨텍스트에는 세 가지 종류가 있다. Context의 종류 1. Global Execution Context (전역 컨텍스트) - 코드가 글로벌로 실행이 될 때의 환경 - 자바스크립트는 싱글 스레드 언어이기 때문에 전역 컨텍스트는 딱 하나만 존재 2. Functional Execution Context (함수 컨텍스트) - 함수가 호출이 되어 실행이 될 때 실행되고 있..
-
[JavaScript] 호이스팅 이란?Web/JavaScript 2021. 5. 13. 19:09
호이스팅(Hoisting)이란? 자바스크립트 Parser가 함수를 실행하기 전 함수를 한번 훑는다. 여기서, 함수 안에 필요한 변수 값들을 모두 모아서 유효 범위의 최상단에 선언 하는데, 이를 호이스팅(Hoisting)이라 한다 함수 안 (블록 안 { }) 에서만 유효하고, 실제로 코드가 끌어올려 지는 것이 아니라 자바스크립트 Parser 내부적으로 끌어올려 처리하는 것이다. 때문에 실제 메모리에는 어떠한 변화도 발생하지 않는다. 호이스팅의 대상 1. var 변수 선언 변수 선언의 경우 var에서만 호이스팅이 일어난다. let / const 변수 선언에서는 호이스팅이 발생하지 않는다. 여기서 변수의 선언만 끌어올려지고, 할당은 함께 끌어올려지지 않는다. console.log(hello); // undef..
-
[Browser] <script> 태그의 적절한 위치Web/Browser 2021. 5. 13. 15:52
브라우저 동작 방식에 따른 Script 태그의 위치 앞의 글에서 말했듯, HTML은 맨 윗 줄 부터 차례대로 읽어 내려 가며 파싱이 되어진다. 그러다가 link 태그를 만나면 HTML파싱을 중단하고 CSS 요청, 응답 과정을 실행한다. 작업이 끝나면 중단된 HTML을 다시 읽고 DOM 트리를 완성하고 랜더 트리를 완성한다. 여기서 중간에 script태그를 만나게 되면 파싱을 중단한 뒤 제어 권한을 자바스크립트 엔진에게 넘기고 자바스크립트 코드를 실행한다. 그렇기 때문에 HTML 태그들 사이에 script 태그가 위치하면 두가지 문제가 발생한다. 1. HTML을 읽는 과정에서 스크립트를 만나면 중단 시점이 생기고 랜더링이 지연된다. 2. DOM 트리가 생성되기 이전에 자바스크립트가 생성되지도 않은 DOM의..
-
[Browser] 브라우저의 동작 원리Web/Browser 2021. 5. 13. 15:42
브라우저의 구조 대부분의 브라우저는 아래 일곱가지의 구성요소로 이루어져있다. 1. 사용자 인터페이스 - 사용자가 요청한 페이지를 보여주는 창을 제외한 보든 부분 (새로고침 버튼, URI 입력창 등) 2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 3. 렌더링 엔진 - 요청한 콘텐츠(페이지)를 화면에 표시. (ex. WebKit, Gecko) 4. 통신 - HTTP, HTTPS 요청을 받으면네트워크 처리 후 응답을 전달. (OS에서 실행됨) 5. UI 백엔드 - Render Tree를 브라우저에 그림 6. 자바스크립트 해석기(엔진) - 자바스크립트 코드를 해석하고 실행 (ex. V8) 7. 자료 저장소 - 모든 종류의 자원을 저장. (ex. Cookie, Local Storage..
-
[JavaScript] 번들러(Bundler)란?Web/JavaScript 2021. 5. 13. 10:01
프론트엔드를 개발하다보면 웹팩(WebPack)이나 파셀(Parcel)같은 이름을 종종 마주하곤 한다. 사실 나도 이름은 들어봤지만 어떤 기능을 하는지, 왜 필요한지 전혀 몰랐고, 번들러라는 용어는 심지어 처음 들어봤다. 공부를 시작한지 수 개월이 지나서야 프론트개발에 있어서 필수적인 번들러가 무엇인지, 그리고 왜 사용하는지를 알게 되었기에 반성과 복습의 의미로 글을 적기로 했다. 번들러(Bundler)의 탄생 배경 인터넷이 등장하고 처음에는 웹 페이지와 서비스들의 규모가 그렇게 크지 않았다. 때문에 이를 구성하는 HTML이나 자바스크립트 파일의 크기도 상대적으로 작았고 해당 서비스를 유지하는데 큰 무리가 없었다. 하지만 인터넷이 발달하면서, 적게는 수십만 줄에서 많게는 수백만 줄의 코드로 이루어진 대규모..
-
[JavaScript] JavaScript의 동작 원리Web/JavaScript 2021. 5. 3. 00:36
이 전 글에서 언급했듯 우선 자바스크립트는 컴파일이 되지 않은 채 브라우저에 내장 되어있는 자바스크립트 엔진(자바스크립트 인터프리터)에 의해 한줄 한줄 읽어 내려가며 실행되는 인터프리터(스크립트) 언어다. 자바스크립트의 생명이라고도 볼 수 있는 자바스크립트 엔진의 구조는 데이터를 저장하는 Memory Heap과 호출될 명령어들을 순서대로 담는 Call Stack으로 구성되어있다. 자바스크립트는 싱글 스레드? '자바스크립트는 싱글 스레드 기반의 언어'인데 이는 자바스크립트의 가장 큰 특 징중 하나다. 그리고 이것은 하나의 프로세스 안에서 한가지의 일 밖에 처리하지 못 한다는 의미다. 실제로 함수들이 호출되면 그 순서대로 위에서 말한 콜스택에 쌓여, 위에서부터 함수가 하나씩 완료되기 전 까지는 아래쪽의 함수..