개발서적28 제너레이터와 async/await (모던 자바스크립트 Deep Dive) 46.1 제너레이터란? 코드 블록의 실행을 일시 중지했다가 재생할 수 있는 함수 특징 호출자에게 함수 실행의 제어권을 양도할 수 있다. 함수와 호출자와 양방향으로 함수의 상태를 주고 받을 수 있다. 함수 코드를 실행하는 것이 아니라 이터러블이면서 이터레이터인 제너레이터 객체를 반환한다. 46.2 제너레이터 함수의 정의 function* 키워드로 선언한다. yield 표현식을 포함한다. 화살표 함수로는 정의할 수 없다. 생성자 함수로 호출할 수 없다. 46.3 제너레이터 객체 제너레이터 함수가 반환한 제너레이터 객체는 이터러블이면서 이터레이터다. value, done , next() 를 소유한다. return , throw 도 가진다. function* genFunc() { try { yield 1; yi.. 2024. 4. 17. 프로미스 (모던 자바스크립트 Deep Dive) ES6에서 비동기 처리를 위한 새로운 패턴 프로미스 제시! 45.1 비동기 처리를 위한 콜백 패턴의 단점 콜백 헬 비동기 함수는 동기처리 되는 함수들이 모두 처리되고 나서 마지막에 처리되기 때문에 비동기로 동작하는 코드에서 나오는 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다. 동기 함수가 자바스크립트 엔진의 콜 스택에서 모두 처리되어야, 비동기 함수가 태스크 큐에서 꺼내어져 실행이 완료될 수 있다. 비동기 함수는 브라우저 또는 Nodejs에서 이벤트 루프와 태스크 큐에서 따로 관리되기 때문에 그렇다. 그러므로 비동기 함수 내부의 코드를 외부로 반환하거나 상위 스코프에서 할당하면 눈으로 보는 것처럼 동작하지 않을 수 있다. 위와 같은 문제로, 비동기 함수의 처리 결과.. 2024. 4. 17. Ajax (모던 자바스크립트 Deep Dive) 43.1 Ajax란? Asynchronous JavaScript an XML 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체 기반으로 동작한다. 전통적인 브라우저 동작 방식을 전환한 프로그래밍 방식이다. 비동기 방식을 이용해 변경이 필요한 부분만 한정적으로 렌더링한다. 비동기 방식이기 때문에 서버와의 통신에서 블로킹이 사라진다. 43.2 JSON JavaScript Object Notation 클라이언트와 서버간의 HTTP 통신을 위한 텍스트 포맷 자바스크립트만의 데이터 포맷은 아니다. 표기 방식 객체 리터럴과 유사한 키와 값으로 .. 2024. 4. 17. 비동기 프로그래밍 (모던 자바스크립트 Deep Dive) 42.1 동기 처리와 비동기 처리 자바스크립트 엔진은 하나의 실행 컨텍스트 스택을 갖는다. 동시에 2개 이상의 함수를 실행할 수 없다. 하나의 태스크만 실행할 수 있다 → 싱글 스레드 자바스크립트 엔진은 싱글 스레드 방식으로 동작한다. 처리 시간이 걸리는 태스크 실행시 블로킹(작업 중단)이 발생한다. 실행 중인 태스크가 종료할 때까지 다음에 실행도리 태스크가 대기하는 방식을 동기 처리 라고 한다. 순서가 보장되지만 블로킹되는 단점 태스크를 블로킹하지 않고, 곧바로 다음 태스크를 실행하는 방식을 비동기 처리라고 한다. 블로킹은 되지 않지만 순서가 보장되지 않는다. 흔하게 콜백 패턴이 사용된다. 가독성 저하와, 콜백 헬, 예외 처리 어려움 등의 단점이 있다. setTimeout, setInterval, HT.. 2024. 4. 17. 브라우저의 렌더링 과정 (모던 자바스크립트 Deep Dive) 파싱(parsing) 다음과 같은 일련의 과정을 일컫는다. 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽는다. 프로그램을 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해한다. 토큰에 문법적 의미와 구조를 반영한다. 트리 구조의 자료구조인 파스 트리를 생성한다. 파싱이 완료되면 파스 트리를 기반으로 중간 언어인 byte code를 생성하고 실행한다. 렌더링(rendering) HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 렌더링 과정 브라우저는 렌더링에 필요한 리소스를 서버에게 요청하고 응답받는다. 응답 온 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 결합하여 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 응답 온 자바스크립트를 파싱하.. 2024. 4. 17. 배열 (모던 자바스크립트 Deep Dive) 27.1 배열이란? 여러 개의 값을 순차적으로 나열한 자료구조 const array = ['apple', 'banana', 'orange']; 배열이 가지는 값을 요소 라고 한다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 원시값, 객체, 함수, 배열 등 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스 를 가진다. 요소에 접근할 때 사용된다. 요소 접근은 대괄호 표기법을 사용한다. array[0] → ‘apple’ 배열은 자신의 길이를 나타내는 length 프로퍼티를 가지고 있다. 순회가 가능하다. 배열은 객체 타입이다. 배열과 객체의 차이는 값의 순서와 length 프로퍼티이다. 27.2 자바스크립트의 배열은 배열이 아니다. 자료구조에서 말하는 배열은 메모리 공간이 빈틈없이 연속적으로.. 2024. 4. 17. 이전 1 2 3 4 5 다음 728x90 반응형
