2022/08/31 - TIL

41장 타이머

41.1 호출 스케줄링

호출 스케줄링은 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하는 것을 말한다. 타이머를 생성할 수 있는 타이머 함수는 setTimeout, setInterval 두개가 있다. 타이머를 제거하는 함수는 clearTimeout과 clearInterval이 있다.

단발성 : setTimeout

다회성 : setInterval

자바스크립트엔진은 하나의 실행 컨텍스트 스택을 가지기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다. 따라서 이러한 이유로 타이머 함수는 비동기 처리 방식으로 동작한다

41.2 타이머 함수

setTimeout((name, ...args )=> console.log(name, args), 1000, name, args)

41.3 디바운스와 스로틀

scroll, resize, input mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다

이런 이벤트들은 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다.

과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.

디바운스와 스로틀의 구현에는 타이머 함수가 이용된다. 스로틀을 통해 타이머 함수의 활용에 대해 살펴보자.

41.3.1 디바운스

짧은 시간 간격으로 이벤트가 연속해서 발생하면, 마지막에 한번만 이벤트 핸들러가 호출되도록 한다.

const debounce = (callback, delay) => {
	let timerId ;
	return event => {
		if (timeId) clearTimeout(timerId);
		timerId = setTimeout(callback, delay, event)
	}
}

41.3.2 스로틀

짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다

const throttle = (callback, delay) =>{
	let tiemeId;
	return event =>{
	timeId = setTimeout(()=>{
		callback(evvent);
		timeId - null
	}, delay, event)
	}
}

scroll 이벤트 처리나 무한 스크롤 ui등을 만들때 스로틀을 사용한다.

42장 비동기 프로그래밍

한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에, 처리에 시간이 걸리는데 태스크를 실행하는 경우 블로킹이 발생한다.

42.1 동기 처리와 비동기 처리

테스크가 종료할 때까지 태스크가 대기하는 방식을 동기라고하며, 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다.

비동기 함수는 setTimeout과 setInterval, HTTP 요청, d이벤트 핸들러는 비동기 처리 방식으로 동작한다.

42.2 이벤트 루프와 태스크 큐

자바스크립트는 싱글 스레드 방식이며, 이는 한 번에 하나의 태스크만 처리할 수 있는 것을 의미한다. 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프다. 이벤트루프는 브라우저에 내장되어 있는 기능중 하나이다.

콜 스택 : 실행 컨텍스트에서 살펴본 바와 같이 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택이 바로 콜스택이다. 최상위 실행 컨텍스트가 종료되어콜 스텍에서 제거되기 전가지는 다른 어떤 태스크도 실행되지 않는다.

힙 : 메모리 공간의 크기를 런타임에 결정해야한다. 따라서 객체가 저장되는 메모리 공간인 힙은 구조화 되어 있지 않다는 특징이 있다.

소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Node.js가 담당한다. 이를 위해 브라우저 환경은 태스크 큐와 이벤트 루프를 제공한다.

태스크 큐 : setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되느 ㄴ영역이다. 트스크 큐와는 별도로 프로미스의 후속 프뢰스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 마이크로태스크 큐도 존재한다.

이벤트 루프는 콜스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기중인 함수를 콜스택으로 이동시킨다. 이때 콜 스택으로 이동한 함수는 실행된다. 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식을 동작한다.

자바스크립트는 싱글 스레드 방식으로 동작한다. 이때 싱글 스레드 방식으로 동작하는 것은 브라우저가 아니라, 브라우저에 내장된 자바스크립트 엔진이라는 것에 주의하기 바란다. 자바스크립트엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다

43장 Ajax

43.1 Ajax란?

브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. AJax는 브라우저에게 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다.

전통적인 방식

바꿀 필요가 없는 부분까지 완전한 HTMl을 서버로부터 다시 전송받는다.
변경할 필요가 없는 부분부터 다시 렌더링한다
클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을때까지, 
다음 처리는 블로킹된다.

Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했다. 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 렌더링을 안하고 한정적으로 렌더링하는 방식으로 가능해졌다.

개선 사항 ⇒ 불필요한 데이터 통신이 발생하지 않는다. 깜박이는 현상이 발생하지 않는다. 비동기방식으로 작동하기 때문에 블로킹이 발생하지 않는다.

43.2 JSON

HTTP 통신을 위한 텍스트 데이터 포맷이다. 자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷이다.

43.2.1 JSON 표기방식

JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수 텍스트다. JSON은 반드시 큰따옴표로 묶어야 한다.

43.2.2 JSON.stringify

객체 ⇒JSON 포맷의 문자열

43.2.3 JSON.parse

JSON 문자열⇒ 객체화

43.3 XMLHttpRequest

브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 가능을 기본 제공한다. 자바스크립트를 이용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다. Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다.

43.3.1 XMLHttpRequest 객체 생성

const xhr = new XMLHttpRequest();

43.3.3 HTTP 요청 전송

HTTP 요청을 전송하는 경우 다음 순서를 따른다.

1. XMLHttpRquest.prototype.open 메서드로 HTTP 요청을 초기화한다
2. XMLHttpRquest.prototype.setRquestHeader 메서드로 특정 HTTP 요청의 헤더 값을 설정한다
3. XMLHttRequest.prototype.send 메서드로 HTTP 요청을 전송한다.

HTTP 요청 메서드는 클라이언트가 서버에게 요층의 종류와 목적을 알리는 방법으로 주로 5가지 메서드를 사용하여 CRUD를 구현한다

get index/retrieve 모든/특정 리소스 취득 페이로드X

post	create	리소스 생성	페이로드O
put	replace	리소스의 전체 교체	페이로드O
patch	modify	리소스의 일부 수정	페이로드O
delete	delete	모든 특정 리소스 삭제	페이로드X

페이로드가 객체인 경우는 반드시 JSON.stringify 메서드르 ㄹ사용하여 직렬화 한 다음에 전달해야한다

44장 REST API

http의 장점을 최대한 활용할 수 있는 아키택처이다. HTTP를 기반으로 클라이언트가 서버에 리소스에 접근하는 방식을 규정한 아키택처이다.

44.1 REST API의 구성

1. 자원 : URI
2. 행위 : HTTP 요청 메서드
3. 표현 : 자원에 대한 행위의 구체적인 내용 / 페이로드

44.2 REST API 설계 원칙

REST에서 가장 중요한 원칙 두가지는 URI는 리소스를 표현하는데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해서 한다.

1. URI는 리소스를 표현해야 한다
예시 : GET /getTOdos/1 bad
예시 : GET/todos/1 good
2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.
GET, POST, PUT, PATCH, DELETE