221208_TIL
오늘 공부한 내용
- 항해99 주특기 숙련주차
async와 await
ko.javascript.info
어려웠던 내용
- promise와 async/await의 개념의 차이에 대해서 많이 헷갈렸던 것 같다. promise는 비동기처리를 도와주는 객체라고 알고 있는데 async는 비동기처리를 도와주는 함수이고, Promise를 반환해주는 함수라는 것 또한 배우게 되었다. 그렇다면 차이는 뭘까? 굳이 왜 나눠서 쓰는거지? 어떨때 사용해서 하는거지? 라는 의문만이 계속 쌓였었다.
Javascript의 동기식 흐름을 따르지 않는 비동기 처리의 특성상, 비동기 작업의 실행 순서가 보장되지 않는다.
그리하여 콜백함수가 등장하게 되었는데, 순서대로 실행하려는 파일의 개수가 늘어날수록 가독성이 안좋게 되어버린다는 점이 문제가 되었다. 이 외에도 예외처리를 위해 콜백함수마다 try...catch 문법을 사용해야 해서 번거로움이 단점으로 꼽히기도 했다.
Promise는 callback 패턴의 여러 단점을 보완하기 위해서 생긴 기능이다.
Promise 의 경우 비동기 처리를 실행하긴 하지만, 결과를 바로 callback 함수로 건네주는 것이 아니라 나중에 처리할 수 있다는 것이 특징이다.
하지만 Promise 객체 또한 .then()과같이 꼬리에 꼬리를 무는 코드가 나올 수도 있다는 부분이 단점으로 꼽힌다.
Promise와 콜백함수의 단점을 해소하고자 async/await가 만들어졌다.
Promise와 async/await의 차이점으로는 에러핸들링을 예로 들 수 있다.
Promise의경우 .catch()문으로 에러들을 처리할 수 있지만 async/await의 경우 별도의 에러처리 기능이 없기 때문에 try-catch문을 사용하여야 한다.
또한 Promise의 경우 콜백지옥으로 인해 코드가 번잡해 보일 수 있지만 async/await는 비동기처리코드가 동기코드처럼 보여 코드의 흐름을 이해하기 쉽다.
async function showAvatar() {
// JSON 읽기
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();
// github 사용자 정보 읽기
let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
let githubUser = await githubResponse.json();
}느낀점
오늘 시험을 치고 난 이후에 찾아오는 공허함과 다른 일로 인한 스트레스로 공부에 집중을 못했던 것 같다.
그래도 몰랐던 내용들을 공부해보도록 노력해가며 짧은 하루를 돌아보았다. 어느덧 새벽 4시까지 공부하는게 습관이 되어버렸다는 사실이 신기하기도 하고 다들 열심히 공부하는 분위기가 형성되어서 그런지 다른방향으로 새더라도 금방 다시 집중할 수 있게 된다는게 참 재밌다고 생각이 든다.
어느덧 시간이 많이 흘렀구나 싶었다. 앞으로도 지금까지 노력해왔던 것을 토대로 새로운 성을 쌓아보아야겠다.
내일 할 일
- 새로운 주차로 접어들어 새로운 조원분들과 만나게 되는 날.
- 새롭게 공부해야 될 내용들을 가볍게 훑어보고 숙지해보자.