this 바인딩 EC(Execution Context) 가 생성될 때마다 this 바인딩이 발생하며, 우선순위 순으로 나열하면 아래와 같다. this 바인딩 되는 순서 1. new를 사용했을 때 해당 객체로 바인딩된다. var name = "global"; function Func() { this.name = "Func"; this.print = function f() { console.log(this.name); }; } var a = new Func(); a.print(); // Func 2. call, apply, bind 와 같이 명시적 바인딩을 사용한 경우 인자로 전달된 객체에 바인딩 된다. function func() { console.log(this.name); } var obj = { na..
JavaScript
호이스팅 이 개념은 선수지식으로 스코프를 알고 있어야 된다. 호이스팅이란? "끌어올린다" 라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어욜려지는 현상을 말한다. 즉, 선언문이 어디에서 선언됐든 속하는 스코프 전체에서 존재하는 것처럼 취급되는 작용을 말한다. 주의할 점은 "선언문" 이며, "대입문"은 끌어올려지지 않는다. console.log(a); var a = 2; 컴파일러는 JS엔진이 *인터프리팅(Interpreting)을 하기 전에 컴파일을 하는데 이때, var a = 2; 를 2개의 구문으로 본다. * = 인터프리팅은 기계어를 기계어를 다른 언어로 번역할 필요 없이 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경 var a a = 2 var a 는 변수 선언..
정의 스코프란 자바스크립트 엔진이 참조의 대상이 되는 식별자(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를 이용하면 백그라운드 영역에서 서버와 통신한 결과를 일부분에만 표시할 수 있다. 장점 페이지 전환 없이 빠르게 화면 일부분을 업데이트 가능 수신 데이터 양을 줄이고 클라이언트에게 처리를 맡길..
