FE가 되고싶니? 나도✨

'https://learn.codeit.kr/api/employees'

이 주소로 들어가보면 데이터들의 배열을 볼 수 있었다.

주소 뒤에 /1 이렇게 ID를 붙이면 특정 직원에 대한 정보를 가져올 수 있는데, 1-10번에 해당하는 직원 정보를 각자 가져와서 출력해보자.

//for문을 사용하는 printEmployees 함수를 정의해보자.
async function printEmployees() {
  for (let i = 1; i < 11; i++) {
    const response = await fetch(`https://learn.codeit.kr/api/employees/{i}`);
    const data = await response.json();
    console.log(data);
  }
};

printEmployees();

템플릿 문자열 (${i}) 을 이용해서 리퀘스트를 내보내고 있다. 이걸 실행해보면 직원 정보가 하나씩 잘 출력된다.

하지만 이 코드는 사실 비효율적인 코드이다. 

이 코드는 수많은 await문을 순차적으로 실행한다. 첫번 째 await문을 기다리는 동안 함수 바깥으로 나갔다가 filfilled가 되면 다시 돌아와서 두번째 await을 기다리고 함수 바깥으로 나갔다가 filfilled가 되면 다시 돌아오고… …  …  …  

이런식으로 비동기 작업을 하나씩 순서대로 기다리기 때문에 오래 걸리는 것이다. 비동기 작업을 하나하나 기다리지 않고 한꺼번에 리퀘스트를 보내고 결과를 기다리는 효율적인 방법이 없을까? 그러려면 코드를 변경해주어야 한다.

//파라미터로 id를 받게 하고 
async function printEmployee(id) {
  const response = await fetch(`https://learn.codeit.kr/api/employees/{id}`); //id를 넣어준 다음
  const data = await response.json();
  console.log(data);
};

//for문을 함수 바깥으로 옮겨준다.
for (let i = 1; i < 11; i++) {
  printEmployee(i);
};
//그리고 함수 이름도 printEmployees에서 printEmployee로 바꿔준다.

언뜻보면 이전과 비슷한 코드처럼 보이지만 이번에는 async 함수를 10번 호출하고 있다. 이 방법이 훨씬 효율적이다.

시간이 훨씬 빨랐지만 한가지 주의해야 될 점은 순서는 뒤죽박죽이라는 점이다. 왜 이 방법이 더 빠른걸까? 

1. 가장 먼저 printEmployee (1) 을 실행한다. 
2. 함수 안에서 fetch 리퀘스트를 보내고 기다리는 동안 바깥으로 나온다.
3. 그 아래에 있는 코드는 printEmployee (2)이다. 그래서 fetch printEmployee/2의 리퀘스트를 보내고 다시 밖으로 나온다.
4. 이런식으로 printEmployee 3, 4, 5, 6, 7의 리퀘스트를 보낸다.
5. 중요! 리퀘스트의 결과를 기다리지 않고 바로 다음 URL에 리퀘스트를 보낸다는 것이다. (10개의 리퀘스트를 거의 동시에 보내는 것)
6. 리퀘스트를 거의 동시에 보냈기 때문에 리스폰스도 거의 동시에 돌아오고 결국 하나의 리퀘스트를 처리하는데 걸린 시간만큼만 기다리면 된다.
7. 이 때 리퀘스트를 보낸 순서대로 리스폰스가 돌아온다는 보장이 없어서 출력 순서가 조금 뒤바뀌는 것이다.

비동기 작업을 처리하는 순서는 중요하지 않고 작업들을 최대한 빨리 끝내는게 목표라면 이 방법을 사용하는게 좋다.

리스폰스가 돌아온 다음에는 리스폰스를 파싱하고, 파싱 작업이 끝나는대로 데이터를 출력한다.

//main.js
const response = await fetch('https://learn.codeit.kr/api/employees');
const data = await response.json();
console.log(data);

console.log('Task 2');

console.log('Task 3');

원래 비동기 프로그램의 목적은 비동기 작업의 결과를 기다리는 동안 다른 작업을 먼저 처리하는 것이다. fetch 결과를 기다리는 동안 아래에 있는 코드(작업)들을 먼저 처리해주면 좋을 것 같은데, 코드를 실행해보면 직원 데이터가 먼저 출력되고, Task 2, Task 3이 출력된다. 코드가 위에서부터 아래로 순서대로 실행되고 있는 것인데 Promise와 await으로 비동기 처리를 제대로 하려면 함수를 이용해야한다.

