[TIL] 23.04.06

오늘의 나는 무엇을 배웠을까

JS

1. 비동기 실행

console.log('Start');

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

console.log('End')

위 코드의 실행 순서는 어떻게 될까?

1. Start 가 콘솔에 출력된다.
2. fetch 함수가 실행되고 받은 리스폰스로 필요한 처리를 수행한다.
3. End 가 콘솔에 출력된다.

가 일반적으로 우리가 알고 있는 코드의 흐름일 것이다.
이를 동기식 실행이라고 한다.

하지만, 결과를 출력해 보면

1. Start 가 콘솔에 출력
2. End 가 콘솔에 출력
3. fetch 함수가 실행되고 받은 리스폰스로 필요한 처리를 수행한다.

와 같은 순서로 코드가 실행된 것처럼 보인다.
그 이유는 fetch 함수에서 리퀘스트를 보내고 리스폰스를 받아 처리하기 전에 코드의 실행 흐름이 다음 코드로 넘어가고, 등록된 콜백이 나중에 실행되기 떄문인데, 이러한 실행 흐름을 비동기 실행 이라고 한다.

fetch 함수는 비동기 실행 함수이므로, 리퀘스트 보내기와 콜백 등록을 일단 해두고 리스폰스가 오기 전까지 이어지는 다음 작업을 이어 진행하게 된다. 이후 리스폰스가 오면 필요한 처리를 하여 결과를 반환한다.
이러한 코드 진행 흐름을 통해 시간을 절약할 수 있다.

1-1. 비동기 실행 함수의 예

• fetch 함수 : 콜백이 실행되는 조건이 리스폰스가 도착했을 때.
• setTimeOut 함수 : 특정 함수의 실행을 설정한 시간만큼 뒤로 미룬다, 콜백이 실행되는 조건이 설정한 시간만큼 경과 되었을 때.
• setInterval 함수 : 특정 콜백을 일정한 시간 간격으로 실행하도록 함
• addEventListener 메소드 : 콜백이 특정 이벤트가 발생했을 때 실행함

2. Promise 객체

2-1. Promise 객체란

• 비동기 작업이 미래에 맞이할 완료 또는 실패 상태와,
• 그 결과 값을 가지는 객체
• 비동기 메소드에서 마치 동기 메소드처럼 값을 반환
  단, 최종 결과가 아닌 미래의 어느 시점에 결과를 제공하겠다는 약속을 반환

2-2. Promise 객체의 3가지 상태

1. 대기 (Pending) 상태
   이행하지도, 거부하지도 않은 초기 상태
2. 이행 (fulfilled) 상태
   비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
3. 거부 (rejected)
   비동기 처리가 실패 또는 오류가 발생한 상태
   

2-3. Promise 객체가 가지는 결과 값

1. 이행 되었다면 -> 작업 성공 결과
2. 거부 되었다면 -> 작업 실패 정보

2-4. then 메소드

• 이행 또는 거부 시 각각의 콜백 함수 2개를 인수로 받고
• 프로미스를 반환하는 메소드
• 첫 then() 메소드 콜백의 매개변수로 fetch 함수 promise의 결과 값이 넘어옴
• 프로미스가 거부 (rejected) 상태이면 작업 실패 정보가 매개변수로 넘어옴

2-5. Promise chaining

• 여러개의 프로미스를 연결하여 사용
• 비동기 작업을 순차적으로 수행할 때 전체 코드를 깔끔하게 나타내기 위해서 사용
• then() 메소드 호출 시 새로운 프로미스 반환
  1. then() 메소드의 콜백이 프로미스를 반환하는 경우
  then() 메소드의 프로미스는 콜백이 반환한 프로미스와 동일한 상태와 결과 값을 가짐
  2. then() 메소드의 콜백이 프로미스 객체가 아닌 값을 반환하는 경우
  then() 메소드의 프로미스는 이행 (fulfilled) 상태가 되고, 콜백의 반환 값을 결과 값으로 가짐
  3. then() 메소드의 콜백이 아무 값도 반환하지 않는 경우
  then() 메소드의 프로미스는 이행 (fulfilled) 상태가 되고, undefined 를 결과 값으로 가짐
  4. then() 메소드의 콜백 내부에서 에러가 발생한 경우
  then() 메소드의 프로미스는 거부 (rejected) 상태가 되고, 에러 객체를 결과 값으로 가짐
  5. then() 메소드에서 아무런 콜백도 실행되지 않을 경우
  then() 메소드의 프로미스는 이전 프로미스 객체와 동일한 상태와 결과 값을 가짐

2-6. text, json 메소드

• 이 2가지 메소드도 프로미스 객체를 반환
• text 메소드의 경우, fetch 함수로 리스폰스를 성공적으로 받으면 프로미스 상태로는 이행 (fulfilled), 결과값으로는 리스폰스 바디의 내용을 문자열로 변환한 값을 가짐
• json 메소드의 경우, fetch 함수로 리스폰스를 성공적으로 받으면 프로미스 상태로는 이행 (fulfilled), 결과값으로는 리스폰스 바디를 역직렬화한 객체를 가짐

2-7. catch 메소드

• 프로미스 객체가 거부 (rejected) 상태가 되면 실행할 콜백을 등록하는 함수

.catch((error) => { console.log(error); })
와
.then(undefined, (error) => { console.log(error); })
는 동일한 의미를 가짐

• 프로미스 chaining에서 어느 프로미스 객체가 거부 (rejected) 상태가 되더라도 대응하기 위해서는 catch() 메소드를 마지막에 쓰는 것이 좋음
• 단, 에러가 발생했더라도 작업을 살릴 방법이 있다면 프로미스 체인 중간에 catch() 메소드 활용 가능

2-8. finally 메소드

• 프로미스 객체의 상태와 상관없이 항상 실행하고 싶은 콜백이 있을 때 사용
• finally()
• 결과 값을 필요로 하지 않으므로 콜백은 매개변수가 필요하지 않음
• 보통 catch() 메소드 뒤에 사용
• 정상적이든 문제가 생기든 항상 동작해야 할 코드가 있을 때 사용

2-9. Promise 객체 생성하기

1. 프로미스 생성자

const promise = new Promise((resolve, reject) => {
  
});

(resolve, reject) => {} : 실행(executor) 함수

• 실행 함수 : 내부에서 비동기 처리 작업 수행, 처리 성공 시 resolve 함수 호출 & 프로미스 이행 상태, 처리 실패 시 reject 함수 호출 & 프로미스 거부 상태
• 프로미스가 생성되는 순간 안에 전달한 실행 함수가 자동적으로 실행됨

2. 상태가 결정된 프로미스 객체 생성

const p = Promise.resolve('success');
resolve 메소드 -> 이행 상태의 프로미스 객체 생성
const p = Promise.reject(new Error('fail'));
reject 메소드 -> 거부 상태의 프로미스 객체 생성

내일의 나는 무엇을 해야할까?

• 자바스크립트 웹 개발 기본기 수강
• Weekly Mission 시작