그대는 cs 단골질문중 하나였다,..
status:
요새 nodejs 와 js 로 게시판 만들다 코드를 돌이켜 보니 , 간만에 async-await을 조우하게 되었다.
ㅎㅎ. 어색해미치겠다 너..
- 게시판에서 req.body로 title,contest를 받아서 비동기화해서 router.post를 해야하는데, utils 중 하나인 AsyncHandler를 사용해 프로미스를 리턴하는 것을 보고 우와...했다.
그리고 여기서 콜백이 나오는데
솔직히 콜백 정확히 뭔지 모른다는거 ㅇㅈ?
AsyncHandler(async(req,res)=>{}
analyze myself:
- setTime() ->promsie -> promisechain -> async순으로 배운거 같은데
- 코드 위주로의 공부만하다보니 머리속으로 로직이 잘 돌아가지 않는게 문제
- 솔직히 callback hell 코드를 제대로 봤어야 하는데 잘 안보고 성공적인 코드만 보다보니..
- 그리고 promise hell 만 본거같은데 이것도 활용을 제대로 안하다보니 왜 '비동기적인지' 잊게되는거 같다.
how to study
1 > callbackhell Summary
-
Don't nest functions. Give them names and place them at the top level of your program
숨겨진 기능 사용하지마라 (익명함수등) 그들에게 이름을 주고 프로그래밍 최상위 레벨에 올려두어라 -
Use function hoisting to your advantage to move functions 'below the fold'
함수들을 폴더아래에 두기위해 너의 편의를 위해 hoisting 기능 사용하기 -
Handle every single error in every one of your callbacks. Use a linter like standard to help you with this.
모든 너의 콜백 에러에 모든 single 에러를 처리해라. linter을 표준처럼 사용해서 이것을 처리하자! -
Create reusable functions and place them in a module to reduce the load required to understand your code.
이해가 필요한 짐(너의 코드를 이해하기위해 필요한)을 줄이기위해 재사용가능한 기능들을 만들어서 module 안에 두기, -
Splitting your code into small pieces like this also helps you handle errors, write tests, forces you to create a stable and documented public API for your code, and helps with refactoring.
이와 같이 너의 코드를 가능한 작은 조각으로 쪼개면 니가 에러를 핸들링 하고 , test를 쓰거나, 안정성있고 문서화하는 public API 코드를 작성해야할때 도움됨.또 리팩토링할때도 도움됨.
2> setTime()함수, Promise 와 비동기처리의 관계
-
Promise 왜 쓰냐?
당장 원하는 데이터를 얻지 못하는경우 delay, latency 문제가 항상 있다. callback보다 좀 더 가독성을 높이기 위한 방법.//es5 const promise = new Promise(function(resolve, reject) { ... } ); //es6 function returnPromise() { return new Promise((resolve, reject) => { ... } ); } -
Callback을 리턴하면 ?
그런 방법도 있으나 지양한다 -
왜죠?
- 콜백함수 => 비동기 처리를 중첩해서 써야하는경우,중첩해서 넣게 되는데 그럼 가독성이 떨어지고 콜백지옥에 떨어진다...
- 콜백함수를 각각 분리해서 코드를 짜던지, Promise, async를 이용한다..
-
그래서 await 뭔데!
-
async : promise의 코드를 깔끔하게 줄여주기 때문에 가독성을 높혀주는 효과가 있다. (async가 붙은 function => promise 리턴)
-
await : 비동기로 처리되는 부분 앞에 await ,promise 반환
=> Promise .then으로 비동기 처리하던것을 async-await으로 코드를 줄일수있는것임.
-
//기존 promise callback
var user = fetchUser('domain.com/users/1', function(user){console.log("")}
//async await차이점
var user = fetchUser('domain.com/users/1');detail
- promise는 함수가 아니라.. 객체였따...
- mdn 참조 :
new Promise(executor)
executor : resolve 및 reject 인수를 전달할 실행 함수. 실행 함수는 프로미스 구현에 의해 resolve와 reject 함수를 받아 즉시 실행됩니다(실행 함수는 Promise 생성자가 생성한 객체를 반환하기도 전에 호출됩니다).
Promise 객체는 new 키워드와 생성자를 사용해 만듭니다. - 위 설명 부분이 자바객체 생성과 유사함. 좀 더 확인해볼것.
- mdn 참조 :
- 그럼 왜 메서드의 반환값이라고 명칭하지?
- mdn 참조:
프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다.
- mdn 참조:
- 기존 await 는 비동기를 동기적으로 바꾸는건가? == 잘못된 생각.
reference
캡틴판교_async&await
캡틴판교_비동기
이름부터 정직한 ㅋㅋ callbackhell
비동기처리 1부
비동기처리 2부
비동기처리 3부
