전체 글

⭐️ 노션에서 보기Ajax란?자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공전통적인 방식: html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 렌더링하는 방식으로 동작 ⇒ 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링전통적인 웹페이지의 생명 주기- 전통적 방식의 단점 1. 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분..

⭐️ 노션에서 보기동기 처리와 비동기 처리함수를 호출하면 함수 코드가 평가 되어 함수 실행 컨텍스트가 생성됨 → 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행 됨 → 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거됨 eg. const foo = () => {}; const bar = () => {}; foo(); bar();- 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시 되는 것 ⇒ 함수 실행의 시작- 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시 되기 때문⇒ 함수의 실행 순서는 실행 컨텍스트 스택으로 관리자바스크립트 엔진은 단 ..

⭐️ 노션에서 보기호출 스케줄링호출 스케줄링: 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 타이머 함수를 사용하여 함수 호출을 예약하는 것타이머 생성 함수: setTimeout, setInterval 타이머 제거 함수: clearTimeout, clearInterval타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니지만 브라우저와 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공함 → 타이머 함수는 호스트 객체임타이머 함수 setTimeout(한 번 동작)과 setInterval(반복 동작)은 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성함자바스크립트 엔진은 싱글 스레드로 동작하기 때문에 타이머 함수는 비동기 처리 ..

⭐️ 노션에서 보기이벤트 드리븐 프로그래밍브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킴특정 버튼 요소에서 클릭 이벤트가 발생하면 특정 함수(이벤트 핸들러)를 호출하도록 브라우저에게 위임(이벤트 핸들러 등록)할 수 있음함수를 언제 호출할 지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 Click me! 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 어플리케이션 간 상호작용(interaction)이 가능⇒ 이벤트 드리븐 프로그래밍: 프로그램의 흐름을 이벤트 중심으로 ..

⭐️ 노션에서 보기DOM(Document Object Model): HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조노드HTML 요소와 노드 객체HTML 요소:HTML 문서를 구성하는 개별적인 요소 https://yung-developer.tistory.com/74- 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨 - HTML 요소의 어트리뷰트 → 어트리뷰트 노드 - HTML 요소의 텍스트 콘텐츠 → 텍스트 노드- HTML 요소 간에는 **중첩 관계**에 의해 계층적인 부자 관계가 형성됨 → 이를 반영하여 HTML 요소를 객체화한 모든 노드 객체를 **트리 자료 구조**로 구성트리 자료구..

⭐️ 노션에서 보기웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됨 → 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능파싱 (parsing; 구문 분석 syntax analysis)프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해텍스트 문서의 문자열을 토큰으로 분해하고 (어휘 분석),토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 파스 트리(parse tree/syntax tree)를 생성하는 일련의 과정렌더링 (rendering)HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것브라우저의 렌더링 과정1. 브라우저는 HTML, CSS, 자바..

⭐️ 노션에서 보기SetSet 객체는 중복되지 않는 유일한 값들의 집합배열과 유사하지만, 다음과 같은 차이가 있음| 구분 | 배열 | Set 객체 || --- | --- | --- || 동일한 값을 **중복**하여 포함할 수 있다. | O | X || 요소 **순서**에 의미가 있다. | O | X || **인덱스**로 요소에 접근할 수 있다. | O | X |수학적 집합을 구현하기 위한 자료구조 → 교집합, 합집합, 차집합, 여집합 등 구현 가능Set 객체의 생성Set 생성자 함수로 생성인수를 전달하지 않으면 빈 Set 객체가 생성 const set = new Set(); console.log(set); // Set(0) {}인터러블을 인수로 전달 * 중복된 값은 저장되지 않음 const set..

⭐️ 노션에서 보기디스트럭처링 할당(ES6 도입): 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당필요한 값만 추출하여 변수에 할당할 때 유용배열 디스트럭처링 할당ES5 // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3ES6 const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // 이때 할당 기준은 배열의 인덱스다. const [one, ..