1. 자바스크립트 제어 흐름

• 자바스크립트는 다른 멀티스레드 프로그래밍 언어(JAVA, C++등)와 다른 방식으로 비동기 동작을 처리한다.
• 처음 자바스크립트를 접하는 경우, 동작에 대한 정확한 이해가 없으면 코드의 흐름을 따라가기 어렵다.
• 자바스크립트 내부의 비동기 동작을 이해하기 위해서는 이벤트 루프 등의 개념을 알아야만 한다.

• 자바스크립트 엔진은 하나의 메인 스레드로 구성된다.
• 메인 스레드는 코드를 읽어 한 줄씩 실행한다.
• 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다.

[ 두가지 언어의 비동기 처리 방식의 예시 ]

자바 스크립트는 setTimeout을 처리할 때 setTimeout이라는 비동기 API가 작동해 함수를 특정 큐(JS엔진이 아닌 별도의 환경)에 저장하고, 자바스크립트의 메인 스레드는 task queue를 확인하며 함수를 가져와 실행 = 즉 하나의 메인 스레드로 비동기 처리 가능!
반면 자바의 경우, setTimeout을 만나면 새로운 스레드를 생성하고(멀티 스레드) 타이머가 지날때까지 그 스레드는 동작하지 않고 기다린다

(1) 동기적 제어 흐름

• 동기적 제어 흐름은 현재 실행중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다.
• 분기문, 반복문, 함수 호출 등이 동기적으로 실행된다.
• 코드의 흐름과 실제 제어 흐름이 동일하다.
• 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다.

// 동기적 코드에는 어떤 것들이 있을지!

// 선언문
let a = 10

// 동기적 실행
console.log("a : ", a)

// 반복문
function foo(num) {
  for (let i = 0; i < 10; ++i) {
    console.log(num)
  }
} 

// 함수 호출
foo(num)

//등이 있다!

동기식 제어의 단점: 사용자가 여러명이라면 매우 비효율적, 사용자의 요청을 실시간으로 처리 불가능

(2) 비동기적 제어 흐름

• 비동기적 제어 흐름은 현재 실행중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것을 의미한다.
• 프로미스, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행된다.
• 코드 흐름과 실제 제어 흐름이 다르다.
• 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다.

let a = 10

setTimeout(function callback() { 
  	console.log('a : ', a)
}, 3000) 

console.log('Finished')

//Finished
//a: 10

2. 이벤트 루프

자바스크립트의 비동기

• 자바스크립트 엔진은 비동기 처리를 제공하지 않는다.
• 대신, 비동기 코드는 정해진 '함수'를 제공하여 활용할 수 있다.
• 이 함수들을 API(Application Programming Interface)라 한다.
• 비동기 API의 예시로, setTimeout, XMLHttpRequest, fetch 등의 Web API가 있다.
• node.js의 경우 파일 처리 API, 암호화 API 등을 제공한다.

// 타이머 비동기 처리
setTimeout(() => console.log('타이머끝'), 1000) 
setInterval(() => console.log('인터벌타이머'), 1000)

// 네트워크 처리
fetch('https://google.com')
	.then(() => console.log('네트워크요청성공.')) 
  	.catch(() => console.log('네트워크요청실패.'))

비동기 처리 모델

=> 메인 스레드가 콜스택을 읽고 코드를 실행함, 콜스택은 아래부터 차례로 실행 컨텍스트가 쌓이게 된다, 예를들어 setTimeout은 WEB API에 등록되었을 때 몇 초 뒤 종료되면 task queue로 들어가도록 설정 되어있다.

• 비동기 코드를 처리하는 모듈은 자바스크립트 엔진 외부에 있다.
• 이벤트 루프(event loop), 태스크 큐(task queue), 잡 큐(job queue) 등으로 구성된다.
• API모듈은 비동기 요청을 처리 후 태스크큐에 콜백함수를 넣는다.
• 모든 코드가 실행 된 후 콜 스택이 비어있으면 자바스크립트 엔진(API 모듈 등도 마찬가지)은 이벤트 루프를 통해 태스크 큐의 콜백 함수를 콜스택에 넣고 실행한다.

비동기 처리 예시

