20211018 TIL

오늘 배운 것

팀프로젝트로 제작중인 웹사이트에 새로운 기능을 구현하기위해 javascript의 async기능을 이용해 보았다. javascript는 코드를 순차적으로 실행하지 않고 빨른 호출이 가능한 순서대로 호출이 되기때문에 조금 어려움이 있었다. javascript 코드를 작성하는 방법이 여러가지가 있는데 그들 중에 로딩 우선순위를 보자면

<script> ➜ (function(){}()) ➜ $(document).ready(funtion(){}) == $(funtion(){})

순서로 실행하고 그 외의 코드들은 먼저 실행이 가능한 순서부터 처리한다고 한다.
어떻게 보면 효윺적인 방법이고 나처럼 javascript를 잘 모르는 사람은 어떤 코드가 먼저 실행될지 몰라서 당황하는 경우도 생길 것이다.

async 와 await

async와 await는 javascript의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 Callback 함수와 Promise의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성 할 수 있게 도와준다.

• Callback function : 나중에 호출되는 함수. Callback을 넘겨받는 코드는 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. 대표적인 예로 event handler가 있다. ex) onclick = funciont()
• Primise : 서버에서 받아온 데이터를 화면에 표시할 때 주로 사용한다. 데이터를 받아오기전에 화면에 데이터를 표시하려고하면 오류가 발생할 수 있기때문에 Promise를 사용함.

기본문법

함수 앞에 async라는 예약어를 붙인다. 함수 내부 로직 중 HTTP통신을 하는 비동기 처리 코드 앞에 await를 붙인다.

async function 함수이름() {
	await 비동기_처리_메서드_이름();
}

비동기 처리 메서드가 꼭 Promise 객체를 반환해야 await가 제대로 동작한다.

오늘 느낀 점

새로운걸 배우는 것은 매우 매우 즐겁다! 아직 완벽하게 안다고 말할 수는 없지만 너무나 뿌듯한 하루였다 😆