0901 TIL fetch API , event loop

냐하호후·2021년 8월 31일

TIL

목록 보기

35/101

🙆‍♀️ blocking 과 non-blocking을 설명할 수 있나요?

호출된 함수가 자신이 할 일을 모두 마칠 때까지 제어권을 계속 가지고서 호출한 함수에게 바로 돌려주지 않으면 block

호출된 함수가 자신이 할 일을 채 마치지 않았더라도 바로 제어권을 건네주어(return) 호출한 함수가 다른 일을 진행할 수 있도록 해주면 non-block

🙆‍♀️ 중첩된 callback이 발생하는 사례를 이해하고 있나요?

네트워크 요청, 파일 읽기, setTimeout 등

fetchAPI

자세한 내용은 다루지않았으므로 오늘 배운부분만 작성해본다.

자바스크립트에서는 fetch로 비동기 요청을 할 수 있다. 주로 API를 호출하고 응답 데이터를 받아오는데에 사용한다.

fetch에는 첫번째 인자에 요청할 url이 들어간다.
fetch 함수가 Promise 객체를 return 한다.

Promise 스프린트 설명

const fs = require("fs");
const 프로미스실행함수 = (resolve, reject) => {
  // resolve, reject? 둘 다 함수, 인자를 전달할 수 있다.
    // resolve, reject
  //
  // 내가 원하는 로직이 성공했어 -> resolve(성공한결과)
  // 내가 원하는 로직이 실패했어 -> reject(실패이유) // 생략 가능
  // 길이를 구하는 로직을 작성할 때 아래와 같이 작성할 수도 있다.
  // const str = 'hello world'
  // let count = 0;
  // for (let i = 0; i < str.length; i += 1) {
  //   count++
  //   if (str[i] === ' '){
  //     reject('공백은 사용하지 않습니다') 
  //   }
  // }
  // resolve(count);

  // 상황에 따라서 성공할 수도 있고, 실패할 수도 있는 코드다. ex) HTTP Ajax 요청, readFile...
    // 아하! 그러면 둘 다 대비를 해야겠군.
  fs.readFile('./README.md', 'utf8', (err, data) => {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
}


const 프로미스인스턴스 = new Promise((resolve, reject) => {
  // resolve, reject? 둘 다 함수, 인자를 전달할 수 있다.
    // resolve, reject
  //
  // 내가 원하는 로직이 성공했어 -> resolve(성공한결과)
  // 내가 원하는 로직이 실패했어 -> reject(실패이유) // 생략 가능
  // 길이를 구하는 로직을 작성할 때 아래와 같이 작성할 수도 있다.
  // const str = 'hello world'
  // let count = 0;
  // for (let i = 0; i < str.length; i += 1) {
  //   count++
  //   if (str[i] === ' '){
  //     reject('공백은 사용하지 않습니다') 
  //   }
  // }
  // resolve(count);

  // 상황에 따라서 성공할 수도 있고, 실패할 수도 있는 코드다. ex) HTTP Ajax 요청, readFile...
    // 아하! 그러면 둘 다 대비를 해야겠군.
  fs.readFile('./README.md', 'utf8', (err, data) => {
    if (err) {
      reject()
    } else {
      resolve(data)
    }
  })
})

// 프로미스의 주요 메소드
  // 프로미스인스턴스 : 프로미스를 리턴함 -> status를 확인하실 수 있어요.
  // .then => 프로미스를 리턴함
    // .then의 실행함수의 인자로 fulfilled된 결과가 전달된다.
    // 즉, resolve의 첫 번째 인자
  // console.log(프로미스인스턴스) // => 프로미스
    // .then((resolve에전달한인자) => {})  
  // .catch => 프로미스를 리턴함
    // .catch의 실행함수의 인자로 rejected된 결과가 전달된다.
    // 스크립트의 실행이 중간에 멈추는 것을 막는다.
    // 이렇게 에러를 catch 하는 것을 "에러 핸들링" 이라고 부른다.
  //
  
const 프로미스실행함수2 = (resolve, reject) => {
  fs.readFile('./README2.md', 'utf8', (err, data) => {
    if (err) {
      reject()
    } else {
      resolve(data)
    }
  })
}

// [Promise, Promise]
const 프로미스s = [new Promise(프로미스실행함수), new Promise(프로미스실행함수2)]
const 프로미스sMap = [프로미스실행함수, 프로미스실행함수2].map(func => new Promise(func));

// Promise<[1, 2]> => 테스트 케이스 => [1, 2]
const resolved된프로미스s = Promise.all(프로미스s)
// resolved된프로미스s.then([1, 2] => [1, 2][0], [1, 2][1])

// 프로미스 사용이 다소 어색하다, 동기적인 코드를 짜던 이전처럼 짜고 싶다.
  // async / await을 사용하면 편함.
const asyncFunc = async () => {
  const await이없는경우 = new Promise(프로미스실행함수); // fulfilled promise
  const await이있는경우 = await new Promise(프로미스실행함수); // 결과값 (resolve의 인자)
  console.log(await이없는경우, await이있는경우);
  // return await await이없는경우
}
// asyncFunc()

const rightAsyncFunc = async () => {
  const promises = [new Promise(프로미스실행함수), new Promise(프로미스실행함수), new Promise(프로미스실행함수), new Promise(프로미스실행함수), new Promise(프로미스실행함수), new Promise(프로미스실행함수)]
  return await Promise.all(promises);
  // return;
}

event loop

자바스크립트 런타임

V8 런타임과 브라우저가 제공하는 웹 API가 있다.
콜스택 === 1스레드 === 1콜스택 === 한번에 하나의 코드만 실행할 수 있다.
콜스택은 데이터 스트럭처로 실행되는 순서를 기억하고 있다.
느리게 동작하는 코드가 있다. 느린 동작이 스택에 남아있는 것을 보통 blocking이라고 말한다.

Array.sort()

배열일 경우

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]

객체일 경우

items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1; //a가 더 크면 양수
  }
  if (a.value < b.value) {
    return -1; //b가 더 크면 음수
  }
  // 같은 경우
  return 0;
});