코드 땜장이

 제너레이터 함수를 다루어 보았을까? 만약 그렇다면, async/await이 없던 시절에 개발을 했던 사람일 수 있다.  자 오늘은 옛날 코드 다시보기가 될 수 있을 수 있다.  callBack  자 하나하나씩 보도록 하자. 일단 xmlHttpRequest나 form방식은 건너띄고, 우리에게 친숙한 callback 방식이다. // callBack 버전 $.ajax({ url : 'https://jsonplaceholder.typicode.com/comments' , dataType : 'json' , success : function (comments) { // 댓글 목록을 처리합니다 . // ... // 댓글 목록을 가지고 POST API 호출 const comment = comments[ 0 ]; // 첫 번째 댓글 선택 const postData = { postId : comment . postId , name : comment . name , email : comment . email , body : comment . body , }; $.ajax({ url : 'https://jsonplaceholder.typicode.com/comments' , method : 'POST' , data : JSON . stringify ( postData ), dataType : 'json' , success : function (data) { console . log ( ' 새로운 댓글이 생성되었습니다 :' , data); ...

 들어가기 앞서, promise, async, await을 모르는 분은 아래의 링크를 먼저 읽도로 합시다. https://www.blogger.com/blog/post/edit/5763507515709642449/5970595066280268078    개발을 하다보면, 여러개의 네트워크 요청을 한번에 처리해야 하는 경우가 많다. 간단하게 아래처럼 시간이 10초 이내로 랜덤하게 걸리는 요청이 있다고 해보자. const callApi = (param) => { return new Promise (resolve => setTimeout (() => resolve(param) , Math . floor ( Math . random () * 5 ) * 1000 )) }  1. 간단하게 아래와 같은 코드로 여러번의 호출을 실행해보았다. const paramList = [ 1 , 2 , 3 , 4 , 5 ] for ( const param of paramList ) { callApi ( param ). then (res => console . log (res)) }  2. 위와 같이 정상적으로 실행이 되었다. 하지만, 결과에 대한 표시와 요청순가 달라져서 순서대로 표시가 되게 수정을 해달라고 요청이 왔다. const promises = [] for ( const param of paramList ) { promises . push ( callApi ( param )) } Promise . all ( promises ). then (resList => resList. forEach (res => console . log (res)))    3. 위와 같이 코드를 변경 하여서 모든 요청이 완료 되고나서 요청 순서대로 표시가 되게 수정을 완료 하였지만, 이번엔 백엔드 개발자 분이 오셔서 1 ~ 5번까지 순서대로 요청을 하고, 요청이 완료되면 다음 요청을 보내달라고 요...

 이번 포스트에서는 비동기처림에 대한 간단한 처리만 해보고 넘어 가고자 한다. callback, promise, async await을 모르는 분만 읽기를 바라며 그저 간단하게 사용법을 소개 하는 포스트이다.  웹 개발뿐만 아니라 네트워크로 통해서 들어오거나 외부 레거시 코드를 실행하는 경우, 즉시 값이 리턴을 받지 않고, 해당 네트워크 혹은 레거시에서 처리후 callback을 통하여 실행 되는 경우가 많다.  이러한 경우를 처리를 해보자. function getDir ( path , callback ) { if ( typeof callback === 'function' ) { setTimeout ( () => { callback( [ 'Documents' , 'Download' , 'Etc' ] ) } , 1000 ) } }  위 처럼 해당 path에 있는 폴더들을 확인 하고 그 폴더들가지로 callback을 호출해주는 코드이다.  우린 위처럼 콜백 함수를 넣어서 순회를 할 수 있다.  예전에 구현해둔 map을 이용해서 적절하게 순회도 가능하다.  자 그렇다면 test 폴더안에서 Etc 폴더를 찾아서 그 안의 폴더인 Donwload 폴더를 찾아보면 어떤 코드가 될까?  위와 같이 표현이 될 수 있다. 그렇다면 점점 더 상세한 폴더가 필요 하게 되면 어떻게 될까?  즉 test/Etc/Download/Download/Download/Download/Download/Download 처럼 말이다.  코드는 점점 안쪽으로 들어가서 코드가 파악하기가 점점 복잡해진다. 위는 그나마 간단한 요구 조건이라서 덜 복잡해보이는 감이 있다.  getDir에다가 Promise를 입혀보자. function getDirPromise ( path ) { return new Promise (resolve => { ...