[모던 자바스크립트 Deep Dive] 45장. 프로미스

1. 비동기 처리를 위한 콜백 패턴의 단점 1) 콜백 헬 - 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없다. 따라서 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한다. 이때 비동기 함수를 범용적으로 사용하기 위해 비동기 함수에 비동기 처리 결과에 대한 후속 처리를 수행하는 콜백 함수를 전달하는 것이 일반적이다. 필요에 따라 비동기 처리가 성공하면 호출될 콜백 함수와 비동기 처리가 실패하면 호출될 콜백 함수를 전달할 수 있다. - 콜백 함수를 통해 비동기 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 비동기 처리 결과를 가지고 또 다시 비동기 함수를 호출해야 한다면 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상이 ..

2023.03.21

[모던 자바스크립트 Deep Dive] 44장. REST API

REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를기반으로 서비스 API를 구현한 것을 의미한다. 1. REST API 의 구성 REST API 는 아래의 요소로 구성된다. 구성요소 내용 표현 방법 자원(Resource) 자원 URI(엔드포인트) 행위(Verb) 자원에 대한 행위 HTTP 요청 메서드 표현(Representations) 자원에 대한 행위의 구체적인 내용 페이로드 2. REST API 설계 원칙 REST에서 가장 중요한 기본 원칙은 두 가지다. 1) URI는 리소스를 표현해야 한다. - URI는 리소스를 표현하는데 중점을 두어야 한다. 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다. 따라서 이름에 get 같..

2023.03.20

[모던 자바스크립트 Deep Dive] 42장. 비동기 프로그래밍

1. 동기 처리와 비동기 처리 - 함수의 실행 순서는 실행 컨텍스트 스택으로 관리. - 자바스크립트 엔진은 단 하나의 실행 컨텍스트를 가지고, 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. - 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking, 작업중단)이 발생한다. function sleep(func, delay){ const delayUntil = Date.now() + delay; while(Date.now() < delayUntil); func(); } function foo(){ console.log('foo'); } function bar(){ console.log('bar'); }..

2023.03.20

[모던 자바스크립트 Deep Dive] 38장. 브라우저의 렌더링 과정

* 파싱(Parsing) - 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석) 하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 피스 트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 후에는 피스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. * 렌더링(Rendering) - HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. * 브라우더의 렌더링 과정 - 1 : HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. - 2 : 브라우저의 렌더링 엔진은 서버로부터 응답된..

2023.03.16

[모던 자바스크립트 Deep Dive] 22장. this

1. this 키워드 - this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. - this 는 자바스크립트 엔진에 의해 암묵적으로 생성. 코드 어디서든 참조 가능. - this 가 가리키는 값, this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. // this 는 어디서든지 참조 가능하다. console.log(this); // window function square(number) { console.log(this); // window return number * number; }; square(2); const person = { name : 'Lee', ..

2023.03.14