호이스팅 이 개념은 선수지식으로 스코프를 알고 있어야 된다. 호이스팅이란? "끌어올린다" 라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어욜려지는 현상을 말한다. 즉, 선언문이 어디에서 선언됐든 속하는 스코프 전체에서 존재하는 것처럼 취급되는 작용을 말한다. 주의할 점은 "선언문" 이며, "대입문"은 끌어올려지지 않는다. console.log(a); var a = 2; 컴파일러는 JS엔진이 *인터프리팅(Interpreting)을 하기 전에 컴파일을 하는데 이때, var a = 2; 를 2개의 구문으로 본다. * = 인터프리팅은 기계어를 기계어를 다른 언어로 번역할 필요 없이 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경 var a a = 2 var a 는 변수 선언..
JavaScript
정의 스코프란 자바스크립트 엔진이 참조의 대상이 되는 식별자(Identifier)를 검색할 때 사용하는 규칙의 집합이다. 즉, 어떤 변수를 사용하거나 함수를 호출하려고 할 때 식별자로 사용하는데, 그 식별자를 검색하는 매커니즘이라 생각하면 된다. 렉시컬 스코프 (정리글) 프로그래머가 코드를 짤 때, 변수 및 함수/블록 스코프를 어디에 작성하였는가에 따라 정해지는 스코프를 렉시컬 스코프라 한다. "렉시컬(Lexical)"이라는 명칭이 붙은 이유는 자바스크립트 컴파일러가 소스코드를 토큰(Token)으로 쪼개서 의미를 부여하는 렉싱(Lexing) 단계에 해당 스코프가 확정되기 때문이다.(렉싱 타임에 정의되는 스코프) 즉, 변수 혹은 함수/블록이 어디에 써있는가를 보고 그 스코프를 판단하면 된다. 스코프 체인 ..
정의 코드의 실행환경에 대한 여러가지 정보를 가진 개념 으로, 간단하게 자바스크립트 엔지에 의해 만들어지고 사용되는 코드 정보를 담은 객체 집합이다. 종류 JS 코드는 3가지 종류가 있다. 글로벌 스코프에서 실행되는 글로벌 코드, 함수 스코프에서 실행되는 함수코드, 그리고 이 글에서 다루지 않는 eval()로 실행되는 코드가 있다.(eval()와 관련된 렉시컬 스코프에 대해서는 다음 글에서 정리 하겠다.) 각각의 코드는 자신만의 실행 컨텍스트를 생성한다. 엔진이 스크립트 파일을 실행하기 전, 글로벌 실행 컨텍스트(Global Execution Context, GEC)가 생성되고, 함수를 호출할 때마다 함수 실행 컨텍스트(Function Execution Context, FEC)가 생성된다. 주의할 점은 ..
이벤트 버블링과 캡처링 이벤트 위임에 대해 알려면 이벤트 버블링과 이벤트 캡처링의 동작 방식을 선수지식으로 알고있어야 한다. 이벤트 버블링 이란? 하위 엘리먼트에 이벤트가 발생할 때 그 엘리먼트부터 상위요소 까지 이벤트가 전달되는 방식이다. 이벤트 캡처링 이란? 하위 엘리먼트에 이벤트 핸들러가 있을 때 상위 엘리먼트부터 이벤트가 발생하기 시작해서 하위 엘리먼트까지 이벤트가 전달되는 방식이다. 예시를 보자 예시 document.querySelector('li').addEventListener('click', () => console.log('li 클릭')); document.querySelector('ul').addEventListener('click', () => console.log('ul 클릭'));..
AJAX란? Asunchronous Javascript And XML 의 약자로, 비동기적으로 JS를 사용해 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법이다. 동작 과정 사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 AJAX 요청을 보낸다. 서버는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로 HTML/CSS와 데이터를 합쳐 만든 DOM 객체를 UI에 업데이트 시킨다. 비동기로 이루어지며, 기존의 페이지 전부 로딩하는 방식이 아닌 일부만 업데이트하는 방식이다. 즉, AJAX를 이용하면 백그라운드 영역에서 서버와 통신한 결과를 일부분에만 표시할 수 있다. 장점 페이지 전환 없이 빠르게 화면 일부분을 업데이트 가능 수신 데이터 양을 줄이고 클라이언트에게 처리를 맡길..
호이스팅 정의 : 변수와 함수 선언문을 선언된 위치에서 코드의 꼭대기로 올리는 동작 호이스팅을 동작을 한번 코드를 보며 확인해보자. a = 2; var a; console.log(a); 위의 코드에서 var a 라는 변수 선언문이 있다. JS엔진은 코드를 인터프리팅 하기 전에 컴파일한다.(중요) 컴파일레이션 단계 중 모든 선언문을 찾아 적절한 스코프에 연결해주는 것이 렉시털 스코프의 핵심이다. 고로 위의 코드에서는 아래와 같은 구문으로 나누어진다. var a; a = 2; 첫번째 구문은 선언문으로 컴파일레이션 단계에서 처리되며, 두번째 구문은 대입문으로 실행 단계 까지 방치된다. 고로 코드는 다음과 같이 처리된다. var a; a = 2; console.log(a); 선언문만 끌어올리고 다른 대입문이나 ..
