비동기 코드를 처리 하자

 이번 포스트에서는 비동기처림에 대한 간단한 처리만 해보고 넘어 가고자 한다. 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 => {
    getDir( path, resolve )
  })
}

 위 처럼 기존에 있는 함수라면 callback을 resolve로 넘겨주는 것만으로도 promise를 리턴 받게 할 수 있다.

 그리고 위의 요구 조건을 진행 해보면

 위 처럼 콜백함수를 통해서 결과값을 핸들링 하는 것이 아닌. Promise 객체의 then 으로 원하는 값을 가지고 핸들링을 하니 코드 자체가 편안하게 바뀐 것을 볼 수 있다.

 async await을 이용하여 조금더 편안하게 처리 해보자.

async function process () {
  const folders1 = await getDirPromise( 'test' )
  const foundFolder1 = filter(folder => folder === 'Etc', folders1)[0]
  console.log('foundFolder1', foundFolder1)

  const folders2 = await getDirPromise( foundFolder1 )
  const foundFolder2 = filter(folder => folder === 'Download', folders2)[0]
  console.log('foundFolder2', foundFolder2)

  const folders3 = await getDirPromise( foundFolder2 )
  const foundFolder3 = filter(folder => folder === 'Download', folders3)[0]
  console.log('foundFolder3', foundFolder3)

  const folders4 = await getDirPromise( foundFolder3 )
  const foundFolder4 = filter(folder => folder === 'Download', folders4)[0]
  console.log('foundFolder4', foundFolder4)

  const folders5 = await getDirPromise( foundFolder4 )
  const foundFolder5 = filter(folder => folder === 'Download', folders5)[0]
  console.log('foundFolder5', foundFolder5)

  const folders6 = await getDirPromise( foundFolder5 )
  const foundFolder6 = filter(folder => folder === 'Download', folders6)[0]
  console.log('foundFolder6', foundFolder6)
}

 async await을 이용 하면 비동기 코드를 동기 코드처럼 다룰수가 있다.