request("user-data", (userData) => { 
  	console.log("userData 로드") 
  	saveUsers(userData)
});

console.log("DOM 변경") 
console.log("유저 입력")

request는 비동기적으로 동작해서 비동기 처리가 끝났을 때, userData라는 콜백함수 task queue에 넣어주는 역할을 한다.

3. Promise

Promise API

• Promise API는 비동기 API 중 하나이다.
• 태스크 큐가 아닌 잡 큐(Job queue, 혹은 microtask queue)를 사용한다.
• 잡 큐는 태스크 큐보다 우선순위가 높다.

setTimeout(() => { 
  console.log("타임아웃 1");
}, 0);

Promise.resolve().then(() => console.log("프로미스1"));

setTimeout(() => { 
  console.log("타임아웃 2");
}, 0);

Promise.resolve().then(() => console.log("프로미스2"));

//프로미스1 프로미스2 
//타임아웃1 타임아웃2

//프로미스의 처리가 더 빠른것을 알 수 있다

Promise

• 비동기 작업을 표현하는 자바스크립트 객체.
• 비동기 작업의 진행, 성공, 실패 상태를 표현한다.
• 비동기 처리의 순서를 표현할 수 있다.

new Promise(callback)을 사용하거나 fetch()같은 promise를 반환하는 비동기 API를 사용할 수 있다!

promise의 상태

pending(진행) 상태 -> settled (성공=resolved,fulfilled 혹은 실패=rejected) 상태

Promise 생성자

• new Promise(callback)
• callback 함수는 (resolve, reject) 두 인자를 받는다.
• Promise가 성공했을 때 resolve를 호출한다.
• Promise가 실패했을 때 reject를 호출한다.

let promise = new Promise((resolve, reject) => {
	if (Math.random() < 0.5) { 
    	return reject("실패") //0.5보다 작으면 '실패'반환
	}
	resolve(10) //성공 시 10을 반환
 })

Promise 메서드

