TIL 0605(블로킹,논블로킹,동기,비동기,이벤트루프,Promise,HTTP 통신)

자바스크립트의 특징

자바스크립트는 싱글 쓰레드(일 할 수 있는 손이 한 쌍)로 동작하는 언어다. 자바나 다른 언어들은 멀티 쓰레드를 제공하는데, 자바스크립트는 싱글 쓰레드로 HTTP요청, 이벤트 핸들러,타이머 함수 등의 작업을 모두 처리해야 한다. 자바스크립트가 싱글 쓰레드로 이런 작업들을 처리할 수 있는 이유는 논블로킹 방식의 비동기적 동시성 언어 이기 때문이다.

블로킹 논블로킹

블로킹
자신의 작업을 진행하다가 다른 주체의 작업이 시작되면 다른 작업이 끝날 때가지 기다렸다가 자신의 작업을 시작하는 것이다.
예시)
신입사원 도구리가 김부장에게 작성한 서류를 보고해야 한다. 김부장은 도사원에게 서류를 검토할 동안 그 자리에서 대기하라고 한다. 서류를 다 검토한 다음에야 도사원에게 서류를 건네주고 다시 자리로 돌아가 일하라고 한다.

논블로킹
다른 주체의 작업에 관련없이 자신의 작업을 하는 것이다.

예시) 신입사원 도구리는 이대리에게 작성한 서류를 보고했다. 이대리는 서류를 읽어볼테니 도사원은 돌아가 다른 일을 하라고 한다.

두 처리방식의 차이는 '제어권이 어디에 있는가' 이다. 블로킹은 제어권이 김부장에게 있고, 논블로킹은 제어권이 도사원에게 있다.

동기 비동기

동기사랑 나라사랑

동기
요청과 처리가 동시에 진행되는 것. 키오스크가 없는 배스킨라빈스에서 아이스크림을 주문하면 컵 크기와 담을 맛을 골라야 한다. 고객은 주문 후 컵 크기와 맛을 정해 요청하면 바로 아이스크림을 전달받을 수 있다. 주문을 하고 아이스크림을 전달받기까지 고객과 직원은 다른 일을 할 수 없고, 고객은 아이스크림이 포장되면 바로 받아가야 한다.

비동기
요청과 처리가 동시에 진행되지 않는 것. 키오스크가 있는 배스킨라빈스에서는 키오스크에서 주문을 하고 직원이 아이스크림을 담는 동안 대기한 뒤, 번호를 부르면 제품을 받는다. 대기하면서 고객은 다른 일을 할 수 있고, 고객이 다른일을 하다가 아이스크림을 늦게 받아갈 수도 있다. 키오스크는 또 다른 손님의 주문을 받을수도 있다.

동기와 비동기의 차이는 '끝나는 동시에 시작하는가' 이다. 동기는 다른 주체에게 작업을 넘기고 그 주체가 작업을 완료하면 완료한 작업을 받아 작업을 시작한다. 반면 비동기는 다른 주체에게 작업을 넘겨 그 주체가 작업을 처리하는 사이 다른 작업을 진행하고 다른 주체가 완료한 작업을 전달받더라도 그 작업을 즉시 시작하지 않는다.

이벤트 루프

자바스크립트
자바스크립트는 싱글쓰레드기반이지만 논블로킹방식(제어권 있음)의 비동기적인(작업이 끝나도 즉시 시작하지 않는) 동시성 언어이다.
이벤트 루프를 사용해 비동기 작업을 처리한다.

console.log(1+1);
setTimeout(function callback01(){console.log(2+2)},1000)//1초 뒤에 2+2출력
console.log(3+3);

//실행 결과
2
6
//1초 뒤
4

코드 실행 과정

1.콜스택에 console.log(1+1)의 실행 컨텍스트가 생성되고 쌓인다. console.log도 함수라 실행 컨텍스트가 생성된다.
2. 2가 출력되고 콜스택에서 console.log(1+1)이 사라진다.
3. setTimeOut callback01 함수의 실행 컨텍스트가 생성되고 Web API로 timer에 callback01함수가 들어간다.
4. setTimeout callback01 함수가 실행되었으므로 콜스택에서 사라지고, 출력되는 것은 없다.
5. console.log(3+3)의 실행 컨텍스트가 생성되고 쌓인다.
6. 6이 출력되고 콜스택에서 console.log(3+3)이 사라진다.
7. 모든 코드가 실행이 완료되었다.
8. 1초가 지났다. Web API에 있던 callback01이 콜백 큐(Callback Queue-콜백 놀이공원입장줄)에 들어간다.
9. 이벤트루프가 콜백 큐에 함수가 들어간 것을 보고 콜스택이 비어있는지 확인한다.
10. 콜스택이 비어있으므로 callback01을 콜스택에 넣고 실행컨텍스트를 생성한다.
11. console.log(2+2)의 실행 컨텍스트를 생성한다.
12. 4를 출력하고 console.log(2+2)이 콜스택에서 사라진다.
13. callback01함수도 모두 실행되었으므로 콜스택에서 사라진다.