//asyncFunctions.js
export function printEmployees() {
  const response = await fetch('https://learn.codeit.kr/api/employees');
  const data = await response.json();
  console.log(data);
};

새로운 js 파일을 만들어 printEmployees라는 함수를 정의하고 main.js의 일부분을 긁어온다. 그런데 await에 빨간줄이 가있는걸 볼 수 있다.

await은 async 함수 내에서나 모듈(module)의 최상위 레벨에서만 사용할 수 있다고 한다. 일단 여기서 모듈이라는건 ES 모듈을 뜻하는데 package.json 파일에서 type을 모듈로 설정해 줬다. 

그래서 이 async-js 디렉토리 안에서는 파일들이 기본적으로 ES 모듈로 인식되기 때문에 함수 바깥에서도 await을 쓸 수 있었던 것이다. 만약 json 파일에서 type 모듈을 지우면 main.js 파일을 CommonJS 모듈로 인식하기 때문에 오류가 난다.
await으로 비동기 처리를 제대로 하려면 함수를 이용해야 하기 때문에 함수 바깥에서 await을 쓰는게 흔하진 않다. ES6 모듈 안에서만 이게 가능하다는 사실을 기억해두자.
다시 본론으로 돌아가서 async 함수 안에서만 사용할 수 있다는건 무슨 뜻일까? async 함수를 만들려면 function 앞에 async 키워드를 붙여주면 된다. 

//asyncFunctions.js
export async function printEmployees() {
  const response = await fetch('https://learn.codeit.kr/api/employees');
  const data = await response.json();
  console.log(data);
};

//참고, 화살표 함수 문법으로 async 함수를 정의하려면? async의 위치가 조금 다르니까 주의!

const printEmployeesArrow = async () => {
  const response = await fetch('https://learn.codeit.kr/api/employees');
  const data = await response.json();
  console.log(data);
}

그러면 아까 오류를 보이던 await의 빨간 줄이 더이상 보이지 않는다. 그럼 main.js 파일에서 printEmployees 함수를 가져와서 호출해 보자.

//main.js
import { printEmployees } from './asyncFunctions.js'
printEmployees();

console.log('Task 2');

console.log('Task 3');

실행해보면 이번엔 아까와 다르게 Task 2와 Task 3이 출력되고 그 아래에 직원 데이터가 출력됐다. 
코드의 실행 순서를 살펴보면

1. 가장 먼저 printEmployees 함수를 import 하고 (main.js 1번째 줄)
2. printEmployees 함수를 실행한다. (main.js 3번째 줄)
3. 그러면 함수 안으로 가서 fetch를 실행 (asyncFunctions.js 2번째 줄)
4. fetch는 prmise를 리턴하는데 앞에 await 문이 있기 때문에 promise가 fulfilled 상태가 될 때까지 기다린다. (asyncFunctions.js 2번째 줄)
5. 여기서 중요한 사실!  async 안에서 await 함수를 쓰면 promise가 fulfilled가 될 때까지 기다리는 동안은 다시 함수 바깥으로 나와서 나머지 코드를 모두 실행한다.
6. 나머지 코드 = main.js의 5, 7번째 줄  (그래서 printEmployee 함수 아래에 있는 코드들이 먼저 실행된 것)
7. 그러다 promise 상태가 fulfilled 가 되어 성공 결과를 갖게 되면
8. 다시 함수의 body로 돌아와 코드를 이어서 실행한다. (asyncFunctions.js 2-3번째 줄)
9. 그런데 여기에 또 promise를 await 하는 부분이 있다. (asyncFunctions.js 3번째 줄)
10. 그럼 다시 함수 바깥으로 나가서 코드를 실행한다. (main.js로 가지만 남은 코드는 없다.)
11. 이번엔 실행할 코드가 더이상 없기 때문에 그냥 기다리다가 promise가 fulfilled 상태가 되면 다시 돌아와서 코드를 마저 실행한다. (asyncFunctions.js 3-4번째 줄)
12. 콘솔창에 직원 데이터 출력 (asyncFunctions.js 4번째 줄)

fetch 함수는 Promise 객체를 리턴한다. 비동기 작업이 완료되면 promise가 결과값을 알려주는데 그 결과값을 받아오려면 await 문법을 쓰면 된다.