• then() 메서드에 성공했을 때 실행할 콜백 함수를 인자로 넘긴다.
• catch() 메서드에 실패했을 때 실행할 콜백 함수를 인자로 넘긴다.
• finally() 메서드는 성공/실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘긴다.
• then(callback1, callback2)로 callback1의 자리에 성공시 콜백, callback2의 자리에 실패시 콜백을 인자로 넘길 수 있다.
(catch없이! 예를들면 .then(function onSuccess(){...},function onFailure(){...})

promise
  .then(data => {
	 console.log("성공:", data) 
  })
  .catch(e => { 
  	 console.log("실패:", e)
  })
  .finally(() => {
	 console.log("promise 종료") 
  })

Promise 메서드 체인

• then/catch 메서드가 또 다른 promise를 리턴하여, 비동기 코드에 순서를 부여한다.
• 이렇게 동일한 객체에 메서드를 연결할 수 있는 것을 체이닝(chaining) 이라 한다.
• 함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴(return this를 생략한 상태)하도록 하여 구현한다.

promise
  .then(data => {
	 return fetchUser(data) }) //프로미스를 리턴하는 함수를 반환
	 //그 다음 then이 호출되기 전에 promise가 끝날때까지 기다리게 된다 =비동기 코드에 순서 부여
  .then(user => {
    console.log('User : ', user)
  })
  .catch(e => {
	console.log("실패:", e) 
  })

Promise.resolve, Promise.reject

프로미스는 정적인 메서드가 존재한다
new Promise가 아니라 Promise라는 클래스 명에 바로 사용할 수 있는 정적 함수

• Promise.resolve 함수는 성공한 Promise를 바로 반환한다.
• Promise.reject 함수는 실패한 Promise를 바로 반환한다.
• 인위적으로 Promise 메서드 체인을 만들 수 있다. promise를 리턴하는 함수를 만들어서 함수를 호출할 필요없이 바로 성공,실패 프로미스를 호출할 수 있는 것!
• 비동기 코드로 진행해야 하는 상황 등에 유용하게 사용할 수 있다.

Promise
	.resolve(10) 
  	.then(console.log)

Promise 
   .reject("Error") 
   .catch(console.log)

Promise.all

이 또한 정적인 메서드 : 모두 성공하거나 하나라도 실패할때까지 기다린다
• Promise.all은 Promise의 배열을 받아 모두 성공 시 각 Promise의 resolved 값을 배열로 반환한다.
• 하나의 Promise라도 실패할 시, 가정 먼저 실패한 Promise의 실패 이유를 반환한다.

Promise.all([ 
  promise1, 
  promise2, 
  promise3
])
  .then(values => {
	 console.log("모두성공:", values) 
  })
  .catch(e => { 
  	 console.log("하나라도실패:", e)
  })

4. async/await

• Promise를 활용한 비동기 코드를 간결하게 작성하는 문법.
• async/await 문법으로 비동기 코드를 '동기 코드'처럼 간결하게 작성할 수 있다.
• async 함수과 await 키워드를 이용한다.
• await 키워드는 반드시 async 함수 안에서만 사용해야 한다.
• async로 선언된 함수는 반드시 Promise를 리턴한다.

async 함수

• async 함수는 function 키워드 앞에 async를 붙여 만든다.
• async 함수 내부에서 await 키워드를 사용한다.
• fetchData, fetchUser는 Promise를 리턴하는 함수이다.

//예를들면 이렇게..
function fetchData(){
	return new Promise
}

//fetchData()
//	.then() //then에서 data를 받을 수 있다
//	.catch()

async function asyncFunc() { 
	let data = await fetchData() 
    let user = await fetchUser(data)
  return user
}

• await 키워드는, then 메서드 체인을 연결한 것처럼 순서대로 동작한다.
• 비동기 코드에 쉽게 순서를 부여한다.

async function asyncFunc() {
  let data1 = await fetchData1()
  let data2 = await fetchData2(data1) //만약 이게 promise를 리턴하게 된다면 다음 await로 가기 전에 resolve되기를 기다린다, promise와 같다
  let data3 = await fetchData3(data2)
  return data3
}

function promiseFunc() {
  return fetchData1() 
    .then(fetchData2) 
    .then(fetchData3)
}

에러 처리

• Promise를 리턴하는 함수의 경우, 에러가 발생하면 catch 메서드를 이용하여 에러를 처리한다.
• catch 메서드를 사용하지 않는다면 async 함수에서 try-catch 구문을 이용하여 에러를 처리한다.

function fetchData1() {
  return request()
	.then((response) => response.requestData) 
    .catch(error => {
	  // error 발생
    }) 
}

• try-catch 구문으로 async/await 형태 비 동기 코드 에러 처리가 가능하다.
• catch 절의 e는, Promise의 catch 메서드가 받는 반환 값과 동일하다.

async function asyncFunc() {
  try {
	let data1 = await fetchData1()
    return fetchData2(data1)
  } catch (e) {
	console.log("실패:", e) 
  }
}

4-1. 이해를 돕기 위한 추가 내용

Callback -> Promise -> async/await

콜백함수

다음과 같이 비동기로 작동되는 함수가 있습니다.
이 비동기 함수는 2초 뒤에 Elice라는 이름을 인자로 받은 콜백함수의 인자로 넘겨줍니다.

function getName(cb) {
    setTimeout(() => {
        cb("Elice");
    }, 2000);
}

앞선 함수를 실행하려면 다음과 같이 getName 함수에 콜백함수를 넣어서 사용할 수 있습니다.

getName((name) => {
    console.log(name);
})
// 2초 후 Elice

만약 getName 함수를 이용해서 Elice라는 이름을 3번 출력하려면 어떻게 해야할까요?

다음과 같이 getName 함수를 절차적으로 실행시키면 2초 뒤에 Elice라는 이름이 나옵니다.

getName((name) => {
    console.log(name);
})

getName((name) => {
    console.log(name);
})

getName((name) => {
    console.log(name);
})
// 2초 후
// Elice
// Elice
// Elice

하지만 앞선 방법으로 콜백함수를 호출하면 각 함수에 대한 데이터를 사용할 수 없습니다. 예를들어 이름, 나이, 주소가 저장된 데이터를 비동기적으로 가져와야 한다고 가정해보겠습니다.

function getName(cb) {
    setTimeout(() => {
        cb("Elice");
    }, 2000);
}

function getAge(cb) {
    setTimeout(() => {
        cb(6);
    }, 2000);
}

function getAddress(cb) {
    setTimeout(() => {
        cb("Seoul");
    }, 2000);
}

해당 정보 출력하고자 합니다. 하지만 console.log를 한 번만 사용해야합니다. 어떻게 해야할까요?
다음 코드를 살펴보지 않고 직접 한번 시도해보세요.

getName((name) => {
    getAge((age) => {
        getAddress((address) => {
            console.log(name, age, address)
        })
    })
})

앞선 코드처럼 콜백함수 안에 콜백 함수를 반복하여 호출해야 name, age, address를 한꺼번에 접근할 수 있습니다. 비동기 함수가 3개 쓰이고, 각 2초씩 걸리기 때문에 6초 뒤에 Elice 6 Seoul이라는 log가 나오게 될 겁니다.

바로 이것을 콜백 지옥이라고 부릅니다. 비동기 함수를 3개만 썼을 뿐인데도,
코드가 정말 복잡해졌습니다. 비동기 함수가 더 많다면 관리하기 더 힘들겠죠?

Promise

자 이번에는 Promise를 이용하여 콜백 지옥을 보기 좋게 바꾸어 봅시다.
앞서 사용한 비동기 함수인 getName, getAge, getAddress를 가져오겠습니다.
그리고 Promise 객체를 만들어서 다음과 같이 수정해보겠습니다.

function getName() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Elice");
        }, 2000);
    })
}

