자바스크립트의 비동기

• 초기 웹 환경: 서버에서 모든 데이터를 로드하여 페이지 빌드함, 자바스크립트에서는 별도의 비동기 처리가 필요하지 않았다.
• AJAX(Asynchronous JavaScript and XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 되었다.
• XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 된다.

자바스크립트의 비동기

• 자바스크립트는 single-threaded language이므로, 만일 서버 요청을 기다려야 한다면 유저는 멈춰있는 브라우저를 보게 된다.
• 따라서 동기가 아닌 비동기 처리를 이용해 서버로 통신할 필요가 있다.
• 비동기 요청 후, main thread는 유저의 입력을 받거나, 페이지를 그리는 등의 작업을 처리.
• 비동기 응답을 받으면, 응답을 처리하는 callback 함수를 task queue에 넣는다.
• event loop는 main thread에 여유가 있을 때 task queue에서 함수를 꺼내 실행한다.

동기 vs 비동기

• 동기(synchronous)코드는, 해당 코드 블록을 실행할 때에 thread의 제어권을 넘기지 않고 순서대로 실행하는 것을 의미한다.

동기 코드의 예

console.log('This is synchronous...');
for(let i = 0; i < 1000000000; ++i){
	console.log('I am blocking the main thread...');
}
console.log('This is synchronous... Done!');

비동기(asynchronous)코드는, 코드의 순서와 다르게 실행된다.

• 비동기 처리 코드를 감싼 블록은 task queue에 넣어진다.
• main thread가 동기 코드를 실행한 후, 제어권이 돌아왔을 때 event loop가 task queue에 넣어진 비동기 코드를 실행한다.

비동기 코드의 예

setTimeout(()=> console.log('This is asynchronous...'), 5000);
console.log('This is synchronous...');
for (let i = 0; i<1000000000; ++i) {
	console.log('I am blocking the main thread...');
}

setTimeout 함수는 비동기 코드, for문 작업을 하는 메인 thread가 작업을 종료하지 않았기 때문에, 설정한 시간보다 더 걸린다.
reliable하지 않은 setTimeout 코드.

비동기 처리를 위한 내부 구조

• 브라우저에서 실행되는 자바스크립트 코드는 event driven 시스템으로 작동한다. (모듈에 요청이 오면 task queue에 callback 함수를 넣는다 그리고 이벤트 발생 시 task queue에서 실행한다.)
• 웹앱을 로드하면 브라우저는 HTML document를 읽어 문서에 있는 CSS code, JS code를 불러온다.
• 자바스크립트 엔진은 코드를 읽어 실행된다.

자바스크립트가 동작하는 내부 구조

• 브라우저의 main thread는 자바스크립트 코드에서 동기적으로 처리되어야 할 코드 실행 외, 웹 페이지를 실시간으로 렌더링하고, 유저의 입력을 감지하고 네트워크 통신을 처리하는 등 수많은 일을 처리해야하낟.

• 비동기 작업을 할당하면, 비동기 처리가 끝나고 브라우저는 task queue에 실행 코드를 넣는다.

• main thread는 event loop를 돌려 task queue에 작업이 있는 지 체크

• 작업이 있으면 task를 실행한다.

다른 비동기의 예

// task queue에 callback 함수가 넘겨지는 것은 비동기 처리
request('user-data', (userData)=> {
	console.log('userData 로드');
    saveUsers(userData);
});
// 동 변경 동기 처리
console.log('DOM 변경');
console.log('유저 입력');

request함수를 호출해서 비동기 처리를 등록하고, console.log를 실행

Promise

Callback Pattern vs Promise

Callback Pattern

• 비동기 처리 후 실행 될 코드를 Callback function으로 보내는 것이다. (e.g. setTimeout). callback 함수 만으로 비동기 처리를 다른 비동기 처리를 이어서 하는 것이다.
• 비동기 처리가 고도화되며, Callback hell등의 단점이 부각되었다.
  (Callback hell: callback 함수 내에 또 다른 callback 함수가 존재하여, 계속해서 네스팅되는 것)

Promise

• Promise를 활용하여 비동기 처리의 순서 조작, 에러 핸들링, 여러 비동기 요청 처리 등을 쉽게 처리할 수 있게 된다.
  (Nesting 된 것을 풀어서 하나의 깊이로 비동기 처리를 할 수 있게 하는 객체)

Callback pattern vs Promise 예시 비교

Callback pattern - Single request : fetchUserAddresss

function fetchUsers(onSuccess){
	request('/users', onSuccess);
  // 하나의 request의 경우, onSuccess에 해당하는 callback을 넘김
  // 간단하다.
}

Promise - Single request : fetchUserAddress

function fetchUsers(onSuccess){
	return request('/users').then(onSuccess);
  // request함수가 Promise를 반환. Promise.then();으로 받은
  // onSuccess callback을 넘긴다.
  // 혹은 
  	return request('/users');
}

Promise - Error handling

function fetchUsers(onSuccess, onError){
  	return request('/users')
  		   .then(onSuccess)
  		   .then(onError);
  //혹은
  	return request('/users').then(onSuccess, onError);
}

Callback pattern - Multiple request

function fetchUserAddress(onSuccess){
	request('/users', (userData) => {
    const userDataWithAddress = [];
    const userLength = userData.length;

    userData.map(user=> request(`/users/${user.userId}/address`, (address)=>{
   	userDataWithAddress.push({...user, address});	
   	if(userDataWithAddress.length === userLength) {
    	 onSuccess(userDataWithAddress);		
    		}
   	})
    })
}
//유저의 개수만큼 비동기 처리를 한다.

Promise - Multiple request

function fethchUserAddress(){
  	// request로 비동기 요청을 하여 유저목록을 받아온다.
  	// then메서드로 데이터를 받아 처리
	return request('/users').then((userData)=>{
      	//user 데이터를 map메서드로 유저와 address 정보를 합쳐
      	// 새로운 배열 생성함. 결국 user adress를 합친 배열을 반환
      	Promise.all(
        	userData.map((user)=>
            	request(`/users/{user.userId}/address`).then((addresss)=>({
              ...user,
              address,
            })
           )
        );
    })
}

Promise

Promise의 정의: Promise 객체는, 객체가 생성 당시에는 알려지지 않은 데이터에 대한 Proxy이다.
[request('/user') 시에는 '/user'가 어떤 데이터인지 알려져 있지 않는 상태.
.then(userData=>{...})로 명시 후 어떠한 작업을 한다.]

• 비동기 실해이 완료된 후에, '.then()', '.catch()', '.finally()' 등의 핸들러를 붙여 각각의 데이터 처리 로직, 에러 처리 로직, 클린업 로직을 실행한다.
• then() 체인을 붙여, 비동기 실행을 마치 동기 실행처럼 동작하도록 한다.

Promise 예제

function returnPromise() {
  	// Promise 객체를 반환하는데, 생성자는 resolve, reject 함수 인자를 가진다.
	return new Promise((resolve, reject)=>{
    	setTimeout(()=>{
          	// Promise 인자 callback 함수를 가지고 비동기 처리
        	const randomNumber = generateRandomNumber(100);
          	if (randomNumber < 50) resolve(randomNumber);
          	else reject(new Error('Random number is too small.'));
        }, 1000);
    });
}

retrunPromise()
	// 정상적인 데이터를 받아 처리
	.then(num => {
	console.log('First random number : ',num);
})	

	//에러를 받아 처리
	.catch(error=>{
	console.error('Error occured: ', error);
})
	// 위의 코드가 처리가 되었을 때 마지막으로 호출하기 때문에,
	// 인자를 받을 수 없고, 클린 업하게 동작한다.
	.finally(()=>{
	console.log('Promise returned');
});

Promise 객체의 상태

Promise 객체는 pending, fulfilled, rejected의 3개의 상태를 가진다.

• fulfilled, rejected 두 상태를 settled라고 지칭한다.

• pending은 비동기 실행이 끝나기를 기다리는 상태를 지칭.

• fulfilled는 비동기 실행이 성공한 상태.

• rejected는 비동기 실행이 실패한 상태.

• then, catch는 비동기(Promise), 동기(sync) 실행 중 어떤 것이라도 리턴할 수 있다.

Multiple Promise handling

• Promise.all()은 모든 Promise가 fulfilled 되길 기다린다.
  하나라도 에러 발생 시 , 모든 Promise 요청이 중단된다.
• Promise.allSettled()는 모든 Promise가 settled 되길 기다린다.
• Prmise.race()는 넘겨진 Promise들 중 하나라도 settled 되기를 기다린다.
• Promise.any() 넘겨진 Promise 중 하나라도 fulfilled 되길 기다린다.

Promise.all

Promise.all(
  	// 각 user의 user.name을 기반으로 detail 정보를 얻어온다.
  	// [Promise, Promise, Promise]
	users.map(user => request('/users/detail', user.name))
  	// 각 Promise가 resolve한 데이터들을 하나로 모은 배열
  	.then(console.log)
	.catch(e => console.error('하나라도 실패했습니다.'));
);

Promise.allSettled

function saveLogRetry(logs, retryNum){
	if(retryNum >= 3) return; // no more retry
  Promise.allSettled(logs.map(saveLog))
  	.then((result)=>{
  		return results.filter((result)=>result.status === 'rejected');
  		})
    	.then((failedPromises)=>{
        	saveLogRetry(
            	failedPromises.map((promise) => promise.reason.filedLog),
              	retryNum + 1
            );
  })
}

Promise.race

function requestWithTimeout(request, timeout = 1000) {
	return Promise.race([request, wait(timeout)]).then((data)=>{
    	console.log('요청 성공.');
      	return data;
    });
}
requestWithTimeout(req)
	.then(data => console.log('data : ', data))
	.catch(()=> console.log('타임아웃 에러!'));

Promise.any: 어떤 Promise의 배열을 받아 어떤 것이라도 가장 먼저 fulfilled된 Promise의 결과를 then()으로 넘긴다.

function getAnyData(dataList) {
	Promise.any(dataList.map((data) => request(data.url)))
  		.then((data) => {
    		console.log('가장 첫 번째로 가져온 데이터 : ', data);
    	})
  		.catch((e) => {
    		console.log('아무것도 가져오지 못했습니다.');
    	});
}

Promise chaining, nested promise

• Promise 객체는, settled 되더라도 계속 핸들러를 붙일 수 있다.
• 핸들러를 붙인 순서대로 호출된다.
• catch 뒤에 계속 핸들러가 붙어있다면, 에러를 처리한 후에 계속 진행된다. 이때는 catch에서 리턴한 값이 then으로 전달된다

Promise.any

Promise.resolve()
	.then(()=> wait2(5000).then(()=> console.log('500 waited.')))
	.then(()=> console.log('After 500 wait.')
    return wait2(1000).then(()=> console.log('100 waited.'))
})
.then(()=> console.log('DONE'));
/* 
500 waited.
After 500 wait.
1000 waited.
DONE.
*/

async/await

• Promise 체인을 구축하지 않고도, Promise를 직관적으로 사용할 수 있는 문법.
• 많은 프로그래밍 언어에 있는 try...catch 문으로 에러를 직관적으로 처리.
• async function을 만들고, Promise를 기다려야 하는 표현 앞에 await을 붙인다.

---

Async/await vs Promise 비교

async/await: Promise로 작성하는 것 보다 직관적

async function fetchUser(){
	try{
    	const users = await request('/user');
        console.log('users fetched.');
      	return users
    } catch (e) {
    	console.log('error : ', e);
    }
}

Promise

function fetchUsers() {
	return request('/users')
  		.then(users=>console.log('users fetched.'))
  		.catch(e=> console.error('error: ' e));
}

여러 개의 await

• 여러 개의 await을 순서대로 나열하여, then chain을 구현할 수 있다.
• try ... catch 문을 자유롭게 활용하여 에러 처리를 적용한다.

async function fetchUserWithAddress(id){
	try{
    	const user = await request(`/user/${id}`);
        const address = await request(`/user/${user.id}/address`);
    } catch (e) {
    	console.log('error : ', e);
    }
}

async function fetchUserWithAddress(id){
	let user = null;
  	try {
    	user = await request(`/user/${user.id}`)
    } catch(e) {
    	console.log('user fetch error: ', e);
      	return
    }
  	try {
    	const address = await request(`/user/${user.id}/address`)
        return {...user, address}
    } catch (e){
    	console.log('Address fetch error: ', e);
    }
}

• 중간에 새로운 에러를 던지는 경우: 커스텀 에러를 직접 던져, 마지막 catch 문을 실행할 수 있다. Promise로 처리하기 까다로운 부분 해결.

async function fetchUserWithAddress(id) {
	try {
    	const user = await request(`/user/${user.id}`)
        if(!user) throw new Error('No user found');
        
        const address = await request(`/user/${user.id}/address`);
        if(!address.userId !== user.id) throw new Error('No address match with user.');
        
        return {...user, address}
        } catch (e) {
        	console.log('User fetch error: ', e);
        }
    }
}

try 구문 안에서 user와 address를 순차적으로 가져와, 한꺼번에 반환
try...catch 문 안에 또 try...catch 문을 넣어 nesting 된 구조를 가지고 있다.

async function fetchUserWithAddress(id){
	try {
    	const user = await request(`/user/${user.id}`);
      	const address = await request(`/user/${user.id}/address`);
      	return {...user, address} 
    } catch (e) {
    	try {
        	sendErrorLog(e)
        } catch (e) {
        	 console.error('에러를 로깅하는데 실패하였습니다.');
        }
    }
}

async/await - Promise와의 조합

• Promise.all은, 특정 비동기 작업이 상대적으로 빠르게 끝나도, 느린 처리를 끝까지 기다려야만 한다.
• 이와 달리, async/await을 활용할 경우 parallelism을 구현할 수 있다. 이는 끝난 대로 먼저 처리하는 것이다.

async function fetchUserWithAddress(id){
	return await Promise.all([
      	// user와 address를 동시에 호출한 상황
    	(async () => await request(`/users/${user.id}`))(),
     	(async () => await request(`/users/${user.id}/address`))(),
    ]);
}

fetchUserWithAddress('1234')
	//user와 address를 동시에 받는 처리를 할 수 있다.
	.then(([user, address]) => ({...user, address}))
	.catch(e => console.log('Error: ', e));

POSTMAN, Open API CORS

아래는 서버와 통신하기 위한 여러가지 도구들이다.

POSTMAN

• 서버와의 통신을 위해 API를 활용하는 경우, React 앱으로만 요청하여 API가 잘 동작하는지 알아보는 방법은 비효율적이다.
• 수많은 API의 endpoint와 실행 조건들을 관리하는 것은 힘드므로,
• 테스트를 위한 개발도구인 POSTMAN을 활용하여 API를 테스트한다.

장점

Auth, header, payload, query등 API 요청에 필요한 데이터를 쉽게 세팅할 수 있다.
다른 개발자가 쉽게 셋업해 테스트할 수 있도록 API 정보를 공유할 수 있다.
Request를 모아 Collection으로 만들어, API를 종류별로 관리한다.
환경 변수를 정의하여, 환경별로 테스트가 가능하다.

Open API

• RESTful API를 하나의 문서로 정의하기 위한 문서 표준.
• OpenAPI Specification(OAS)으로 정의됨.
• Swagger 등의 툴로, OpenAPI로 작성된 문서를 Parsing 해 테스팅 도구로 만들 수 있다.
• 프론트엔드 개발자, 백엔드 개발자와의 협업 시 주요한 도구로 사용한다.

API의 method, endpoint를 정의한다.
endpoint마다 인증 방식, content type 등을 정의한다.
body data, query string, path variable등을 정의한다.
요청, 응답 데이터 형식과 타입을 정의, data model을 활용한다(schema).

CORS

• Cross-Origin Resource Sharing
• 브라우저는 모든 요청 시 Origin 헤더를 포함한다.
• 서버는 Origin 헤더를 보고, 해당 요청이 원하는 도메인에서부터 출발한 것인지를 판단한다.
• 다른 Origin에서 온 요청은 서버에서 기본적으로 거부한다.

그러나, 보통 서버의 endpoint와 홈페이지 domain은 다른 경우가 많다.따라서 서버에서는 홈페이지 domain을 허용해서 다른 domain이라 하더라도 요청을 보낼 수 있게 한다.
서버는 Access-Control-Allow-Origin 외에 Accsess-Control-을 포함하는 헤더에 CORS 관련 정보를 클라이언트로 보낸다.

same-origin policy

웹사이트에 악성 script가 로드되어, 수상한 요청을 하는 것을 막기 위함이다.
반대로, 익명 유저로부터의 DDos공격 등을 막기 위함.
서버에 직접 CORS 설정을 할 수 없다면, Proxy 서버 등을 만들어 해결한다.

한 줄평: 이거시 뭐시다냥.. 일단은 미래의 나를 위하여 정리해본다.