[Front-end🦁] #29 비동기 첫걸음 Promise, fetch, async, await / 19장

1. 멋사 수업

overriding, overloading

• overriding - 메서드를 상속받아서 같은 이름의 새로운 함수로 만드는 것.
• overloading - 이름이 같은 매개변수 개수/타입이 다른 함수를 만들면 다른 함수로 취급하는 것. (js에는 없는 개념. 뒤에 만든걸로 덮어쓰기 됨.)

구조 분해 할당

// 잔고, [이름, 성]을 요소로 가진 배열
let arr = [1000, ["Hojun", "Lee"]]
// 구조 분해 할당을 이용해
// 계좌잔고에는 arr[0]
// firstName엔 arr[1][0]을
// surname엔 arr[1][1]을 할당
let [계좌잔고, [firstName, surname]] = arr;

error handling

let json = "{ bad json }";
try {
  let user = JSON.parse(json); // <-- 여기서 에러가 발생하므로
  alert( user.name ); // 이 코드는 동작하지 않습니다.
} catch (e) {
  // 에러가 발생하면 제어 흐름이 catch 문으로 넘어옵니다.
  alert( "데이터에 에러가 있어 재요청을 시도합니다." );
  alert( e.name );
  alert( e.message );
}

try {
  alert( 'try 블록 시작' );
  if (confirm('에러를 만드시겠습니까?')) 이상한_코드();
} catch (e) { 
  // 에러 잡음
  // e를 이용해서 에러의 종류도 처리 가능.
  alert( 'catch' );
} finally { 
  // 에러가 있든 없든 무조건 실행
  alert( 'finally' );
}

-> http 통신 status code 쓸 때 custom error 많이 만든다.

로그인 유효성 검사 예시 코드

콜백함수

나중에 실행할 함수! 함수를 실행해서 넘기면 안됨. 이름만 넘겨야함.
콜백 지옥... => Promise 로 해결.

userData.login(
    id, 
    pw, 
    (user) => {
        userData.getData(
            user,
            (userData) => {
                ..콜백에 콜백..
            },
            (fail) => {
                ..콜백에 콜백..
            }
        );
    },
    (fail) => {
        ..콜백에 콜백..
    },
    (user) => { //이미지 로드
        ..콜백에 콜백..
    },
    (user) => { // 계좌 연동
        ..콜백에 콜백..
    },
);

Promise - 비동기

서버랑 통신할 때 사용.
로그인 성공, 정상적인 url로 접근했는지 이런거 전부 이걸로 잡는다.

// 콜백함수를 언제 부를진 모르겠지만 언제 부르겠다고 (비동기) 약속.
// resolve(value) — 작업이 성공적으로 마무리되면 호출, 결과는 value에 담김
// reject(error) — 작업이 실패시 호출, error는 error에 담김
let promise = new Promise(function(resolve, reject) {
  // 프라미스가 만들어지면 executor 함수 자동 실행.
  // 10초 뒤에 일이 성공적으로 끝났다는 신호가 전달되면서 result는 'done'이 됩니다.
  setTimeout(() => resolve("이제야 끝남!"), 10000);
});
console.log('hello world'); // 바로 찍힘. promise 안에 있는건 비동기적으로 일어나고 있다는 것.
console.log(promise); // 10초 동안은 pending
console.log('hello world2'); // 역시 바로 찍힘.

// 이 형태를 자주 만나게 될테니 잘 기억해두기.
new Promise((resolve, reject) => { ... code ... })
    .then(...code...) // Promise 안의 것이 수행이 끝나야 then 이 수행된다.
    .then(...code...) // 앞의 then 이 끝나야 수행된다. Promise Chaining
    .finally(...code...) // 성공 실패와 상관 없이 Promise 처리 후 실행.
    .catch(...code...)

// 정리 전
loadScript('1.js', function(error, script) {
    if (error) {
      handleError(error);
    } else {
      // ...
      loadScript('2.js', function(error, script) {
        if (error) {
          handleError(error);
        } else {
          // ...
          loadScript('3.js', function(error, script) {
            if (error) {
              handleError(error);
            } else {
              // 모든 스크립트가 로딩된 후, 실행 흐름이 이어집니다. (*)
            }
          });
        }
      })
    }
  });
  // 정리 후 - catch도 넣어주면 됨.
loadScript("/article/promise-chaining/one.js")
  .then(script => loadScript("/article/promise-chaining/two.js"))
  .then(script => loadScript("/article/promise-chaining/three.js"))
  .then(script => {
    // 스크립트를 정상적으로 불러왔기 때문에 스크립트 내의 함수를 호출할 수 있습니다.
    one();
    two();
    three();
  });

new Promise(function(resolve, reject) { // Promise의 실행이 callback 왜냐면 함수 받으니깐
  setTimeout(() => reject('error'), 1000); 
}).then(function(result) { // resolve 이면 catch에 들어가질 않으므로 여기까지 나옴.
  alert(result + ' : 잘 수행!');
  return result + 'one';
}).catch(function(result) { // reject 이면 catch에 잡히므로 여기만 나옴.
  alert(result + ' : 애러 발생!'); // 1
  return result + 'two';
}).then(function(result) {
  alert(result + ' : 잘 수행!'); // 2
  return result + 'three';
});

