자바스크립트 개발자가 일부러 비동기 코드를 사용하는 경우가 있나요?

Question

책보고 비동기 공부하고있는데요.비동기 처리되는 코드 나오면 async, await으로 순서대로 처리되도록 만들더라구요.(예: db입출력, 비동기 처리를 위한 콜백패턴)웹 개발에서 async awiat 같은거 안쓰고 진짜로 일부러 비동기로 구현해야하는 경우가 있나요?

kenu,전독시 · Answer

Promise 또는 .then() 으로 구현할 수 있습니다.async await 나오기 전에는 저 방법이 일반적이었습니다.

Clickin · Answer

더 옛날에는 다 콜백으로 보냈었죠. 들여쓰기 엄청 깊어지고요자바스크립트 자체가 무조건 싱글스레드 언어인 건 아니지만 웹브라우저들이 다들 이벤트 루프 방식을 채택하다보니 옛날부터 비동기로 짤 수밖에 없었습니다.진짜 옛날에 바닥부터 수제 이벤트 루프 만들어다 비동기 짜던 사람들 시점에서는 콜백 정도면 편한거 아니야? 라고 생각할 수도 있겠네요

드림드림 · Answer

일부러 비동기로 만드는게 아니고 자연의 일들은 기본적으로 다 비동기에요.사용자가 언제 클릭 할지,서버에서 언제 데이터를 보내줄지,파일을 읽으면 언제 시스템에서 다 읽을수 있을지 다 미리 예측 할수가 없는 일이가든요.이벤트들이 다 비동기적으로 발생하니 비동기적인 프로그램을 작성할수 밖에 없습니다. 하지만 프로그래머가 인식하고 작성하기에는 동기식이 편하기 때문에async await 같은 걸로 동기적인 것처럼 보이게 하는 거죠.

한안아 · Answer

많쥬

kenu,전독시 · Answer

가독성 때문에 나온 것으로 알고 있습니다.이 코드는 http://callbackhell.com 에서 가지고 왔습니다.fs.readdir(source, function (err, files) { if (err) { console.log('Error finding files: ' &#43; err) } else { files.forEach(function (filename, fileIndex) { console.log(filename) gm(source &#43; filename).size(function (err, values) { if (err) { console.log('Error identifying file size: ' &#43; err) } else { console.log(filename &#43; ' : ' &#43; values) aspect &#61; (values.width / values.height) widths.forEach(function (width, widthIndex) { height &#61; Math.round(width / aspect) console.log('resizing ' &#43; filename &#43; 'to ' &#43; height &#43; 'x' &#43; height) this.resize(width, height).write(dest &#43; 'w' &#43; width &#43; '_' &#43; filename, function(err) { if (err) console.log('Error writing file: ' &#43; err) }) }.bind(this)) } }) }) } })모듈화하고, 리팩터하는데 한계를 async await가 많이 해소했습니다.Java언어를 제외하고 거의 다 이 문법을 사용하고 있습니다. https://en.wikipedia.org/wiki/Async/await

초무쿤 · Answer

옛날에는 브라우져 자체가 동기기반이라 비동기로 한다고 온갖 똥꼬쇼를 다 했었는데. 세상 참..ㅎㅎ

myLifeIsTrippy · Answer

전부 동기식으로 작성한다는 것은 그냥 Promise 함수에 async/await을 사용하여, 동기적으로 코드를 작성하니, 큰 의미가 없다는 것으로 보여집니다. 다만 꼭 그렇지 않은 경우도 있습니다.예를 들어, 이미지 업로드가 있습니다. 그리고 시스템은 사용자가 업로드한 이미지를 썸네일 형태로 보여준다고 합시다.그럼 아마도 사용자에게 파일을 입력받는 순간, 그 파일을 이미지 업로드하는 API를 요청하고, 이미지를 스토리지 서버에 저장시킨 다음에 서버에서 이미지에 대한 URL을 내려준다면 당연히 사용자는 자신이 올린 이미지 썸네일을 확인하기까지 상당한 시간이 걸릴 것입니다(이미지 업로드 요청 -> 서버에서 이미지 업로드 로직 수행 -> 응답(url))하지만, 이미지 업로드 API를 요청하고, 응답을 받기까지 기다리지 않고 이미지 파일을 base64로 인코딩하여 보여준다면, 사용자는 대부분 업로드 즉시 이미지를 확인할 수 있을 것입니다. 그리고 그 동안은 비동기적으로 서버에서 이미지 업로드를 수행하고, 업로드가 완료되면, 서버는 이미지에 대한 URL을 응답하고요. 다만 이 방법은 서버에서 이미지 업로드 행위를 실패했을 경우에 대한 핸들링이 추가되어야 할 것입니다..!

memoization · Answer

