[JS] Async & Await .00

React나 Node를 공부하면서, 부족하다고 느껴졌거나 중요한 내용을 정리해서 기록합니다.

처음 작성하는 내용은 비동기 처리와 밀접한 관련이 있는 Async & Await 문법입니다.
비동기 처리를 완전히 이해했다고 말하기는 부족하나, 이 글을 작성하면서도 깨닫는 부분이 많았으면 좋겠다고 생각하며 작성하는 글입니다. 부족한 부분은 댓글로 피드백해주시면 정말! 감사하겠습니다.

 

💡 시작하기 전에

과거 JavaScript에서는 콜백지옥이라는 말이 있었죠. 비동기 동작을 처리할 때 비동기 함수 안에 또 비동기 동작들을 넣다보면 계속 함수가 중첩이 되어 마치 피라미드처럼 코드가 작성되는 지옥과도 같은 관경을 볼 수 있습니다. 그래서 콜백지옥을 해결하고자 ES6에서 Promise라는 비동기 처리에 사용되는 객체가 두두등장! 하게됬습니다.

 

Promise 처리과정은 Pendig(대기), Fulfilled(이행), Rejected(실패)로 나뉘어져 있습니다. 비동기 요청을 하고 console.log를 통해 살펴보면 처리과정을 확인할 수 있습니다. 간단한 예제와 함께 살펴보죠!

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(response => console.log(response))

위 코드를 크롬개발자도구 콘솔에 입력해보세요. 프로미스객체가 나타나고 잠시후 요청을 통해 전달 받은 json이 나타납니다. 성공적으로 전달을 받았다면, 콘솔에 아래와 같은 값이 나타납니다.

{
	"userId": 1,
	"id": 1,
	"title": "delectus aut autem",
	"completed": false
}

코드를 보면 then은 요청이 정상 처리된다면 다음 동작을 어떻게 할 것인지 담을수 있습니다. 풀어서 설명하면 제가 todos/1번을 요청했고 응답을 response에 담습니다. 그리고 response를 json 형태로 변환 시켜 반환합니다. 다음 then에서 해당 json을 console.log를 통해 콘솔에 나타냅니다.

 

여러가지 이유로 전달을 받지 못했다면, 400~500번대 오류와 함께 rejected으로 나타납니다. 이럴 경우 then 대신 catch를 사용하여 오류가 발생한다면 처리할 수 있습니다.

 

간단하게 Promise에 대해 알아보았습니다. 자세한 내용은 아래 링크를 참조해주세요. 정말 잘 정리되어 있습니다.

자바스크립트 Promise 쉽게 이해하기

 

📩 Async & Await

비동기 처리를 위해 나온 최신! 문법입니다. 전 파이썬에서 먼저 접했어서 조금 친숙했었어요.

기존 비동기 처리의 단점을 보완하고 더 깔끔한 코드를 보여주는 문법입니다.

이번 예제코드는 Axios라는 최근 http통신을 할때 많이 사용하는 라이브러리를 사용합니다.

async function getData() {
	const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
	const json = response.json();
    console.log(json);
}

 이전 코드와 비교하면 어떤가요? 확 깔끔해졌죠? fetch를 사용하신다면 axios.get 대신 fetch를 넣으시면 됩니다.

코드를 한번 자세히 보시면 async를 선언한다면, 이 함수안에 비동기 요소가 있다는 의미입니다. 또한 함수 안에서만 await을 사용할 수 있습니다. 둘은 항상 붙어 다닌다고 생각하시면 좋아요. async가 선언된 함수 안에 await을 여러개 사용하셔도 상관 없습니다.

 

만약 catch같은 오류를 잡고싶다면 try - catch 구문을 사용하시면 됩니다.

async function getData() {
	try {
	const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
	const json = response.json();
    console.log(json);
    } catch (err) {
    	console.log(err)
    }
}

이러면 오류가 몇번째 줄에 나타났는지 좀 더 쉽게 원인을 찾을 수 있다는 것도 큰 장점입니다!

비동기 처리는 최근 웹트렌드에서 아주 중요한 요소기 때문에 꼭 여러번 해보시는게 좋습니다.

 

 

참조. 

자바스크립트 async와 await

[자바스크립트] 비동기 처리 3부 - async/await