function getAge() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(6);
        }, 2000);
    })
}

function getAddress() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Seoul");
        }, 2000);
    })
}

각 함수는 Promise 객체를 리턴합니다. 그리고 Promise 객체는 항상 2초 후에 resolve 되어 이름, 나이, 주소에 대한 정보를 주도록 했습니다. 그리고 다음과 같이 호출하여 사용할 수 있습니다.

getName().then((res) => {
    console.log(res);
})

getAge().then((res) => {
    console.log(res);
})

getAddress().then((res) => {
    console.log(res);
})

하지만 이렇게 사용하면 정보를 하나의 함수에서 제어하기 힘들겠죠?
따라서 다음과 같이 사용할 수 있습니다.

Promise
    .all([getName(), getAge(), getAddress()])
    .then((res) => {
        const [name, age, address] = res;
        console.log(name, age, address)
    })

Promise.all은 첫번째 인자에 배열을 받습니다. 그리고 그 배열의 원소는 모두 프로미스 객체입니다.
getName, getAge, getAddress 함수는 모두 프로미스 객체를 반환하기 때문에 Promise.all에서 사용할 수 있습니다. 또한, Promise.all은 병렬적으로 배열의 원소에 있는 프로미스를 동시에 실행시킵니다. 따라서 결과적으로 2초 후에 Elice 6 Seoul을 출력할 수 있습니다. 즉, 동시에 Promise 객체를 반환하는 함수들을 실행할 수 있는 것입니다. 콜백함수로는 할 수 없는 일입니다.

async/await

프로미스를 더 간단하게 사용하려면 다음과 같이 사용할 수 있습니다.
즉시실행 함수 형태에 async 화살표 함수를 이용해 작성할 수 있습니다. await 키워드에서 프로미스가 resolve 될 때까지 기다린 후 다음 순서로 넘어가기 때문에 6초 후에 Elice 6 Seoul이 출력됩니다.

(async () => {
    const name = await getName();
    const age = await getAge();
    const address = await getAddress();

    console.log(name, age, address);
})();

Promise와 async/await는 효과적으로 사용될 수 있는 상황이 다르기 때문에
두 방법 모두 잘 알고 있어야합니다. 메소드 체이닝이 많이 사용되는 코드에서는 Promise가 코드에 일관성을 지켜서 더 깔끔하게 보일 수 있고, 개별 함수를 호출하여 값을 받아오는 경우에는 asyne/await이 효과적입니다.

5. HTTP, REST API

HTTP(Hypertext Transfer Protocol)

• Web에서 서버와 클라이언트 간의 통신하는 방법을 정한 것.
• 클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상.
• 서버는 클라이언트가 요청을 보내기 전까지 대응하지 않음.
• 서버와 클라이언트 사이에는 무수히 많은 요소가 존재.
• HTTP는 이런 존재들 사이의 통신 방법을 규정.

