1. ajax자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 왼쪽은 전통적인 웹페이지의 단점이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다.변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜박이는 현상이 발생한다.클라이언트와 서버와의 통신이 동..

1. 동기처리와 비동기 처리함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 실행된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스텍이라고 부른다)에 푸시되고 함수 코드가 실행된다.함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되게 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다.자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 최상위 요소인 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두 실행 대기 테스크들이다. 현재 실행 컨텍스트가 POP되어 스택에서 제거 되면 다음 실..

1. 일급 객체 다음 조건을 만족한느 객체는 일급 객체이다.무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.변수나 자료구조(객체, 배열 등)에 저장할 수 있다.함수의 매개변수에 전달될 수 있다.함수의 반환값으로 사용할 수 있다.// 1. 함수는 무명의 리터럴로 생성할 수 있다.// 2. 함수는 변수에 저장할 수 있다.// 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.const increase = function (num) { return ++num;};const decrease = function (num) { return --num;};// 2. 함수는 객체에 저장할 수 있다.const auxs = { increase, decrease };// ..

1. Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서들르 추가해서 객체를 완성할 수 있다.// 빈 객체의 생성const person = new Object();// 프로퍼티 추가person.name = 'lee';person.sayHello = function () { console.log('Hi my name is + this.name):};console.log(pesron); // {name: 'lee', sayHello: f}person.sayHello(); // Hi my name is lee 생성자 함수(constructor)란? new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수..

1. e (event 이벤트 객체) 이벤트 핸들러 함수의 첫 번째 매개변수로 전달되는 객체이다. 보통 e 또는 event로 표현한다.발생한 이벤트에 대한 모든 정보를 담고 있는 객체로, 이벤트의 종류, 타켓 요소, 관련된 위치 정보, 키보드 입력 정보 등 다양한 속성과 메서드를 포함하고 있다.예) click, keydown 같은 이벤트 정보가 들어 있다.document.addEventListener('click', function(e) { console.log(e); // 이벤트에 대한 전체 정보}); 2. e.target이벤트가 발생한 대상 요소를 가리킨다.이벤트가 발생한 구체적인 HTML 요소(노드)를 가리키며, 이벤트가 발생한 버튼, 입력 필드, 링크 등 어떤 HTML 요소인지 알 수 있게..

1. getComputedStyle() 메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신한다.이 속성값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값이다. 개별 CSS속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 액세스할 수 있다.Inline 스타일은 DOM에 바로 포함되어 있어 DOM 트리에서 접근할 수 있지만,외부 CSS 및 style 태그의 스타일은 CSSOM에서 관리되고, 렌더링 후 getComputedStyle()을 통해 브라우저가 계산한 최종 값을 얻을 수 있다.브라우저는 DOM 트리와 CSSOM(CSS Object Model) 트리를 결합하여 렌더 트리를 만드는데, 이 과정에서 외부 ..