211208 프론트엔드 스쿨 28일차

수업 내용 (이호준 강사님)

자바스크립트

Promise

• 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

• 콜백 지옥에서 탈출시켜준다.

• Promise 생성자 함수를 new 연산자와 함께 호출하면 Promise 객체를 생성한다.

• Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는다.

• 이 콜백 함수는 resolve와 reject함수를 인수로 전달받는다.

• 콜백 함수 내부에서 비동기 처리를 수행한다.

  비동기
  현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식

• 비동기약속, 이따가 실행(콜백함수)해줄게

• 예시

let promise = new Promise(function(resolve, reject) {
  // Promise 함수의 콜백 함수 
  setTimeout(() => resolve("끝남!"), 3000);
});

promise 
console.log('hello world');
promise.then(v => console.log(v));
console.log('hello world2');


// hello world
// hello world2
// 끝남!

Promise가 끝나고 난 다음

• then메서드 : 해당 Promise가 성공했을 때의 동작을 지정. 인자로 함수를 받는다.
  catch 메서드 : 실패했을 때의 동작을 지정. 인자로 함수를 받는다.

• 예시 1

// 중요함
// 모던자바스크립트 예제
new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

• 예시 2

// 모던자바스크립트 예제 (살짝 수정)
new Promise(function(resolve, reject) {

  setTimeout(() => reject('error'), 1000);

}).then(function(result) {

  alert(result + ' : 잘 수행!');
  return result + 'one';

}).catch(function(result) {

  alert(result + ' : 애러 발생!'); // 1
  return result + 'two';

}).then(function(result) {

  alert(result + ' : 잘 수행!'); // 2
  return result + 'three';

});

try..catch..finally

• 에러 핸들링

• 예시

try {
   ... 코드를 실행 ...
} catch(e) {
   ... 에러 핸들링 ...
} finally {
   ... 항상 실행 ...
}

• throw 연산자 : 원하는 부분에 에러를 발생시킴 (catch가 잘 작동하는지 확인)
  
  

손코딩

• 1

// 1차 접종 퍼센트를 구해주세요!
fetch('https://블라블라.json')
    .then(function(response) {
        console.log(1);
        return response.json();
    })
    .then(function(json) {
        console.log(2);
        console.log(json);
        return json
    })
    .then(function(json) {
        console.log(3);
        console.log(json.filter(s => s['시·도별(1)'] === '전국').map(obj => obj['1차 접종 퍼센트']));
        return
    })

• 2

// 1차 접종 퍼센트를 구해주세요!
new Promise(function(resolve, reject) {

  setTimeout(() => reject('error'), 1000);

}).then(function(result) {

  alert(result + ' : 잘 수행!');
  return result + 'one';

}).catch(function(result) {

  alert(result + ' : 애러 발생!'); // 1
  return result + 'two';

}).then(function(result) {

  alert(result + ' : 잘 수행!'); // 2
  return result + 'three';

});

stack 💫다시 정리

<문제>
1 2 3 4 5 를 순서대로 stack에 넣는다.
다음 중 stack이 될 수 없는 것은 ?

async, await

• Promise를 기반으로 동작한다.

• Promise의 후속 처리 메서드(then/catch/finally) 없이 마치 동기 처리처럼 Promise가 처리 결과를 반환하도록 구현할 수 있다.

• async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다.

• await 키워드는 프로미스가 settled 상태(비동기 처리가 수행된 상태)가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환한다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

fetch

• HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API이다.

• 프로미스를 지원해서 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다.

• fetch 함수는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다.

• fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.

const promise = fetch(url [, options])

새로 알게 된 내용

• 모든 것이 새롭다... 오늘 수업은 들었는데 안 들렸다. 한 귀로 들어와서 실시간으로 다른 귀로 빠지는 느낌... 개념이 제대로 안잡혀서 계속 붕 떠있는 시간이었다. 이해가 되는데 이해가 안돼... 한마디로 어려웠다.
  그래서 딥다이브 보면서 다시 개념 공부를 했다. 작동 원리를 명확하게 파악하지는 못했지만 용어에 대해서는 이해했다.