오늘은 동기/비동기 통신에 대해서 배웠습니다.
기본적으로 자바스크립트는 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 동기 실행 방식으로 통신하지만, axios나 apollo-client같이 통신을 도와주는 라이브러리들은 기본적으로 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 비동기 실행 방식으로 통신합니다.
요청들 사이에 서로 기다려줄 필요가 없으므로 여러 가지 요청을 동시에 처리해줄 수 있는 장점이 있지만, 데이터를 요청하고 화면에 그려줄 때 응답이 들어오기 전에 화면에 그려주게 된다면 에러가 발생할 수 있겠죠?
그래서 우리는 이러한 비동기 실행 방식을 동기 실행 방식으로 바꾸어주어야했습니다.
이것을 도와주는 명령어가 async/await 이였습니다.
async/await을 사용해주면 await이 작성된 부분의 코드 실행이 완전히 완료되기 전까지는 하단의 코드가 실행되지 않습니다. 이렇게 되면 완전히 완료된 후 완성된 데이터를 화면에 잘 그려줄 수 있겠죠??
호이스팅에 대해서도 배웠습니다.
변수의 선언과 초기화를 분리해서 선언만 코드의 최상단으로 끌어올려주는 것이라고 했습니다.
function 함수 선언과 var 변수 선언은 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있었고, 게다가 재선언/할당이 가능해지기 때문에 예기치못한 에러가 발생할 수 있었습니다.
const나 let도 호이스팅이 되지만 , 할당되기 전에는 Temporal Dead Zone, TDZ에 있어서 앞서 등장하지 않았고 const의 경우에는 재선언/재할당이 모두 불가능하기 때문에 예기치못한 에러 발생을 방지할 수 있었습니다.
우리가 화살표 함수를 사용하고, let이나 const 변수 선언을 사용해주시는 이유가 이제 더 명확해지셨나요?
vscode에서 apollo-client를 사용하여 graphql-API 요청하실 때는 useQuery()와 useMutation()을 사용해서 통신해주시면 되겠습니다. (apollo-client에서 import 해주시는 것도 잊지말기!)
이런 개념들을 잘 이해하시고 데이터 통신을 해주시면 좋겠습니다!
Promise의 이러한 불편한 점들을 해결하기 위해 ES7(ES2017)에서 async/await 키워드가 추가되었습니다. async/await 키워드를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있습니다.
위의 샘플 코드를 async/await 키워드를 이용하여 재작성 해보겠습니다.
async function fetchAuthorName(postId) {
const postResponse = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postId}`);
const post = await postResponse.json();
const userId = post.userId;
const userResponse = await fetch(
`https://jsonplaceholder.typicode.com/users/${userId}`);
const user = await userResponse.json();
return user.name;
}
fetchAuthorName(1).then((name) => console.log("name:", name));`
`name: Leanne Graham`달라진 점을 찾아 보면 먼저 함수 선언부를 보면 async 키워드가 function 앞에 붙었다는 것을 알 수 있습니다. 그리고 Promise를 리턴하는 모든 비동기 함수 호출부 앞에는 await 키워드가 추가되었습니다.
await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용할 수 있으며 비동기 함수가 리턴하는 Promise로 부터 결과값을 추출해줍니다. 즉, await 키워드를 사용하면 일반 비동기 처리처럼 바로 실행이 다음 라인으로 넘어가는 것이 아니라 결과값을 얻을 수 있을 때까지 기다려줍니다. 따라서 일반적인 동기 코드 처리와 동일한 흐름으로 (함수 호출 후 결과값을 변수에 할당하는 식으로) 코드를 작성할 수 있으며, 따라서 코드를 읽기도 한결 수월해집니다.
한가지 주의할 점은 async 키워드가 붙어있는 함수를 호출하면 명시적으로 Promise 객체를 생성하여 리턴하지 않아도 Promise 객체가 리턴됩니다. 따라서 호출부를 보시면 Promise 객체를 사용했던 것 동일한 방식으로 then() 메서드를 통해서 결과값을 출력하고 있습니다.
하지만 만약 이 호출부가 또 다른 async 키워드가 붙어있는 함수의 내부에 있다면 동일한 방식으로 await 키워드를 사용하여 Promise가 제공할 값에 바로 접근할 수 있습니다.
async function printAuthorName(postId) {
const name = await fetchAuthorName(postId);
console.log("name:", name);
}
printAuthorName(1);