Promise.all , allSettled 이런 메서드도 있다. 나중에 알아봐요~

fetch

// fetch는 Promise 방식이라 then, catch, finally 쓸 수 있다.
fetch('https://어쩌구.json')
    .then(function(response) {
        console.log(1);
        return response.json();
    })
    .then(function(json) {
        console.log(2);
        console.log(json);
        return json
    })
console.log(3);
console.log(4);

async, await

Promise의 syntatic sugar.
원래 await는 async 안에서만 동작했는데 밖에서도 동작할 수 있게 바뀌었다.

// async를 붙이면 Promise 처럼 사용할 수 있다.
async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });
  // promise 가 끝날때까지 기다린다.
  let result = await promise;
  let response await fetch('어쩌구.json'); // 이런식으로 사용.
  return 100;
}
f().then(alert);

호출 스택

// 함수가 호출될 때 마다 위로 쌓임.
anonymous // 가상 전역 컨텍스트. 완전 완전 완전 마지막에 빠짐.

Event Loop

백그라운드, 테스크 큐, 호출스택의 루프를 이벤트 루프라고 한다. 완벽한 이해를 현 단계에서 할 필요는 없지만 대단해지려면(?) 꼭 알아야하는 내용!

1. 메모리에 실행함수 적재
2. 호출스택에 anonymous가 들어감
3. console.log(1)이 호출 스택에 쌓임
4. console.log(1)이 실행되어 console에 1을 찍고 스택에서 제거
5. 백그라운드에 timer(실행, 1) (계속 시간을 카운팅하는 중)
6. console.log(3)이 스택에 쌓임
7. console.log(3)이 실행되어 console에 3를 찍고 스택에서 제거
8. anonymous 사라짐
9. 1초가 지나가면 백그라운드에서 태스크 큐로 '실행' 함수를 가져옴(백그라운드에서 없어짐)
10. 태스크 큐에서 실행함수를 호출 스택으로 가져옴
11. '실행'함수 위에 console.log(2)가 쌓임
12. console.log(2)이 실행되어 console에 2를 찍고 스택에서 사라짐
13. '실행' 함수가 호출 스택에서 사라짐

3. 보라님의 깃헙 특강!

README.md

• awesome keyword readme 같은 키워드로 검색해서 여러 리드미를 참고해보면 좋다.
• README 는 대략적인 내용만 쓰고 상세한 건 WIKI에 관리하자.

commit

• 커밋은 논리적 변경이 있을 때!

• 가능하면 커밋 크기는 작게 쪼개자! 작업 단위 별로 작성하기.

• 프로젝트 초기 구성 / 기능 별로 나누는 경우가 많다.

• 파일 여러개 뭉텅이로 건드리는 건 상관 없는데, + 1472 줄인데 'XXX 작업' 이라고 로그 찍혀있으면 당신은 그 날 사망한다 (by 조은)

commit message convention

• 커밋 메시지 규칙
• 다른 사람이 해당 메시지를 보고 알 수 있을 정도로 간단명료하게 적으면 된다.
• 변경분이 커밋 메시지 내용과 맞는지
• 이슈트래커와 매칭이 되는지.

• 소스트리 쓰지말고 CLI 쓰자. git status 를 사용하자.

github 관리 전략

• TIL
• 오픈소스 기여

• 리눅스 기초 커맨드 라인 알고 가자

4. Deep Dive

19. prototype 링크

prototype 은 어떤 객체의 부모 역할을 하는데, 모든 객체에서 공유하는 함수나 프로퍼티를 사용하기 위해 쓴다. 생성자 함수와 서로 참조를 하고 prototype chain을 만들며,,, 이런 내용이었는데 읽어도 읽어도 끝이 없었다.

일단 이해가 안가는건 아닌데 prototype 개념 자체가 좀 추상적이다보니 왜..? 왜..? 끝이 안나지 하면서 계속 읽었다... 다시 보니 293~345... 26장을 읽은거였다......

비동기 정리 (with 조은님)

동시에 처리하는 것처럼 보이지만 자바스크립트는 사실 싱글 스레드 언어라서 한땀한땀 처리하고 있다. 비동기 작업을 만나면 Web API (ajax, DOM event, Timer) 에다가 해당 작업을 넘겨버린다.
그리고 Web API가 비동기 작업을 끝내면 작업을 Task Queue에 넣음.

싱글 스레드 == call stack이 하나다.

Call stack의 작업이 전부 끝났고, Call stack 이 완전히 비면 (asynchronous 까지 빠져나가면) Task Queue의 아이템을 Call Stack 에 넣고 처리.

비동기인 이상 Web API와 Task Queue를 거쳐서 올 수 밖에 없으므로 정상(?) order에 있는 애들보다 나중에 실행된다.