이벤트루프는 콜백큐에 함수가 있는지 확인하고, 콜스택이 비어있는지를 확인한다. 콜스택이 비어있으면 Web API에서 함수를 가져와 콜백큐로 옮긴다.
만약 콜스택이 비어있지 않으면 setTimeOut함수에 설정된 시간이 지나더라도 실행되지 않고, 콜스택이 비었을 때 실행된다.

Promise

콜백 패턴이 가진 단점(끔찍한 가독성)을 보완한 또 다른 비동기 처리 패턴이다. 자바스크립트의 비동기 처리 패턴에는 콜백,프로미스, Async/Await이 있다.

new Promise((resolve,reject)=>{
  if (a==1){
    resolve
  }else{
    reject
  }

a가 1일 경우 비동기처리는 성공한 것이고, resolve 함수를 호출한다. 반대로 1이 아닐 경우, 비동기처리는 실패해 reject 함수를 호출한다.

상태	의미	해당 상태로 변경하기 위한 작업
pending	비동기처리되기 전	프로미스 생성 후 기본 상태
fulfilled	비동기 처리가 수행된 상태(성공)	resolve 함수 호출
rejected	비동기 처리가 수행된 상태(실패)	reject 함수 호출

then

this에 이어 then이다. 영어단어만 나오면 난이도가 급격하게 상승하는 것 같다.

new Promise((resolve, reject) => {
  
}).then((첫번째 콜백 함수, 두번째 콜백 함수))

then은 프로미스의 후속 처리 메소드다.두 개의 콜백 함수를 인자로 받는다.
fulfilled 상태가 됬을 때 호출되는 첫번째 콜백 함수 (resolve)
rejected 상태가 됬을 때 호출되는 두번째 콜백 함수 (reject)

function getData() {
  return new Promise((resolve, reject) => {
    //resolve를 실행할때 아래 선언된 메시지를 이행하세요.
    let msg = "javascript promise";
    resolve(msg);
  });
}

getData().then(el => console.log(el));
//Promise
//javascript promise

getData 함수의 return값으로 프로미스 객체를 넣어줬다. resolve함수에는 msg를 넣어줬고, getData의 비동기처리가 수행되면 function(el){console.log(el)을 실행해 el값으로 resolve(msg)가 들어가고, javascript promise가 출력된다.

const arr=[1,2,3]
new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve()
  },5000)
}).then(resolved=>{
  arr.push(4)
  console.log(arr)
})

코드를 실행시키면 Promise 객체가 출력되고 5초 뒤에 arr배열에 4를 추가한 뒤, arr 배열이 출력된다.
setTimeOut((resolve),5000)인데 then 뒤에 있는 resolve 함수가 arr배열에 4를 추가하고 출력하니까 5초 뒤에 이 작업들을 실행하는 것이다.

const arr=[1,2,3]
function createThen(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      if(arr.length>10){
        resolve(element)
      }else{
        reject('error')
      }
    },1000)
  })
}
createThen(arr)

코드를 실행 시키면 Promise 객체가 출력되고 error가 출력된다. 프로미스 객체의 state는 rejected,error이다. 조건문 arr.length>10이 만족되지 않았으므로 reject함수를 실행하는 것이다.

이부분 잘 이해 안 가서 화요일 강의 듣고 수정할 예정!

HTTP 통신

API
응용프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스다. 인터페이스는 상호간의 소통을 위해 만들어진 접점으로, 컴퓨터와 사용자의 인터페이스는 키보드라고 할 수 있다.

HTTP
클라이언트와 서버간의 통신을 위한 통신 프로토콜이다. GET,POST,PUT,PATCH,DELETE 등의 요청 메서드가 있다. 이부분은 나중에 더 공부해봐야 할 것 같다!

Async/Await

가장 최근에 자바스크립트 문법에 추가된 비동기 처리 패턴.
기존 콜백과 프로미스의 단점을 보완했다. 가독성이 좋다.
async를 붙이면 프로미스 객체를 반환한다.
await은 async 내에서 한번에 처리한다.