![]()
정의 코드의 실행환경에 대한 여러가지 정보를 가진 개념 으로, 간단하게 자바스크립트 엔지에 의해 만들어지고 사용되는 코드 정보를 담은 객체 집합이다. 종류 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를 이용하면 백그라운드 영역에서 서버와 통신한 결과를 일부분에만 표시할 수 있다. 장점 페이지 전환 없이 빠르게 화면 일부분을 업데이트 가능 수신 데이터 양을 줄이고 클라이언트에게 처리를 맡길..