자바스크립트는 한 시점에 하나의 작업만 처리하는건 아시죠? 자바스크립트는 싱글 스레드 언어로, 한 시점에 하나의 작업만을 처리할 수 있습니다. 이는 동기적 코드 실행 시, 현재 실행 중인 작업이 완료될 때까지 CPU 자원을 점유하며, 해당 작업이 종료된 후에야 다음 코드가 실행될 수 있다는 것을 의미합니다.웹 페이지에서 긴 처리 작업을 동기적으로 실행하면, 브라우저가 해당 작업이 끝날 때까지 응답하지 않는 현상, 즉 UI가 "멈춘" 것처럼 보이는 현상이 발생할 수 있습니다.동기적 실행의 문제를 해결하기 위해 JavaScript는 비동기 패턴을 도입했고, 콜백(callbacks), 프라미스(Promises), async/await는 모두 JavaScript가 비동기 작업을 처리하는 방법을 발전시켜온 단계입니다.초기 콜백은 콜백 지옥 찾아보시면 될 것 같고,콜백 지옥 문제를 해결하고 코드의 가독성이 향상된 프라미스는 비동기 작업의 최종 성공 또는 실패를 나타내는 일종의 대기 중인 값이고,async/await는 프라미스 기반의 비동기 코드를 더욱 명확하고 직관적으로 작성할 수 있게 해주는 최신 JavaScript 문법입니다. 이 문법을 사용하면, "비동기 코드를 거의 동기 코드처럼" 보이게 하여 작성할 수 있습니다.async/await를 사용하면 프라미스의 결과를 기다리는 코드를 읽고 쓰기 쉬운 동기적 형태로 작성할 수 있어 프라미스 체인보다 훨씬 간결하고 이해하기 쉽습니다. await는 함수 실행을 "일시 중지"시키고 프라미스의 결과를 기다리므로, 여러 비동기 작업을 연속적으로 처리할 때 동기 코드와 유사한 패턴으로 작성할 수 있어 가독성을 높입니다.보통 async/await는 프라미스보다 코드를 더욱 간단하고 읽기 쉽게 만들어주므로 복잡한 비동기 작업에서 선호되지만, 때로는 단순한 단일 비동기 작업에는 프라미스만 사용하는 것이 더 간결할 수 있습니다. 또한, 두 방식은 서로 호환되므로 필요에 따라 혼용해서 사용할 수 있습니다.fetch API와 같이 비동기로 실행되는 네트워크 요청은 응답 시간에 따라 완료까지 다양한 시간이 소요될 수 있는데, 만약 이러한 API 호출을 동기적으로 처리하려고 시도한다면, JavaScript 엔진이 네트워크 응답을 기다리는 동안 전체 스크립트 실행이 블락되어 어플리케이션의 반응성이 크게 저하될 수 있고 실행 오류가 발생하거나 의도치 않은 결과를 초래할 수 있습니다.(API를 호출해서 완료되지 않은 시점에서 예를 들어 API의 속성을 이용하는 함수를 호출한다던가 하면 당연히 에러가 나기 때문에 완료될 때까지 기다리게 해야 함. => 비동기 작업을 처리하는 동안 해당 작업이 완료될 때까지 해당 함수 내에서의 코드의 실행을 기다리게 만듦.)async 함수 내에서 await 키워드를 사용하면, JavaScript 엔진은 해당 프라미스가 완료될 때까지 함수 실행을 "일시 중지"하는데 이 일시 중지는 함수 외부의 다른 코드 실행에 영향을 주지 않습니다. 즉, 웹 페이지의 다른 스크립트 처리나 사용자 인터페이스는 await에 의해 중단되지 않고 계속 작동합니다.=> 이 부분의 중요성을 글쓴님이 이해하지 못하고 계신듯 합니다.await는 비동기 작업을 처리하는 동안 해당 작업이 완료될 때까지 코드의 실행을 기다리게 만들고, 이러한 점으로 인해 코드가 마치 동기적으로 실행되는 것처럼 보이지만, 실제로는 비동기 실행의 특성을 유지하고 있습니다.async function process() { console.log("Start"); const result = await new Promise(resolve => setTimeout(() => resolve("Done!"), 2000)); console.log(result); // "Done!"이 출력되기까지 2초 대기 console.log("End"); } console.log("Before process"); process(); console.log("After process"); /* 출력 Before process Start After process Done! End */위 코드에서 process() 함수 내의 awiat는 new Promise가 완료될 때까지 함수의 실행을 일시 중지하지만, 이 일시 중지는 process() 함수 내에서만 유효하고, 전역 코드의 실행은 중단되지 않습니다. 따라서 "After process"는 프라미스가 완료되기 전에 즉시 출력됩니다.=> 즉, async와 awiat는 비동기 코드를 작성할 때 동기적인 스타일을 제공하여 코드의 흐름을 더 쉽게 이해하고 관리할 수 있도록 돕습니다. 하지만 이것이 실제로 코드의 비동기성을 제거하는 것은 아니라, 단지 비동기 코드의 복잡성을 관리하고 가독성을 향상시키는 도구라고 볼 수 있습니다.

비정규분포 · Answer

다들 Promise와 async 비교를 하시는데, 둘 다 이루려는 목적도 똑같지만, 가장 큰 차이점은 context switching. Promise는 callback를 주는데 반해 async는 실제로 그 줄에서 실행 멈추고 엔진(브라우저)이 그 시점 컨텍스트를 저장하고 해당 작업이 완료 될때까지 다른 context를 처리합니다. JS는 100퍼 싱글스레드가 그리 신경 안써도 되는데(그래도 async 난무하다가 이꼴 나기도 함), 다른 언어로 넘어가면 이 개념 정확이 모르고 코드 짜다가 race condition 터지고 난리 납니다.

자바스크립트 개발자가 일부러 비동기 코드를 사용하는 경우가 있나요?

9개의 답변

Q&A 목록