JS관련 독학한 내용을 정리해보려 한다.
- 비동기 처리 vs 동기 처리 : 비동기 처리는 특정 로직(코드의 연산)의 완성을 기다리지 않고 다음 코드를 계속해서 실행하는 자바스크립트의 특성을 말한다. 동기 처리는 보통 함수가 실행되는 방식과 유사하게 차례대로 코드가 실행된다고 생각하면 된다.
// #1 console.log('Hello'); // #2 setTimeout(function() { console.log('Bye'); }, 3000); // #3 console.log('Hello Again');일반적인 함수의 진행방식을 생각하면 Hello가 출력되고 Bye가 출력된 다음, Hello Again이 출력된다고 생각하겠지만, 위와 같이 비동기 처리가 된 setTimeout의 function은 그 실행이 완료될때까지 코드의 진행이 멈추지 않고 진행되어서 Hello -> Hello Again이 출력된 이후 3초 뒤에 Bye가 출력된다.
그렇다면 이러한 비동기 처리가 필요한 이유는?(그리고 자바스크립트에서 유효한 이유?)
사용자가 어떠한 request를 보냈을때 서버의 response를 기다릴때까지 어떠한 코드의 진행도 되지 않는다면..(그리고 request가 여러개라 여러개의 response를 받을때까지 실행과 멈춤이 반복된다면) 코드의 실행(완성)에 엄청난 시간이 소요될 것이다.
- async function 과 await : 그래서 이렇게 비동기처리된 함수는 어떠한 값을 뽑아줄 것이라 약속(?)한다는 느낌으로 promise라는 값을 뽑아준다고 표현하는 것 같다. 자바스크립트 코드의 발전에 대해선 잘 모르겠지만, 비동기처리를 표현하는 함수로 .then()을 사용하고 여러개의 비동기처리를 연결해줄 때도 then함수를 사용했는데 이를 더 깔끔하게 표현할 수 있는 방법으로sync 와 await 함수(강의에서 사용한)가 발전한 것 같다. 우선 async는 함수 function(파이썬의 def같은 느낌)을 감싸주며 이렇게 감싸진 함수는 반드시 promise를 반환하게 된다. 그리고 await 함수는 이러한 async함수 안에서만 작동할 수 있다. await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만든다. promise가 처리되면 그 결과와 함께 실행이 재개된다. 프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등) 비동기 작업을 진행할 수 있기 때문에 CPU 리소스 낭비를 방지할 수 있다. 정의 같은 건 각종 블로그를 참고한 부분이 있어서 유용한 블로그 주소도 같이 남겨본다.
https://velog.io/@khy226/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80-Promise-asyncawait-%EA%B0%9C%EB%85%90
- 강의에서 진행한 방식
const response = await fetch("http://127.0.0.1:8000/users/signup/", { headers: { 'content-type': 'application/json', }, method: 'POST', body: { "email": email, "password": password } }) }js의 변수 표현방식(const//var//let)을 통해 response라는 변수에 특정 url에 fetch한 요청이 돌아올때까지 await row에서 기다리라는 의미.
.