NickNameNN
63
2022-05-14 22:28:31
2
130

JavaScript async/await 질문드립니다.


안녕하세요! 자바스크립트 async/await이 잘 이해가 되지 않아 문의드립니다.

보통 자바스크립트의 일반함수들은 동기로 작동되는걸로 알고 있는데 async/await을 붙여서 비동기로 처리해야되는 함수들과 동기로 처리해야하는 함수 구분을 잘 못하겠습니다. 

예를 들면 데이터베이스 접근하여 데이터를 가져오는 것을 얘기를 하자면 클라이언트에게 데이터베이스에 있는 것을 긁어와 보여주려면 동기로 동작이 다 끝날때까지 기다렸다가 상대방에게 보여줘야 하는 것으로 생각이 되어지는데 네트워크로 연결하여 데이터를 가져오는 작업을 할 때는 비동기로 async/await을 사용해서 처리하는 것 같더라구요.. 아직까지 명확히 동기 비동기에 대한 개념이 안잡혀있어서 그런지 현재 웹 프로젝트를 하고있는데 어떨 때 어떤 함수에 async/await을 붙여야하는지 잘 모르겠습니다 ㅠㅠ

0
  • 답변 2

  • assign
    632
    2022-05-14 22:55:31

    먼저 동기 비동기에 대해서 이해해보시면 좋겠습니다. 동기는, 자바스크립트 함수를 한줄씩 실행하는 작업을 의미하고, 비동기는 특정 문법(settimeout, setinterval promise..)등을 자바스크립트 콜스택 내에서 처리하지않고, 외부에 맡겨둔뒤 처리된뒤 자바스크립트 엔진에서 다음 과정을 실행하는것을 의미합니다. 즉 이후에 어떤 작업을 실행시킬수 있는 여부가 동기 비동기를 가르는 기준이 아닙니다.  동기 비동기에 대한 이해는 브라우저가 자바스크립트를 어떻게 처리하는지를 정확하게 알아야 이해할수 있습니다. 따라서 아래 영상 혹은 사이트를 추천드립니다.

    - https://youtu.be/8aGhZQkoFbQ 

    - https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/

    자바스크립트의 브라우저에서 작동원리를 이해하셨다면 이러한 비동기를 할수 있는 방법이 총 세가지가 존재함을 아셔야합니다. 

    1. 콜백함수: 기존의 방식인데, 콜백지옥을 만들어내어 코드를 읽을수 없게 만듭니다. 간단한 코드이더라도 코드를 굉장히 어렵게 만듭니다. 사용하지 않으시는것이 좋습니다.

    2. promise: 기존의 콜백함수 방식을 개선하는 비동기 처리 방식으로 es6이후 도입되었습니다. 콜백으로 넘기지 않고, then 메소드로 이후의 작업을 실행할수 있습니다. 

    3.async await : promise를 조금더 편리하게 즉 비동기 작업을 마치 동기적인것 처럼 처리하도록 도와주는 promise의 문법적 설탕과도 같습니다. 

    아래 블로그의 글을 모두 참고하시면 좋겠습니다.

    https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

    https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

    https://joshua1988.github.io/web-development/javascript/js-async-await/

    여기까지 학습하셨다면 질문자님이 원하시는답을 얻었을것이라 생각합니다. 

  • NickNameNN
    63
    2022-05-14 23:25:12

    친절한 답변 감사드립니다!! 조금 읽어보니 제가 완전히 다른 방향으로 이해하고 있었던 것 같네요. 보내주신 것들 전부 꼼꼼하게 읽어보도록 하겠습니다 감사합니다!!

  • 로그인을 하시면 답변을 등록할 수 있습니다.