HTTP Message

• 서버 주소, 요청 메서드, 상태 코드, target path, 헤더 정보, 바디 정보 등이 포함.
• 요청 메시지, 응답 메시지의 모양이 다름.
• HTTP/1.1 메시지는 사람이 읽을 수 있음.

HTTP Header

• HTTP 메시지의 헤더에는 콘텐츠 관련 정보, 인증 관련 정보, 쿠키 정보, 캐시 관련 정보 등 서버와 클라이언트간 통신시 필요한 정보를 담는다.
• 클라이언트 요청시, 서버 응답시 모두 헤더에 정보를 담을 수 있다.

HTTP Status

• HTTP 요청 시, 클라이언트는 요청의 결과에 대한 상태 정보를 얻는다.
• 200, 400, 500 등 숫자 코드와, OK, NOT FOUND 등의 텍스트로 이루어짐.
• 코드를 이용해 각 결과에 해당하는 행위를 할 수 있음.

요청 메서드

• HTTP에서, 클라이언트는 서버로 요청을 보낸다.
• 요청시요청메서드로특정요청에대한동작을정의한다.
• GET, POST, PUT, PATCH, DELETE, OPTIONS, CONNECT, TRACE 등이 규정됨.

REST API(Representational State Transfer API)

• API(Application Programming Interface)는 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수를 의미한다.
• REST API는 HTTP의 요청 메서드에 응하는 서버 API와 클라이언트 간 통신의 구조가 지켜야 할 좋은 방법을 명시한 것이다.
• 구체적인 내용으로는 요청 메서드의 의미, URI 설계, 클라이언트의 상태에 대한 동작 등을 정의한다.

• GET - 리소스 정보를 얻음.
• POST - 리소스를 생성.
• PUT - 리소스를 생성하거나 업데이트.
• DELETE - 리소스를 제거.

6. Fetch API

• 기존 XMLHTTPRequest를 대체하는 HTTP 요청 API.
• ES6에 추가된 Promise를 리턴하도록 정의됨.
• 네트워크 요청 성공 시, Promise는 Response 객체를 resolve 한다.
• 네트워크 요청 실패 시, Promise는 에러를 reject 한다.

let result = fetch(serverURL)

result
	.then(response => {
		if (response.ok) { 
          // 요청성공.
		} 
	})
	.catch(error => { 
  		// 요청실패.
	})

Response

• Response 객체는 결과에 대한 다양한 정보를 담는다.
• response.ok는 HTTP Status code가 200-299 사이면 true, 그 외 false이다.
• response.status는 HTTP status code를 담는다.
• response.url은 요청한 URL 정보를 담는다.

fetch(serverURL)
  .then(response => {
	 response.ok 
     response.status 
  	 response.statusText 
  	 response.url 
  	 response.bodyUsed
})

Header

• response.headers로 Response 객체의 헤더 정보를 얻을 수 있다.

fetch(serverURL)
  .then(resp => {
	 for (let [k, v] of resp.headers) {
      console.log(k, v)
     }
  })

Body 메서드

• response.json() 메서드는 얻어온 body 정보를 json으로 만드는 Promise를 반환한다.
• Promise가 resolve 되면 얻어온 body 정보를 읽는다.
• response.text(), response.blob(), response.formData() 등의 메서드로 다른 형태의 바디를 읽는다.

fetch(serverURL)
  .then(response => {
	return response.json() 
  })
  .then(json => {
    console.log('body : ',json) 
  })

POST 요청

• fetch(url, options) 로, fetch 메서드 옵션을 넣는다.
• method 필드로 여러 요청 메서드를 활용한다.
• headers, body 필드를 활용해 서버에 추가 정보를 보낸다.

fetch(serverURL, { 
  method: 'post', 
  headers: {
    'Content-Type':
	'application/json;charset=utf-8',
    Authentication: 'mysecret'
  },
  body: JSON.stringify(formData)
})
  .then(response => {
    return response.json()
  })
  .then(json => {
	console.log('POST요청결과:', json) 
  })