const response = await fetch('https://learn.codeit.kr/api/employees');

console.log(response);

이렇게 promise를 리턴하는 부분 앞에 await 키워드를 쓰면 되는데, 실행해보면 뭔가 복잡해보이는 것들이 출력된다. 이번에는 promise가 바로 리스폰스에 할당되는 것이 아니라 fetch 작업이 완료될 때까지 기다렸다가 fetch의 결과값이 리스폰스에 할당된 것이다.

원래 리스폰스는 복잡하게 생겨서 직원데이터를 얻기 위해서는 리스폰스(서버가 보내주는 응답)를 파싱(어떤 큰 자료에서 원하는 정보만 가공하고 뽑아서 원할 때 불러올 수 있게 하는것) 해야 한다. 그러기 위해선 리스폰스의 json 메소드를 쓰면 된다.

const response = await fetch('https://learn.codeit.kr/api/employees');
const data = response.json();
console.log(response);

json 메소드로 리스폰스를 파싱해서 데이터 변수에 저장해줬다.

실행해보면 또 promise 라고 나오는데 json 메소드도 실행하는데 오랜 시간이 걸릴 수 있기 때문에 promise를 리턴하는 것이다. 그래서 여기 앞에도 await을 붙이면 직원 데이터가 잘 출력된다.

const response = await fetch('https://learn.codeit.kr/api/employees');
const data = await response.json();
console.log(response);

참고로 await 부분을 하나의 표현식으로 생각해서 

const response = await fetch('https://learn.codeit.kr/api/employees');
console.log(await response.json());

이렇게 작성하는것도 가능하다. 일단 console.log( 이 부분 )을 실행하고 이거(await response.json())의 결과값을 출력하는 것이다. (하지만 이전 버전이 더 이해하기는 쉽다.)

promise와 await 문법의 동작 원리

fetch 함수는 promise를 리턴하고, promise는 3가지 중 하나의 상태를 갖는다.

• Pending: 비동기 작업의 결과를 기다릴 때
• Fulfilled: 비동기 작업이 성공적으로 완료됐을 때. 비동기 작업의 성공 결과를 결괏값으로 갖게 됨.
• Rejected: 비동기 작업이 중간에 실패했을 때. 비동기 작업에서 발생한 오류를 결괏값으로 갖게 됨.

처음에는 Promise가 pending, 즉 미결정 된 상태이다. 그래서 이전처럼 promise를 바로 출력했을 땐 promise {<pending>}이라는 결과가 출력됐었다.

const result = await Promise;

// 예시
const response = await fetch('https://learn.codeit.kr/api/employees');

하지만 Promise 객체 앞에 await 키워드를 쓰면 Promise의 상태가 fulfilled 또는 rejected가 될 때까지 기다린다. (Promise 객체의 값을 가져오려면 항상 앞에 await을 붙여야 한다.)

• Fulfilled(비동기 작업 성공적으로 완료)가 되면 Promise 객체의 결괏값을 리턴한다.
• Rejected(비동기 작업 실패)가 되면 Promise 객체의 결괏값(오류)을 throw한다.

promise가 Fulfilled되는 경우로 생각해보자.

비동기 작업이 성공해서 Fulfilled 상태가 되면, 비동기 작업의 성공 결과. fetch의 경우 리스폰스를 promise의 결과값으로 갖게 된다. 그리고 await은 promise의 결과값을 꺼내서 리턴해준다. 그래서 리스폰스가 리스폰스 변수에 할당되는 것이다.

response.json 역시 promise를 리턴하는데, 마찬가지로 처음에는 promise가 pending 상태지만, 앞에 await이 있기 때문에 파싱 작업이 끝날 때까지 기다린다. 파싱 작업이 끝나면 promise는 Fulfilled 상태가 되고, 성공 결과. 즉, 파싱된 데이터를 결과값으로 갖게 된다. 그리고 이 결과 값이 데이터에 할당되는 것이다.

그래서 데이터를 출력하면 직원 데이터가 잘 출력된다.

‼️ 결론 : Promise를 리턴하는 표현식이 있다면 그 앞에 await 키워드를 써서 결과값을 받아 올 수 있다. await을 쓰면 promise가 fulfilled 상태가 될 때까지 기다렸다가 결과값을 돌려주기 때문이다.