💡 DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 01. 노드 1. HTML 요소와 노드 객체 HTML 요소(element)는 HTML 문서를 구성하는 개별적인 요소이며 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 Node 객체로 변환된다. HTML 문서는 HTML 요소들의 집합으로 이뤄지며, 요소와의 중첩 관계에 의해 계층적인 parent-child(부자) 관계가 형성된다. HTML 요소 간의 관계를 반영하여 HTML 요소를 개체화한 모든 노드 객체들을 트리 자료구조로 구성한다. 💡 노드 객체들로 구성된 트리 자료구조를 DOM 또는 DOM Tree 라고 한다. 2. ..
💡 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이다. 💡 REST API는 REST를 기반으로 서비스 API를 구현한 것이다. 01. REST API의 구성 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 02. REST API 설계 원칙 1. URI는 리소스를 표현해야 한다. 🔹 URI는 리소스를 표현하는 데 중점을 두어야 하고, 식별할 수 있는 이름은 동사보다 명사를 사용한다. # bad GET /getTodos/1 GET /todos/show/1 # good GET /todos/1 2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다. 🔹 HTTP ..
01. Ajax란? 🔹 Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. 🔹 Ajax는 브라우저에서 제공하는 Web API는 XMLHttpRequest 객체를 기반으로 동작한다. 💡 전동방식 vs. Ajax 1. 전통방식 🔹 화면이 전환되면 서버로부터 새로운 HTML 페이지를 전송받아 웹페이지 전체를 처음부터 다시 렌더링한다. ➡️ 단점 : 불필요한 데이터 통신이 발생하고, 변경이 필요없는 부분까지 다시 렌더링하므로 화면 전환 시 화면 깜빡임 현상이 발생한다. 또한, 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지..
01. 동기 처리와 비동기 처리 🔹 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 🔹 즉, 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. ➡️ 처리에 시간이 걸리는 태스크를 실행하는 경우, 블로킹(작업 중단)이 발생한다. 💡 동기 처리 : 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식 ➡️ 장점 : 실행 순서가 보장된다. ➡️ 단점 : 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹된다. 💡 비동기 처리 : 실행 중인 태스크가 종료되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식 ➡️ 장점 : 블로킹이 발생하지 않는다. ➡️ 단점 : 실행 순서가 보장되지 않는다. 🔹 타이머 함수인 setTimeout, setInterval,..
01. 호출 스케줄링 💡 호출 스케줄링 : 함수를 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하기 위해 타이머 함수를 사용하는 것이다. 🔹 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가져, 싱글 스레드로 동작하기 때문에, 타이머 함수는 비공기 처리방식으로 동작한다. (42장. 비동기 프로그래밍) 02. 타이머 함수 1) setTimeout / clearTimeout 🔹 setTimeoue 함수의 콜백함수는 두 번째 인수로 전달받은 시간 이후, 단 한 번 실행되도록 호출 스케줄링 된다 const timeoutID = setTimeout(func|code[, delay, param1, param2, ...]); 매개변수 설명 func 타이머가 만료된 뒤 호출될 콜백 함수 delay 타이머..
🔹 자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다. 🔹 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 💡 이 때, 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 파싱(해석)하고, 브라우저에 렌더링하는 과정을 거치게 된다. 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받음 2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성함 3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AT(..
01. Set 🔹Set 객체는 중복되지 않는 유일한 값들의 집합이다. 🔹 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X ➡️ 수학적 집합의 특성과 일치한다. ➡️ Set은 수학적 집합을 구현하기 위한 자료구조다. (교집합, 합집합, 차집합, 여집합 구현 가능) 1. Set 객체의 생성 💡 Set 객체는 Set 생성자 함수로 생성한다. 🔹 Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} 💡 Set 생성자 함수는 이터러블을 인수로 전달받아 Set ..
💡 디스트럭처링 할당(구조 분해 할당) 은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 🔹 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 01. 배열 디스트럭처링 할당 💡 ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여, 1개 이상의 변수에 할당 🔹 배열 디스트럭처링 할당의 대상은 이터러블이어야 하고, 할당 기준은 배열의 인덱스다. // ES5 var arr = [1, 2, 3] var one = arr[0] var two = arr[1] var three = arr[2] // ES6 const [one, two, three] = a..
💡 ES6에서 도입된 스프레드 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(spread) 개별적인 값들의 목록으로 만든다. 🔹 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments 와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다. 💡 스프레드 문법의 결과물은 값으로 사용할 수 X, 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능 🔹 함수 호출문의 인수 목록 🔹 배열 리터럴의 요소 목록 🔹 객체 리터럴의 프로퍼티 목록 01. 함수 호출문의 인수 목록에서 사용하는 경우 예제 35-06 에는 apply 메소드를 활용하여 Max 값을 구한 경우이고, 예제 35-07 에는 스프레드 문법을 사용하여 구한 경..
01. 이터레이션 프로토콜 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 1. 이터러블 🔹 Symbol.iterator을 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 객체를 말한다. 🔹 일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니다. 2. 이터레이터 🔹 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜..
