자바스크립트 호이스팅
·
프론트엔드/Javascript
호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 호이스팅은 어떻게 동작하는가 01. 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 모든 변수값들을 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/ 함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위 : 함수 블록 {} 안에서 유효 02. 즉 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다. 호이스팅 대상 var 변수 선언과 ..
브라우저 동작 원리
·
프론트엔드/Web Env
브라우저의 핵심 기능 사용자의 요청을 서버에 요청(Request)하고, 서버의 응답(Response) 받아 웹페이지에 표시한다. 브라우저의 동작 원리 01. 서버 요청과 응답 1. 사용자의 요청을 서버에 요청(Request) 하고, 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. 02. HTML, CSS 처리 (렌더링 엔진) 1. 렌더링 엔진의 HTML,CSS 파서에 의해 파싱(Parsing)되어 2. DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 3. 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. * 렌더링 엔진이란 요청받은 내용을 브라우저 화면에 표시하는 역할을 한다. 03. Javascript를 처리 ( 자바스크립트 엔진) 1. 렌더링 엔..
Javascript - 세미콜론 사용해야 하는가?
·
프론트엔드/Javascript
결론부터 말하면 선택이다. 필수는 아니다. Why? Javascript parser는 소스코드를 parsing하는 동안 자동으로 세미콜론을 생성해주기 때문이다.
async와 defer의 차이점
·
프론트엔드/Javascript
용어 사전 학습 parsing : 문법을 분석하는 것. fetching : 가져오는 것 executing : 실행하는 것. 01. async Process - HTML이 파싱되는 동시에 JS파일을 다운받고 실행시킨다. 문제점 - HTML이 완전이 parsing되기 전에 JS파일이 실행될 수 있다. 02. defer *추천* Process - HTML이 파싱되는 동안 JS파일을 다운 받고, HTML 파싱이 끝나면 JS파일을 실행한다. 추천 defer는 가장 효율적이고 안전한 방법이다. Process 문제점 JS파일 클경우에는 사용자가 오래 기다려야 한다는 단점이 있다. Reference : https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL..